@charset "utf-8";
:root {
  --min-width: 360px;
  --min-width-calc: 380;
  --max-width: 1280px;
  --max-width-calc: 1280;
  
  --main-color-0: rgba(206, 42, 30, 1.0);
  --main-color-1: rgba(206, 42, 30, 0.9);
  --main-color-2: rgba(206, 42, 30, 0.8);
  --main-color-3: rgba(206, 42, 30, 0.7);
  --main-color-4: rgba(206, 42, 30, 0.6);
  --main-color-5: rgba(206, 42, 30, 0.5);
  --main-color-6: rgba(206, 42, 30, 0.4);
  --main-color-7: rgba(206, 42, 30, 0.3);
  --main-color-8: rgba(206, 42, 30, 0.2);
  --main-color-9: rgba(206, 42, 30, 0.1);
  
  --sub-color-0: rgba(52, 53, 53, 1.0);
  --sub-color-1: rgba(255, 255, 255, 1.0);
  --sub-color-2: rgba(0, 0, 0, 0.9);
  --sub-color-3: rgba(0, 0, 0, 0.8);
  
  --font-size-14: clamp(13px, calc(13px + (14 - 13) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 14px);
  --font-size-15: clamp(14px, calc(14px + (15 - 14) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 15px);
  --font-size-16: clamp(15px, calc(15px + (16 - 15) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 16px);
  --font-size-17: clamp(16px, calc(16px + (17 - 16) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 17px);
  --font-size-17-15: clamp(15px, calc(15px + (17 - 15) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 17px);
  --font-size-18: clamp(16px, calc(16px + (18 - 16) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 18px);
  --font-size-18-14: clamp(14px, calc(14px + (18 - 14) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 18px);
  --font-size-20: clamp(18px, calc(18px + (20 - 18) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 20px);
  --font-size-20-15: clamp(15px, calc(15px + (20 - 15) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 20px);
  --font-size-20-16: clamp(16px, calc(16px + (20 - 16) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 20px);
  --font-size-22: clamp(18px, calc(18px + (22 - 18) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 22px);
  --font-size-24: clamp(19px, calc(19px + (24 - 19) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 24px);
  --font-size-30: clamp(20px, calc(20px + (30 - 20) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 30px);
  --font-size-30-16: clamp(16px, calc(16px + (30 - 16) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 30px);
  --font-size-36: clamp(24px, calc(24px + (36 - 24) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 36px);
  --font-size-40: clamp(25px, calc(25px + (40 - 25) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px);
  --font-size-44: clamp(28px, calc(28px + (44 - 28) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 44px);
  --font-size-18-44: clamp(18px, calc(18px + (44 - 18) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 44px);
  --font-size-45-24: clamp(24px, calc(24px + (45 - 24) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 45px);
  --font-size-50: clamp(20px, calc(20px + (50 - 20) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 50px); 
  --font-size-50-16: clamp(15px, calc(15px + (50 - 15) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 50px); 
  --font-size-40-13: clamp(13px, calc(13px + (40 - 13) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px); 
  --font-size-55: clamp(22px, calc(22px + (55 - 22) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 55px); 
  --font-size-65: clamp(25px, calc(25px + (65 - 25) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 65px); 
  --font-size-30-80: clamp(30px, calc(30px + (80 - 30) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 80px);
  --font-size-80: clamp(40px, calc(40px + (80 - 40) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 80px); 
  
  --symbols-font-size-35: clamp(25px, calc(25px + (35 - 25) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 35px);  
  
  --min-width-30: clamp(15px, calc(15px + (30 - 15) * ((100vw - var(--min-width2)) / (var(--max-width-calc) - var(--min-width2-calc)))), 30px);
  --width-65: clamp(50px, calc(50px + (65 - 50) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 65px);
  --width-90: clamp(70px, calc(70px + (90 - 70) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 90px);
  --width-90-40: clamp(40px, calc(40px + (90 - 40) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 90px);
  --width-100: clamp(60px, calc(60px + (100 - 60) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 100px);
  --width-120: clamp(60px, calc(60px + (120 - 60) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 120px);
  --width-480: clamp(320px, calc(320px + (480 - 320) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 480px);
  --width-720: clamp(200px, calc(200px + (720 - 200) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 720px);
  --width-180: clamp(140px, calc(140px + (180 - 140) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 180px);
  --width-180-80: clamp(80px, calc(80px + (180 - 80) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 180px);
  --width-180-120: clamp(120px, calc(120px + (180 - 120) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 180px);
  --width-180-120: clamp(120px, calc(120px + (180 - 120) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 180px);
  --width-250-120: clamp(120px, calc(120px + (250 - 120) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 250px);
  
  --line-height-30: clamp(25px, calc(25px + (30 - 25) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 30px);
  --line-height-40: clamp(30px, calc(30px + (40 - 30) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px);
  
  --height-15: clamp(6px, calc(6px + (15 - 6) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 15px);
  --height-55: clamp(45px, calc(45px + (55 - 45) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 55px);
  --height-65: clamp(50px, calc(50px + (65 - 50) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 65px);
  --height-66: clamp(-50px, calc(-50px + (-65 - -50) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), -65px);
  --height-74: clamp(29px, calc(29px + (74 - 29) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 74px);
  --height-75: clamp(29px, calc(29px + (75 - 29) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 75px);
  --height-100: clamp(80px, calc(80px + (100 - 80) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 100px);
  --height-100-65: clamp(65px, calc(65px + (100 - 65) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 100px);
  --height-120: clamp(90px, calc(90px + (120 - 90) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 120px);
  --height-200: clamp(100px, calc(100px + (200 - 100) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 200px);
  --height-220: clamp(110px, calc(110px + (220 - 110) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 220px);
  --height-250: clamp(125px, calc(125px + (250 - 125) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 250px);
  --height-400: clamp(200px, calc(200px + (400 - 200) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 400px);
  --height-500: clamp(250px, calc(250px + (500 - 250) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 500px);
  --height-600: clamp(400px, calc(400px + (600 - 400) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 600px);
  --height-650: clamp(400px, calc(400px + (650 - 400) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 650px);
  
  --margin-5: clamp(2px, calc(2px + (5 - 2) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 5px);
  --margin-5-: calc(clamp(2px, calc(2px + (5 - 2) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 5px) * -1);
  --margin-10-4: clamp(4px, calc(4px + (10 - 4) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 10px);
  --margin-10: clamp(5px, calc(5px + (10 - 5) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 10px);
  --margin-15: clamp(8px, calc(8px + (15 - 8) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 15px);
  --margin-20: clamp(10px, calc(10px + (20 - 10) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 20px);
  
  --margin-20-: calc(clamp(6px, calc(6px + (20 - 6) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 20px) * -1);
  --margin-40-: calc(clamp(13px, calc(13px + (40 - 13) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px) * -1);
  --margin-40-21-: calc(clamp(21px, calc(21px + (40 - 21) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px) * -1);
  --margin-200-: calc(clamp(60px, calc(60px + (200 - 60) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 200px) * -1);
  --margin-70-: clamp(-70px, calc(40px + ((-70) - 40) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px);


  --margin-30: clamp(15px, calc(15px + (30 - 15) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 30px);
  --margin-36: clamp(12px, calc(12px + (36 - 12) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 36px);
  --margin-40-0: clamp(0px, calc(0px + (40 - 0) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px);
  --margin-40-10: clamp(10px, calc(10px + (40 - 10) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px);
  --margin-124: clamp(30px, calc(30px + (119 - 30) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 119px);
  --margin-140: clamp(36px, calc(36px + (140 - 36) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 140px);
  --margin-160: clamp(60px, calc(60px + (160 - 60) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 160px);
  --margin-160-60: clamp(60px, calc(60px + (160 - 60) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 160px);

  --margin-25: clamp(0px, calc(0px + (25 - 0) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 25px);
  --margin-40: clamp(20px, calc(20px + (40 - 20) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px);
  --margin-50: clamp(25px, calc(25px + (50 - 25) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 50px);
  --margin-53-24: clamp(24px, calc(24px + (53 - 24) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 53px);
  --margin-55-0: clamp(0px, calc(0px + (55 - 0) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 55px);
  --margin-60: clamp(30px, calc(30px + (60 - 30) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 60px);
  --margin-80: clamp(40px, calc(40px + (80 - 40) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 80px);
  --margin-80-10: clamp(10px, calc(10px + (80 - 10) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 80px);
  --margin-80-50: clamp(50px, calc(50px + (80 - 50) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 80px);
  --margin-120: clamp(60px, calc(60px + (120 - 60) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 120px);
  --margin-200: clamp(100px, calc(100px + (200 - 100) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 200px);
  --margin-300: clamp(150px, calc(150px + (300 - 150) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 300px);
  --margin-300-60: clamp(60px, calc(60px + (300 - 60) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 300px);
  --margin-500: clamp(250px, calc(250px + (500 - 250) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 500px);
  --margin-65-15: clamp(15px, calc(15px + (65 - 15) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 65px);
  --margin-100-29: clamp(29px, calc(29px + (100 - 29) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 100px);
  
  --padding-4: clamp(2px, calc(2px + (4 - 2) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 4px);
  --padding-6: clamp(3px, calc(3px + (6 - 3) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 6px);
  --padding-8: clamp(4px, calc(4px + (8 - 4) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 8px);
  --padding-10: clamp(5px, calc(5px + (10 - 5) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 10px);
  --padding-20: clamp(10px, calc(10px + (20 - 10) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 20px);
  --padding-20-3: clamp(3px, calc(3px + (20 - 3) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 20px);
  --padding-20-15: clamp(15px, calc(15px + (20 - 15) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 20px);
  --padding-30: clamp(15px, calc(15px + (30 - 15) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 30px);
  --padding-40: clamp(20px, calc(20px + (40 - 20) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px);
  --padding-40-10: clamp(10px, calc(10px + (40 - 10) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px);
  --padding-60: clamp(30px, calc(30px + (60 - 30) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 60px);
  --padding-46-11: clamp(11px, calc(11px + (53 - 11) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 46px);
  --padding-80: clamp(40px, calc(40px + (80 - 40) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 80px);  
  --padding-100: clamp(50px, calc(50px + (100 - 50) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 100px);  
  --padding-120: clamp(60px, calc(60px + (120 - 60) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 120px);  
  --padding-240: clamp(120px, calc(120px + (240 - 120) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 240px);  
  --padding-415-275: clamp(275px, calc(275px + (415 - 275) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 415px);  
  --padding-400-240: clamp(240px, calc(240px + (400 - 240) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 400px);  
  --padding-350-200: clamp(200px, calc(200px + (350 - 200) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 350px);  
  
  --gap-10: clamp(5px, calc(5px + (10 - 5) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 10px);
  --gap-20: clamp(10px, calc(10px + (20 - 10) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 20px);
  --gap-40: clamp(20px, calc(20px + (40 - 20) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 40px);
  --gap-60: clamp(30px, calc(30px + (60 - 30) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 60px);
  --gap-80: clamp(40px, calc(40px + (80 - 40) * ((100vw - var(--min-width)) / (var(--max-width-calc) - var(--min-width-calc)))), 80px);
}
html.lenis {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-stopped {
  overflow: hidden;
}
/* 초기화 */
html {overflow-y:scroll}
body {min-width: 360px;margin:0;padding:0;font-size:0.75em;font-family:'Noto Sans KR', sans-serif;background:#fff;color: var(--sub-color-0)}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Noto Sans KR', sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, section {display:block}
nav {display:inline-block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Noto Sans KR', sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Noto Sans KR', sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}
/* 3500ms 지연 스타일 추가 */
body [data-aos][data-aos][data-aos-delay="3500"],
body[data-aos-delay="3500"] [data-aos] {
  transition-delay: 3500ms;
}
/* 레이아웃 크기 지정 */
#hd, #wrapper, #ft {
    width: 100%;
    height: 100%;
}

#hd_pop, #hd_wrapper, #tnb .inner, #container_wr {
    display: flex;
    height: 100%;
    width: 100%;
}
#ft_wr {max-width:1280px}

/* 공통 - display none/block */
.is-hidden { display: none !important; }
.is-visible { display: block !important; }

/* 공통 - 뷰포트 (pc / mobile) 별 display none/block */
.pc-only { display: none; }
@media (min-width: 769px) { .pc-only { display: block !important; }}
.mobile-only { display: block !important; }
@media (min-width: 769px) { .mobile-only { display: none !important; }}

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto;height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops img {max-width:100%}
.hd_pops_con {}
.hd_pops_footer {padding:0;background:#000;color:#fff;text-align:left;position:relative}
.hd_pops_footer:after {display:block;visibility:hidden;clear:both;content:""}
.hd_pops_footer button {padding:10px;border:0;color:#fff}
.hd_pops_footer .hd_pops_reject {background:#000;text-align:left}
.hd_pops_footer .hd_pops_close {background:#393939;position:absolute;top:0;right:0}

/* 상단 레이아웃 */
#hd {
    width: 100%;
    min-width: var(--min-width);
    height: var(--height-120);
    position: fixed;
    transition: 0.4s;
    z-index: 1000;
    background-color: transparent;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
#hd.active {
    height: var(--height-100-65);
  background-color:var(--sub-color-2);
  color: #151515;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}

#tnb {border-bottom:1px solid #383838;margin:0 auto}
#tnb:after {display:block;visibility:hidden;clear:both;content:""}
#tnb .inner {margin:0 auto}

#hd_wrapper {
    max-width: 1280px;
    position: relative;
    margin: 0 auto;
    height: 100%;
    zoom: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#logo, #logo-white {
    float: left;
    padding: 0;
}
#logo img, #logo-white img { 
    width: 100%;
    max-width: var(--width-180-120);
    height: 100%;
}
#logo {
    display: flex;
    align-items: center;
}
#logo .tel {
    display: block;
    background: var(--main-color-0);
    font-size: var(--font-size-20-15);
    color: #ffffff;
    margin-left: var(--margin-40-10);
    padding: var(--padding-6) var(--padding-20);
    border-radius: 10px;
	font-weight: 500;
}
#logo-white { 
    display: none;
}
.active #logo { 
    display: none;
}
.active #logo-white {
    display: flex;
    align-items: center;
}
	
.active #logo-white .tel { 
    display: block;
    background: #ffffff;
    font-size: var(--font-size-20);
    color: var(--main-color-0);
    margin-left: var(--margin-40);
    padding: var(--padding-6) var(--padding-20);
    border-radius: 10px;
	font-weight: 500;
}

.hd_sch_wr {float:left;padding:30px 0;width:445px;margin-left:65px}
#hd_sch h3 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#hd_sch {border-radius:30px;overflow:hidden}
#hd_sch #sch_stx {float:left;width:385px;height:45px;padding-left:10px;border-radius:30px 0 0 30px;background:#2c2c2c;border:0;border-right:0;font-size:1.25em;color:#fff}
#hd_sch #sch_submit {float:left;width:60px;height:45px;border:0;background:#2c2c2c;color:#fff;border-radius:0 30px 30px 0;cursor:pointer;font-size:16px}

#hd_define {float:left}
#hd_define:after {display:block;visibility:hidden;clear:both;content:""}
#hd_define li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px}
#hd_define li:last-child {padding-right:0;margin-right:0;border-right:0}
#hd_define li a {display:inline-block;color:#919191}
#hd_define li.active a {color:#fff}

#hd_qnb {float:right;text-align:right}
#hd_qnb:after {display:block;visibility:hidden;clear:both;content:""}
#hd_qnb li {float:left;font-size:1.083em;line-height:14px;border-right:1px solid #4a4a4a;position:relative;text-align:center;margin:15px 10px 15px 0;padding-right:10px}
#hd_qnb li:last-child {padding-right:0;margin-right:0;border-right:0}
#hd_qnb li span {display:block;margin-top:5px;font-size:0.92em}
#hd_qnb li a {display:inline-block;color:#919191}
#hd_qnb .visit .visit-num {display:inline-block;line-height:16px;padding:0 5px;margin-left:5px;border-radius:10px;background:#da22f5;color:#fff;font-size:10px}


.hd_login {position:absolute;right:0;top:60px}
.hd_login li {float:left;margin:0 5px;border-left:1px solid #616161;padding-left:10px;line-height:13px}
.hd_login li:first-child {border-left:0}
.hd_login a {color:#fff}


/* 메인메뉴 */
#gnb {position:relative;}
#gnb > h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#gnb .gnb_wrap {margin:0 auto;position:relative}
#gnb .gnb_wrap:hover, #gnb .gnb_wrap:focus, #gnb .gnb_wrap:active{z-index:3}
#gnb #gnb_1dul {
    display: flex;
    font-size: var(--font-size-18);
    padding: 0;
    zoom: 1;
    gap: 60px;
}
#gnb .gnb_1dli {float:left;padding:0px;position:relative}
#gnb .gnb_1dli:hover > a {color:var(--main-color-0);
-webkit-transition:background-color 2s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

.gnb_1dli .bg {position:absolute;top:24px;right:8px;display:inline-block;width:10px;height:10px;overflow:hidden;background:url('./images/gnb_bg2.gif') no-repeat 50% 50%;text-indent:-999px}
.gnb_1da {display:block;font-weight:bold;color:#151515;text-decoration:none}
.active .gnb_1da {display:block;font-weight:bold;color:#ffffff;text-decoration:none}
.gnb_1dli.gnb_al_li_plus .gnb_1da{padding-right:25px}
.gnb_2dli:first-child {border:0}
.gnb_2dul {display:none;position:absolute;top:54px;min-width:140px;padding-top:2px}
.gnb_2dul .gnb_2dul_box {border:1px solid #e0e2e5;border-top:0;padding:0;
-webkit-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);
-moz-box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2);
box-shadow:0px 1px 5px rgba(97, 97, 97, 0.2)}
.gnb_2da {display:block;padding:0 10px;line-height:40px;background:#fff;color:#080808;text-align:left;text-decoration:none}
a.gnb_2da:hover {color:var(--main-color-0);background:#f7f7f8;
-moz-transition:all 0.3s ease-out;
-o-transition:all 0.3s ease-out;
transition:all 0.3s ease-out}

.gnb_1dli_air .gnb_2da {}
.gnb_1dli_on .gnb_2da {}
.gnb_2da:focus, .gnb_2da:hover {color:#fff}
.gnb_1dli_over .gnb_2dul {display:block;left:0}
.gnb_1dli_over2 .gnb_2dul {display:block;right:0}
.gnb_wrap .gnb_empty {padding:10px 0;width:100%;text-align:center;line-height:2.7em;color:#080808}
.gnb_wrap .gnb_empty a {color:var(--main-color-0);text-decoration:underline}
.gnb_wrap .gnb_al_ul .gnb_empty, .gnb_wrap .gnb_al_ul .gnb_empty a {color:#555}

#gnb .gnb_menu_btn {
    background: transparent;
    border: 0;
    vertical-align: top;
}
#gnb .gnb_menu_btn span {
    color: #000;
    font-size: 32px;
}
.active #gnb .gnb_menu_btn span {
    color: #fff;
}
.active #gnb .gnb_menu_btn {
    color: #fff;
}
#gnb .gnb_close_btn {background:#fff;color:#b6b9bb;width:50px;height:50px;border:0;vertical-align:top;font-size:18px;position:absolute;top:0;right:0}
#gnb .gnb_mnal {float:right;padding:0}

#gnb_all {
    display: none;
    position: absolute;
    border: 1px solid #c5d6da;
    width: 80%;
    height: 100vh;
    top: 0;
    left: 20%;
    background: #fff;
    z-index: 1000;
    -webkit-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    -moz-box-shadow: 0 2px 5px rgba(0,0,0,0.2);
    box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}
#gnb_all h2 {
    width: 100%;
    height: 65px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 20px 20px;
    align-items: center;
}
#gnb_all ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}
#gnb_all img {
    width: 100%;
	max-width: var(--width-180);
    height: 100%;
}
#gnb_all button {
    border: solid 0;
    background: transparent;
    line-height: 0;
}
#gnb_all button span {
	font-size: 35px;
}
#gnb_all h2 {font-size:1.3em;padding:15px 20px;border-bottom:1px solid #e7eeef}
#gnb_all .gnb_al_ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb_all .gnb_al_ul > li:nth-child(5n+1) {border-left:0}
#gnb_all .gnb_al_li {
    float: left;
    width: 100%;
    padding-left: 35px;
    border-left: 1px solid #e7eeef;
}
#gnb_all .gnb_al_li .gnb_al_a {font-size:1.2em;display:block;position:relative;margin-bottom:10px;font-weight:bold;color:#151515}
#gnb_all .gnb_al_li li {line-height:2em}
#gnb_all .gnb_al_li li a {color:#555}
#gnb_all_bg {display:none;background:rgba(0,0,0,0.4);width:100%;height:100%;position:fixed;left:0;top:0;z-index:999}
 .gnb_1dli {display:block;}
 .gnb_mnal {display:none;}
/* 중간 레이아웃 */
#wrapper {}
#container_wr {margin:0 auto;zoom:1}
#aside {float:right;width:235px;padding:0;height:100%;margin:20px 0 20px 20px}

#container {
    width: 100%;
    position: relative;
    float: left;
    margin: 0;
    font-size: 1em;
    zoom: 1;
}
#container_title {font-size:1.333em;margin:0 auto;font-weight:bold}
#container_title span {margin:0 auto 10px;display:block;line-height:30px}

.lt_wr {width:32%}
.lt_wr:nth-child(3n+1) {clear:both}
.latest_wr {margin-bottom:20px}
.latest_wr:after {display:block;visibility:hidden;clear:both;content:""}
.latest_top_wr {margin:0 -10px 20px}

/* 하단 레이아웃 */
#ft {background:#0a0a0a;margin:0 auto;text-align:center;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
	padding-bottom: 80px;
	}
#ft h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ft_wr {
    margin: 0 auto;
    padding: var(--padding-80) 0 var(--padding-100) 0;
    position: relative;
    display: flex;
    text-align: right;
    justify-content: space-between;
    align-items: center;
}
#ft_wr .ft_cnt {padding:0}
#ft_wr .ft_cnt_dp1 {
    margin-bottom: 20px;
}
#ft_wr .ft_cnt_dp1, #ft_wr .ft_cnt_dp2, #ft_wr .ft_cnt_dp3 {
    display: flex;
    gap: 20px;
}
#ft_wr .ft_cnt_dp4 {
    display: flex;
    gap: 0px;
}
#ft_link {text-align:left}
#ft_link a {
	display:inline-block;
}
#ft_link a:not(:last-child)::after {
    content: "|";
    color: #666666;
	margin-left: 20px;
	display:inline-block;
}
#ft_link a {
    display: inline-block;
    font-size: var(--font-size-16);
    color: #fff;
    line-height: 2em;
    font-weight: 500;
}
#ft_link .ft_cnt_dp4 {
    font-size: var(--font-size-16);
    color: #fff;
    line-height: 2em;
    font-weight: 500;
}
#ft_link a span, #ft_link span {
    display: inline-block;
    font-size: var(--font-size-16);
    color: #999;
    line-height: 2em;
    font-weight: 500;
    padding-left: var(--padding-20);
}
#ft_company h2 {font-size:var(--font-size-24);margin-bottom:var(--margin-20)}
#ft_company p, #ft_company p a {
    font-size: var(--font-size-44);
    font-weight: 800;
	color: #e3e3e3;
}
#ft_company {font-weight:normal;color:#e3e3e3;line-height:2em}
#ft_catch {margin:20px 0 10px}
#ft_copy {
    text-align: center;
    max-width: 1280px;
    margin: 0 auto;
    padding: 40px 0;
    color: #ffffff;
    font-size: var(--font-size-15);
    border-top: 1px solid #383838;
}
#top_btn {
    display: none;
    position: fixed;
    border-radius: 50%;
    bottom: 90px;
    right: 20px;
    width: 50px;
    height: 50px;
    line-height: 46px;
    border: 1px solid var(--main-color-0);
    color: var(--main-color-0);
    text-align: center;
    font-size: 15px;
    z-index: 90;
    background: var(--main-color-8);
}
#top_btn:hover {border-color:var(--main-color-0);background:var(--main-color-0);color:#fff}

/* 게시물 선택복사 선택이동 */
#copymove {}
#copymove .win_desc {text-align:center;display:block}
#copymove .tbl_wrap {margin:20px}
#copymove .win_btn {padding:0 20px 20px}
.copymove_current {float:right;background:#ff3061;padding:5px;color:#fff;border-radius:3px}
.copymove_currentbg {background:#f4f4f4}

/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;width:0;height:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}

/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* ie6 이미지 너비 지정 */
.img_fix {width:100%;height:auto}

/* 캡챠 자동등록(입력)방지 기본 -pc */
#captcha {display:inline-block;position:relative}
#captcha legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
#captcha #captcha_img {height:40px;border:1px solid #898989;vertical-align:top;padding:0;margin:0}
#captcha #captcha_mp3 {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat;text-indent:-999px;border-radius:3px}
#captcha #captcha_reload {margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px;border-radius:3px}
#captcha #captcha_key {margin:0 0 0 3px;padding:0 5px;width:90px;height:40px;border:1px solid #ccc;background:#fff;font-size:1.333em;font-weight:bold;text-align:center;border-radius:3px;vertical-align:top}
#captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}

/* 캡챠 자동등록(입력)방지 기본 - mobile */
#captcha.m_captcha audio {display:block;margin:0 0 5px;width:187px}
#captcha.m_captcha #captcha_img {width:160px;height:60px;border:1px solid #e9e9e9;margin-bottom:3px;margin-top:5px;display:block}
#captcha.m_captcha #captcha_reload {position:static;margin:0;padding:0;width:40px;height:40px;border:0;background:transparent;vertical-align:middle;overflow:hidden;cursor:pointer;background:url('../img/captcha2.png') no-repeat 0 -40px;text-indent:-999px}
#captcha.m_captcha #captcha_reload span {display:none}
#captcha.m_captcha #captcha_key {margin:0;padding:0 5px;width:115px;height:29px;border:1px solid #b8c9c2;background:#f7f7f7;font-size:1.333em;font-weight:bold;text-align:center;line-height:29px;margin-left:3px}
#captcha.m_captcha #captcha_info {display:block;margin:5px 0 0;font-size:0.95em;letter-spacing:-0.1em}
#captcha.m_captcha #captcha_mp3 {width:31px;height:31px;background:url('../img/captcha2.png') no-repeat 0 0 ; vertical-align:top;overflow:hidden;cursor:pointer;text-indent:-9999px;border:none}

/* ckeditor 단축키 */
.cke_sc {margin:0 0 5px;text-align:right}
.btn_cke_sc {display:inline-block;padding:0 10px;height:23px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;line-height:1.9em;vertical-align:middle;cursor:pointer}
.cke_sc_def {margin:0 0 5px;padding:10px;border:1px solid #ccc;background:#f7f7f7;text-align:center}
.cke_sc_def dl {margin:0 0 5px;text-align:left;zoom:1}
.cke_sc_def dl:after {display:block;visibility:hidden;clear:both;content:""}
.cke_sc_def dt, .cke_sc_def dd {float:left;margin:0;padding:5px 0;border-bottom:1px solid #e9e9e9}
.cke_sc_def dt {width:20%;font-weight:bold}
.cke_sc_def dd {width:30%}

/* ckeditor 태그 기본값 */
#bo_v_con ul {display:block;list-style-type:disc;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con ol {display:block;list-style-type:decimal;margin-top:1em;margin-bottom:1em;margin-left:0;margin-right:0;padding-left:40px}
#bo_v_con li {display:list-item}

/* 버튼 */
a.btn,.btn {line-height:35px;height:35px;padding:0 10px;text-align:center;font-weight:bold;border:0;font-size:1.4em;
-webkit-transition:background-color 0.3s ease-out;
-moz-transition:background-color 0.3s ease-out;
-o-transition:background-color 0.3s ease-out;
transition:background-color 0.3s ease-out}

a.btn01 {display:inline-block;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none;vertical-align:middle}
a.btn01:focus, a.btn01:hover {text-decoration:none}
button.btn01 {display:inline-block;margin:0;padding:7px;border:1px solid #ccc;background:#fafafa;color:#000;text-decoration:none}
a.btn02 {display:inline-block;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none;vertical-align:middle}
a.btn02:focus, .btn02:hover {text-decoration:none}
button.btn02 {display:inline-block;margin:0;padding:7px;border:1px solid #3b3c3f;background:#4b545e;color:#fff;text-decoration:none}

.btn_confirm {text-align:right} /* 서식단계 진행 */

.btn_submit {border:0;background:var(--main-color-1);color:#fff;cursor:pointer;border-radius:3px}
.btn_submit:hover {background:rgba(206, 42, 30, 1.0)}
.btn_close {border:1px solid #dcdcdc;cursor:pointer;border-radius:3px;background:#fff}
a.btn_close {text-align:center;line-height:50px}

a.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
button.btn_cancel {display:inline-block;background:#969696;color:#fff;text-decoration:none;vertical-align:middle}
.btn_cancel:hover {background:#aaa}
a.btn_frmline, button.btn_frmline {display:inline-block;width:128px;padding:0 5px;height:40px;border:0;background:#434a54;border-radius:3px;color:#fff;text-decoration:none;vertical-align:top} /* 우편번호검색버튼 등 */
a.btn_frmline {}
button.btn_frmline {font-size:1em}

/* 게시판용 버튼 */
a.btn_b01,.btn_b01 {display:inline-block;color:#bababa;text-decoration:none;vertical-align:middle;border:0;background:transparent}
.btn_b01:hover, .btn_b01:hover {color:#000}
a.btn_b02,.btn_b02 {display:inline-block;background:#253dbe;padding:0 10px;color:#fff;text-decoration:none;border:0;vertical-align:middle}
a.btn_b02:hover, .btn_b02:hover {background:#0025eb}
a.btn_b03, .btn_b03 {display:inline-block;background:#fff;border:1px solid #b9bdd3;color:#646982;text-decoration:none;vertical-align:middle}
a.btn_b03:hover, .btn_b03:hover {background:#ebedf6}
a.btn_b04, .btn_b04 {display:inline-block;background:#fff;border:1px solid #ccc;color:#707070;text-decoration:none;vertical-align:middle}
a.btn_b04:hover, .btn_b04:hover {color:#333;background:#f9f9f9}
a.btn_admin,.btn_admin {display:inline-block;color:#d13f4a;text-decoration:none;vertical-align:middle} /* 관리자 전용 버튼 */
.btn_admin:hover, a.btn_admin:hover {color:#ff3746}


/* 기본테이블 */
.tbl_wrap table {width:100%;border-collapse:collapse;border-spacing:0 5px;background:#fff;border-top:1px solid #ececec;border-bottom:1px solid #ececec} 
.tbl_wrap caption {padding:10px 0;font-weight:bold;text-align:left}
.tbl_head01 {margin:0 0 10px}
.tbl_head01 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head01 thead th {
    padding: 20px 0;
    font-weight: normal;
    text-align: center;
    border-bottom: 1px solid #ececec;
    height: 40px;
    font-size: var(--font-size-15);
}
.tbl_head01 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head01 tfoot th, .tbl_head01 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head01 tbody th {padding:8px 0;border-bottom:1px solid #e8e8e8}
.tbl_head01 td {
    color: #666;
    padding: 10px 5px;
    border-top: 1px solid #ecf0f1;
    border-bottom: 1px solid #ecf0f1;
    line-height: 1.4em;
    font-size: var(--font-size-15);
    height: 60px;
    word-break: break-all;
}
.tbl_head01 tbody tr:hover td {background:#fafafa}
.tbl_head01 a:hover {text-decoration:underline}

.tbl_head02 {margin:0 0 10px}
.tbl_head02 caption {padding:0;font-size:0;line-height:0;overflow:hidden}
.tbl_head02 thead th {padding:5px 0;border-top:1px solid #d1dee2;border-bottom:1px solid #d1dee2;background:#e5ecef;color:#383838;font-size:0.95em;text-align:center;letter-spacing:-0.1em}
.tbl_head02 thead a {color:#383838}
.tbl_head02 thead th input {vertical-align:top} /* middle 로 하면 게시판 읽기에서 목록 사용시 체크박스 라인 깨짐 */
.tbl_head02 tfoot th, .tbl_head02 tfoot td {padding:10px 0;border-top:1px solid #c1d1d5;border-bottom:1px solid #c1d1d5;background:#d7e0e2;text-align:center}
.tbl_head02 tbody th {padding:5px 0;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff}
.tbl_head02 td {padding:5px 3px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:#fff;line-height:1.4em;word-break:break-all}
.tbl_head02 a {}

/* 폼 테이블 */
.tbl_frm01 {margin:0 0 20px}
.tbl_frm01 table {width:100%;border-collapse:collapse;border-spacing:0}
.tbl_frm01 th {width:70px;padding:7px 13px;border:1px solid #e9e9e9;border-left:0;background:#f5f8f9;text-align:left}
.tbl_frm01 td {padding:7px 10px;border-top:1px solid #e9e9e9;border-bottom:1px solid #e9e9e9;background:transparent}
.wr_content textarea,.tbl_frm01 textarea,.form_01 textarea, .frm_input {border:1px solid #d0d3db;background:#fff;color:#000;vertical-align:middle;border-radius:3px;padding:5px;
-webkit-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
-moz-box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow:inset 0 1px 1px rgba(0, 0, 0, .075);
}
.tbl_frm01 textarea {padding:2px 2px 3px}
.frm_input {height:40px}

.full_input {width:100%}
.half_input {width:49.5%}
.twopart_input {width:385px;margin-right:10px}
.tbl_frm01 textarea, .write_div textarea {width:100%;height:100px}
.tbl_frm01 a {text-decoration:none}
.tbl_frm01 .frm_file {display:block;margin-bottom:5px}
.tbl_frm01 .frm_info {display:block;padding:0 0 5px;line-height:1.4em}
.frm_info.add_info { margin-top: 10px !important; padding: 8px 12px; background: #fff; border: 1px solid #ddd; border-radius: 6px; line-height: 1.6; }
.btn_info_toggle { display: block; margin: 5px 0 0 21px; font-size: 12px; color: #3f51b5; background: none; border: none; cursor: pointer; text-decoration: underline; }

/*기본 리스트*/
.list_01 ul {border-top:1px solid #ececec}
.list_01 li {border-bottom:1px solid #ececec;background:#fff;padding:10px 15px;list-style:none;position:relative}
.list_01 li:nth-child(odd) {background:#f6f6f6}
.list_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.list_01 li:hover {background:#f9f9f9}
.list_01 li.empty_li {text-align:center;padding:20px 0;color:#666}

/*폼 리스트*/
.form_01 h2 {font-size:1.167em}
.form_01 li {margin-bottom:10px}
.form_01 ul:after,
.form_01 li:after {display:block;visibility:hidden;clear:both;content:""}
.form_01 .left_input {float:left}
.form_01 .margin_input {margin-right:1%}
.form_01 textarea {height:100px;width:100%}
.form_01 .frm_label {display:inline-block;width:130px}

/* 자료 없는 목록 */
.empty_table {padding:50px 0 !important;text-align:center}
.empty_list {padding:20px 0 !important;color:#666;text-align:center}

/* 필수입력 */
.required, textarea.required {background-image:url('../img/require.png') !important;background-repeat:no-repeat !important;background-position:right top !important}

/* 테이블 항목별 정의 */
.td_board {width:80px;text-align:center}
.td_category {width:80px;text-align:center}
.td_chk {width:30px;text-align:center}
.td_date {width:60px;text-align:center}
.td_datetime {width:110px;text-align:center}
.td_group {width:80px;text-align:center}
.td_mb_id {width:100px;text-align:center}
.td_mng {width:80px;text-align:center}
.td_name {width:100px;text-align:left}
.td_nick {width:100px;text-align:center}
.td_num {width:50px;text-align:center}
.td_numbig {width:80px;text-align:center}
.td_stat {width:60px;text-align:center}

.txt_active {color:#5d910b}
.txt_done {color:#e8180c}
.txt_expired {color:#ccc}
.txt_rdy {color:#8abc2a}

/* 새창 기본 스타일 */
.new_win {position:relative}
.new_win .tbl_wrap {margin:0 20px}
.new_win #win_title {font-size:1.3em;height:50px;line-height:30px;padding:10px 20px;background:#fff;color:#000;-webkit-box-shadow:0 1px 10px rgba(0,0,0,.1);
-moz-box-shadow:0 1px 10px rgba(0,0,0,.1);
box-shadow:0 1px 10px rgba(0,0,0,.1)}
.new_win #win_title .sv {font-size:0.75em;line-height:1.2em}
.new_win .win_ul {margin-bottom:15px;padding:0 20px}
.new_win .win_ul:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_ul li {float:left;background:#fff;text-align:center;padding:0 10px;border:1px solid #d6e9ff;border-radius:30px;margin-left:5px}
.new_win .win_ul li:first-child {margin-left:0}
.new_win .win_ul li a {display:block;padding:8px 0;color:#6794d3}
.new_win .win_ul .selected {background:var(--main-color-0);border-color:var(--main-color-0);position:relative;z-index:5}
.new_win .win_ul .selected a {color:#fff;font-weight:bold}
.new_win .win_desc {position:relative;margin:10px;border-radius:5px;font-size:1em;background:#f2838f;color:#fff;line-height:50px;text-align:left;padding:0 20px}
.new_win .win_desc i {font-size:1.2em;vertical-align:baseline}
.new_win .win_desc:after {content:"";position:absolute;left:0;top:0;width:4px;height:50px;background:#da4453;border-radius:3px 0 0 3px}
.new_win .frm_info {font-size:0.92em;color:#919191}
.new_win .win_total {float:right;display:inline-block;line-height:30px;font-weight:normal;font-size:0.75em;color:var(--main-color-0);background:#f6f6f6;padding:0 10px;border-radius:5px}
.new_win .new_win_con {margin:20px 0;padding:20px}
.new_win .new_win_con:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .new_win_con2 {margin:20px 0}
.new_win .btn_confirm:after {display:block;visibility:hidden;clear:both;content:""}
.new_win .win_btn {text-align:center}
.new_win .cert_btn {margin-bottom:30px;text-align:center}
.new_win .btn_close {padding:0 20px;height:45px;overflow:hidden;cursor:pointer}
.new_win .btn_submit {padding:0 20px;height:45px;font-weight:bold;font-size:1.083em}

/* 검색결과 색상 */
.sch_word {color:#fff;background:#ff005a;padding:2px 5px 3px;line-height:18px;margin:0 2px}

/* 자바스크립트 alert 대안 */
#validation_check {margin:100px auto;width:500px}
#validation_check h1 {margin-bottom:20px;font-size:1.3em}
#validation_check p {margin-bottom:20px;padding:30px 20px;border:1px solid #e9e9e9;background:#fff}

/* 사이드뷰 */
.sv_wrap {position:relative;font-weight:normal}
.sv_wrap .sv {z-index:1000;display:none;margin:5px 0 0;font-size:0.92em;background:#333;
-webkit-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
-moz-box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2);
box-shadow:2px 2px 3px 0px rgba(0,0,0,0.2)}
.sv_wrap .sv:before {content:"";position:absolute;top:-6px;left:15px;width:0;height:0;border-style:solid;border-width:0 6px 6px 6px;border-color:transparent transparent #333 transparent}
.sv_wrap .sv a {display:inline-block;margin:0;padding:0 10px;line-height:30px;width:100px;font-weight:normal;color:#bbb}
.sv_wrap .sv a:hover {background:#000;color:#fff}
.sv_member {color:#333}
.sv_on {display:block !important;position:absolute;top:23px;left:0px;width:auto;height:auto}
.sv_nojs .sv {display:block}

/* 페이징 */
.pg_wrap {clear:both;float:left;display:inline-block}
.pg_wrap:after {display:block;visibility:hidden;clear:both;content:""} 
.pg {text-align:center}
.pg_page, .pg_current {display:inline-block;vertical-align:middle;background:#eee;border:1px solid #eee}
.pg a:focus, .pg a:hover {text-decoration:none}
.pg_page {color:#959595;font-size:1.083em;height:30px;line-height:28px;padding:0 5px;min-width:30px;text-decoration:none;border-radius:3px}
.pg_page:hover {background-color:#fafafa}
.pg_start {text-indent:-999px;overflow:hidden;background:url('../img/btn_first.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_prev {text-indent:-999px;overflow:hidden;background:url('../img/btn_prev.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_end {text-indent:-999px;overflow:hidden;background:url('../img/btn_end.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_next {text-indent:-999px;overflow:hidden;background:url('../img/btn_next.gif') no-repeat 50% 50% #eee;padding:0;border:1px solid #eee}
.pg_start:hover,.pg_prev:hover,.pg_end:hover,.pg_next:hover {background-color:#fafafa}

.pg_current {display:inline-block;background:var(--main-color-0);border:1px solid var(--main-color-0);color:#fff;font-weight:bold;height:30px;line-height:30px;padding:0 10px;min-width:30px;border-radius:3px}

/* cheditor 이슈 */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

/* Mobile화면으로 */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}

.mo-block { display: none; }

/* 메인 hero 시작 */
#main {
    width: 100%;
    height: 850px;
    display: flex;
}
#main .section-area {
    display: flex;
    width: 100%;
}
#main .visual-sec {
    width: 100%;
	height: 100%;
}
#main .visual-sec .txt-box {
    position: absolute;
    box-sizing: border-box;
    width: 100%;
    max-width: calc(1280px + var(--padding-20-15));
    margin-top: -100px;
    z-index: 10;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
#main .visual-sec .txt-box h3 {
	font-size: var(--font-size-50);
    font-weight: 800;
    color: #151515;
	line-height: 1.4;
	word-break: keep-all;
}

#main .visual-sec .txt-box p.description {
    margin-top: var(--margin-20);
    margin-bottom: var(--margin-60);
    word-break: keep-all;
    font-size: var(--font-size-17);
    color: #555555;
    font-weight: 400;
}
#main p.brand-name {
    font-size: var(--font-size-18);
    color: var(--main-color-0);
    font-weight: 600;
    margin-bottom: 10px;
	text-transform: uppercase;
}

#main .cta-button {
    font-size: 18px;
    font-weight: 600;
    color: var(--sub-color-0);
    display: flex;
    align-items: center;
}
#main .arrow {
    background: var(--main-color-0);
    font-size: 16px;
    color: #ffffff;
    border-radius: 50%;
    padding: 5px;
    margin-left: 15px;
}
#main .main-swiper {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#main .swiper-slide {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}
#main .visual-sec .img-box {
  display: block;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
#main .visual-sec img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#main .visual-sec .all-box {
    position: absolute;
    display: inline-flex;
    width: 100%;
    max-width: calc(1280px + var(--padding-20-15));
    height: 50px;
    box-sizing: border-box;
    z-index: 20;
    margin-top: 400px;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
#main .visual-sec .progress-box {
	position: relative;
	width: 170px;
	height: 50px;
	z-index: 11;
}
#main .autoplay-progress {
	position: absolute;
	left: 30px;
	top: 10px;
	z-index: 10;
	width: 100px;
	height: 5px;
	background-color: rgba(0, 0, 0, 0.1);
}

#main .autoplay-progress svg {
	--progress: 0;
	position: absolute;
	left: 0;
	top: 0;
	z-index: 10;
	width: 100%;
/*	height: 100%;*/
	stroke-width: 10px;
	stroke: var(--main-color-0);
	fill: none;
	stroke-dashoffset: calc(100 * (1 - var(--progress)));
	stroke-dasharray: 100;
}
/* stroke-dashoffset은 선의 테두리가 얼마나 이동하는지 결정 progress라는 변수를 사용하여 계산되어진 값이 들어감 100은전체길이 
   stroke-dasharray는 선의 테두리를 구성하는 선 조각의 길이를 설정 전체길이가 100
 */
#main .visual-sec .swiper-pagination {
    display: flex;
    color: var(--sub-color-0);
    font-size: 15px;
    font-weight: 500;
    justify-content: space-between;
    position: static;
    text-align: left;
}
#main .visual-sec .arrow-box {
	position: relative;
	width: 60px;
	height: 50px;
}

#main .visual-sec .swiper-button-next, #main .visual-sec .swiper-button-prev {
    font-size: 18px;
    color: var(--sub-color-0);
}

#main .visual-sec .swiper-button-next::after,
#main .visual-sec .swiper-button-prev::after {
	font-size: 0;
}
/* 메인 hero 끝 */

/* 마케팅 시작 */
#maketing-scroll {
    position: relative;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
    overflow: hidden;
	background: #FAFAFA;
}
#maketing-scroll .section-area {
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#maketing-scroll .text-container {
    font-size: var(--font-size-65);
    font-weight: 700;
}
#maketing-scroll .red {
	color: var(--main-color-0);
    position: relative;
}
#maketing-scroll .line-text {
    position: relative;
}
#maketing-scroll .pin-spacer {
    width: 100% !important;
	height: 5932px !important;
    padding: 0 !important;
}
#maketing-scroll .head {
  display: flex;
  flex-direction: row;
  max-height: 932px !important;
  height: 100% !important;
  justify-content: space-around;
  align-items: flex-start;
}

#maketing-scroll .content-box {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: left;
    width: 100%;
    font-size: 40px;
    text-align: center;
}

#maketing-scroll .images-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
}

#maketing-scroll .heading {
    width: 100%;
    position: relative;
    z-index: 99;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 20px;
}

#maketing-scroll .scroll-img.size-001 {
  width: 100%;
  height: 100%;
  // display: none;
  opacity: 0;
  position: relative;
  object-fit: cover;
}
#maketing-scroll .scroll-img.size-002 {
  width: 100%;
  height: 100%;
  // display: none;
  opacity: 0;
  position: relative;
  object-fit: cover;
  border-radius: 60px;
}
#maketing-scroll .scroll-img.size-003 {
  width: 100%;
  height: 100%;
  // display: none;
  opacity: 0;
  position: relative;
  object-fit: cover;
}
#maketing-scroll .scroll-img.size-004 {
  width: 100%;
  height: 100%;
  // display: none;
  opacity: 0;
  position: relative;
  object-fit: cover;
  border-radius: 60px;
}
#maketing-scroll .scroll-img.size-005 {
  width: 100%;
  height: 100%;
  // display: none;
  opacity: 0;
  position: relative;
  object-fit: cover;
  border-radius: 60px;
}

#maketing-scroll .img1-area {
position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
    justify-content: center;
	align-items: center;
}
#maketing-scroll .img2-area {
position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
    justify-content: center;
	align-items: center;
}
#maketing-scroll .img3-area {
position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
    justify-content: center;
	align-items: center;
}
#maketing-scroll .img4-area {
position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
    justify-content: center;
	align-items: center;
}
#maketing-scroll .img5-area {
position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
    justify-content: center;
	align-items: center;
}


#maketing-scroll .active {
  /*opacity: 1;
  display: block;*/
}

.maketing-scroll-section #heading1 {
    color: #000000;
    font-size: var(--font-size-80);
    font-weight: 700;
}

.maketing-scroll-section #heading2 {
    color: #ffffff;
    font-size: var(--font-size-65);
    font-weight: 700;
    text-align: center;
}
.maketing-scroll-section .heading img {
    width: 100%;
    max-width: 80px;
    height: 100%;
}

.maketing-scroll-section #heading3 {
	color: #ffffff;
    font-size: var(--font-size-65);
    font-weight: 700;
}

.maketing-scroll-section #heading4 {
	color: #ffffff;
    font-size: var(--font-size-65);
    font-weight: 700;
}

.maketing-scroll-section #heading5 {
	color: #ffffff;
    font-size: var(--font-size-65);
    font-weight: 700;
}

.maketing-scroll-section #heading6 {
	color: #ffffff;
    font-size: var(--font-size-65);
    font-weight: 700;
}

.maketing-scroll-section #heading7 {
	color: #ffffff;
    font-size: var(--font-size-65);
    font-weight: 700;
}

.maketing-scroll-section #heading8 {
	color: #ffffff;
    font-size: var(--font-size-65);
    font-weight: 700;
	flex-direction: row;
    gap: 0;
}

.maketing-scroll-section #heading9 {
    color: #ffffff;
    font-size: var(--font-size-65);
    font-weight: 700;
    flex-direction: row;
    gap: 0;
}
/* 특정 클래스에 강조점 추가 */
.maketing-scroll-section #heading1 i.bullet-text {
    position: relative;
    font-style: normal;
}
.maketing-scroll-section #heading1 i.bullet-text::before {
    content: "•";
    position: absolute;
    top: var(--margin-40-21-);
    left: var(--margin-53-24);
    transform: translateX(-50%);
    font-size: var(--font-size-45-24);
    color: var(--main-color-0);
    letter-spacing: 1em;
    opacity: 0;
}

/* 특정 클래스에 강조점 추가 */
.maketing-scroll-section #heading8 i.bullet-text {
    position: relative;
    font-style: normal;
}
.maketing-scroll-section #heading8 i.bullet-text::before {
    content: "•";
    position: absolute;
    top: var(--margin-40-21-);
    left: var(--margin-53-24);
    transform: translateX(-50%);
    font-size: var(--font-size-45-24);
    color: var(--main-color-0);
    letter-spacing: 1em;
    opacity: 0;
}
#maketing-scroll .heading.active i:nth-child(1):before{transition-delay:1.4s;opacity: 1;}
#maketing-scroll .heading.active i:nth-child(2):before{transition-delay:1.6s;opacity: 1;}
#maketing-scroll .heading.active i:nth-child(3):before{transition-delay:1.8s;opacity: 1;}
#maketing-scroll .heading.active i:nth-child(4):before{transition-delay:2.0s;opacity: 1;}
#maketing-scroll .heading.active i:nth-child(5):before{transition-delay:2.2s;opacity: 1;}
#maketing-scroll .heading.active i:nth-child(6):before{transition-delay:2.4s;opacity: 1;}
#maketing-scroll .heading.active i:nth-child(7):before{transition-delay:2.6s;opacity: 1;}
#maketing-scroll .heading.active i:nth-child(8):before{transition-delay:2.8s;opacity: 1;}
#maketing-scroll .heading.active i:nth-child(9):before{transition-delay:3.0s;opacity: 1;}


.maketing-scroll-section #heading1.active .line-text {
    position: relative;
    z-index: 1;
}
.maketing-scroll-section #heading1.active .line-text:before {
    width: 100%;
}
.maketing-scroll-section #heading1 .line-text:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--margin-10-4);
    width: 0;
    height: var(--height-15);
    background: #f3d7d6;
    transition-delay: 2.0s !important;
    transition: all 1s ease;
    z-index: -1;
}
.maketing-scroll-section #heading9.active .line-text {
    position: relative;
    z-index: 1;
}
.maketing-scroll-section #heading9.active .line-text:before {
    width: 100%;
}
.maketing-scroll-section #heading9 .line-text:before {
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--margin-5);
    width: 0;
    height: var(--height-75);
    background: var(--main-color-0);
    transition-delay: 0.5s !important;
    transition: all 1s ease;
    z-index: -1;
}
#mouse_body {
    position: absolute;
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    bottom: 90px;
    width: 100px;
    left: 50%;
    margin-left: -45px;
}
.mouse_body {
    border-style: solid;
    border-width: 1px;
    border-color: var(--sub-color-0);
    border-radius: 32px;
    margin-top: 150px !important;
    height: 43px;
    width: 23px;
    margin: 0 auto;
}

.mouse_wheel {
    border-style: solid;
    border-width: 2px;
    border-color: var(--main-color-0);
    border-radius: 8px;
    background-color: var(--main-color-0);
    position: relative;
    height: 3px;
    width: 3px;
    margin: 0 auto;
    animation: wheel_animation 1.5s linear infinite;
}
#mouse_body h4 {
    position: relative;
    font-size: var(--font-size-14);
    font-weight: 400;
    text-transform: uppercase;
    margin-top: var(--margin-5);
}

/* include use -moz-, -webkit-, or -o- for respective browser type*/
@keyframes wheel_animation { 
  0% {
    opacity: 0;
    top: 2px;
  }
  50% {
    opacity: 1;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 33px;
  }
}
/* 마케팅 끝 */

/* 성과지표 시작 */
#expertise {
    display: flex;
    justify-content: space-between;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
    overflow: hidden;
	background: #FAFAFA;
}

#expertise .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) auto;
    align-items: center;
}
#expertise .expertise-info { width: 47%; }
/* 왼쪽 텍스트 섹션 */
#expertise .brand-name {
    display: inline-block;
    font-size: var(--font-size-16);
    line-height: 1.4;
    font-weight: 400;
    color: var(--sub-color-0);
    text-transform: uppercase;
    border: solid 1px var(--sub-color-0);
    padding: var(--padding-8) var(--padding-20);
}
#expertise .expertise-info h1 {
    font-size: var(--font-size-65);
    font-weight: 700;
    line-height: 1.2;
    margin: 20px 0;
    color: var(--sub-color-0);
}
#expertise .highlight { color: var(--main-color-0); }
#expertise .details {
    display: flex;
    margin-top: var(--margin-80);
    flex-direction: column;
    justify-content: center;
    gap: 20px;
}
#expertise .details p {
    display: flex;
    font-size: var(--font-size-18);
    font-weight: 500;
    line-height: 1.4;
    color: var(--sub-color-0);
    align-items: center;
    gap: 20px;
}
#expertise .details p span:nth-child(2) {
    width: 80px;
    font-weight: 400;
}
#expertise .details p span:nth-child(3) {
    font-weight: 600;
	font-size: var(--font-size-20);
}

/* 오른쪽 폼 섹션 */
#expertise .expertise-form {
    width: 53%;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 0px;
}
#expertise .expertise-form img {
    border-radius: 20px 0px 0px 20px;
}
/* 성과지표 끝 */

/* 효과적인 해결책 시작 */
#effect {
    display: flex;
    justify-content: space-between;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
    overflow: hidden;
}

#effect .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) auto;
    align-items: center;
    flex-direction: column;
}
#effect .header {
    width: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: var(--font-size-55);
    margin-bottom: var(--margin-80);
}
#effect .header .header-left {
    font-weight: 700;
	white-space: nowrap;
}
#effect .header .header-right {
	white-space: nowrap;
}

#effect .divider {
    flex-grow: 1;
    height: 1px;
    background-color: var(--sub-color-0);
    margin: 0 15px 12px;
}

/* Pill-shaped image banner */
#effect .banner {
    width: 100%;
    height: 100%;
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('/img/effect-img-01.jpg');
    background-size: cover;
    background-position: center;
    border-radius: 9999px;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    padding: var(--margin-160);
}

/* Centered text on image */
#effect .main-text {
    text-align: center;
    color: #ffffff;
    font-size: var(--font-size-65);
    line-height: 1.2;
    font-weight: 700;
}

/* Red highlighted text */
#effect .highlight {
    color: var(--main-color-0);
    font-weight: 700;
}
/* 효과적인 해결책 끝 */

/* 광고주와 함게 시작 */
#advertising {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('/img/advertising-section-background.jpg') no-repeat center center / cover;
    color: #fff;
}
#advertising .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-300) 0;
    flex-direction: column;
    align-items: flex-start;
}

/* 텍스트 스타일 */
#advertising .main-title {
    display: flex;
    font-size: var(--font-size-65);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 45px;
    flex-direction: column;
    align-items: flex-start;
}
#advertising .brand-name {
    font-size: var(--font-size-20);
    color: var(--main-color-0);
    font-weight: 600;
    margin-bottom: 20px;
	text-transform: uppercase;
}
#advertising .main-title .white {
	display: flex;
	margin-bottom: 0px;
}
#advertising .main-title .red {
	display: flex;
	margin-bottom: 20px;
}
#advertising .animated-underline {
  position: relative;
  display: inline-block; /* 텍스트 길이에 맞게 설정 */
}

#advertising .animated-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--margin-5-);
    width: 0;
    height: var(--height-74);
    background-color: var(--main-color-0);
    transition: width 1.5s ease-out;
    z-index: -1;
}

/* AOS에 의해 요소가 화면에 나타날 때 실행되는 스타일 */
#advertising .animated-underline.aos-animate::after {
  width: 100%;
  transition-delay: 1.0s; /* 글자가 나타난 후 밑줄이 그어지도록 지연 시간 설정 */
}
#advertising .description {
    display: flex;
    color: #acacac;
    margin-bottom: 40px;
    flex-direction: column;
    align-items: flex-start;
}
#advertising .description .description-txt1 {
	display: flex;
    font-size: var(--font-size-18);
    line-height: 1.4;
	letter-spacing: -0.5px;
    font-weight: 400;
}
#advertising .description .description-txt2 {
    display: flex;
    font-size: var(--font-size-18);
    line-height: 1.4;
	letter-spacing: -0.5px;
    font-weight: 500;
}	
/* 광고주와 함게 끝 */

/* 마케팅 시작 */
#marketing {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
#marketing .section-area {
    display: flex;
    width: 100%;
    /*max-width: 1280px;*/
    padding: var(--margin-120) 0;
    flex-direction: column;
    margin: 0 auto;
}

/* 헤더 스타일 */
#marketing .header {
    width: 100%;
    max-width: 1280px;
    display: flex;
    align-items: center;
    margin-bottom: 50px;
    margin: 0 auto;
}

#marketing .brand-name {
    font-size: var(--font-size-18);
    color: var(--main-color-0);
    font-weight: 500;
    margin-bottom: 10px;
	text-transform: uppercase;
}

#marketing .description {
    color: #333;
    font-size: var(--font-size-18);
    font-weight: 600;
}
/* 메인 콘텐츠 레이아웃 */
#marketing .main-content {
    display: flex;
    gap: 0 60px;
}

#marketing .image-area {
    width: 60%;
}

#marketing .text-area {
    width: 40%;
}

/* 이미지 영역 */
#marketing .main-img-wrapper {
    position: relative;
    border-radius: 20px;
    overflow: hidden;
}

#marketing .main-img {
    width: 100%;
    height: 100%;
    display: block;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

/* 텍스트 영역 */
#marketing .step-label {
    color: var(--main-color-0);
    font-weight: bold;
    font-size: var(--font-size-20);
    display: block;
    margin: 40px 0;
}

#marketing .sub-text {
    font-size: var(--font-size-24);
    color: #666;
    margin: 40px 0;
}

#marketing .main-title {
    font-size: var(--font-size-65);
    font-weight: 800;
    margin-right: 40px;
}
#marketing .text-area .main-title {
    font-size: var(--font-size-44);
    font-weight: 800;
}

/* 슬라이더 컨트롤 */
#marketing .navigation-container {
    display: inline-grid;
    align-items: center;
    gap: 15px;
    position: absolute;
    grid-auto-flow: column;
    left: calc(60% - -30px);
    bottom: 20%;
    z-index: 9;
}

#marketing .custom-prev-marketing, #marketing .custom-next-marketing {
    border: 1px solid #dfdfdf;
    background: white;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.3s;
    position: relative;
    padding: 20px;
    font-size: var(--font-size-30);
    display: flex;
    align-items: center;
    justify-content: center;
    font-variation-settings: 'FILL' 0, 'wght' 200, 'GRAD' -25, 'opsz' 24;
}

#marketing .custom-prev-marketing:hover, #marketing .custom-next-marketing:hover {
    background: #f8f8f8;
}

#marketing .swiper-pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 10px;
}

#marketing .bar {
    width: 30px;
    height: 4px;
    background: #e74c3c;
    border-radius: 2px;
}

#marketing .dot {
    width: 6px;
    height: 6px;
    background: #ddd;
    border-radius: 50%;
}

#marketing .toggle-autoplay {
    border: none;
    background: none;
    font-weight: bold;
    cursor: pointer;
    color: #333;
    line-height: 0;
}
#marketing .swiper-container-marketing {
    width: 100%;
    overflow: hidden;
    position: relative;
}
#marketing .swiper-pagination-bullet-active {
	width: 30px !important;
    background: var(--main-color-0) !important;
    border-radius: 10px !important;
}
#marketing .material-symbols-sharp {
    font-size: var(--font-size-30) !important;
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' -25, 'opsz' 24;
}


#marketing .navbar {
    display: flex;
    justify-content: space-between;
    padding: 40px 0;
    align-items: center;
    max-width: 1280px;
    margin: 0 auto;
}

#marketing .tab-menu {
    display: flex;
    gap: 10px;
}

#marketing .nav-item {
    text-decoration: none;
    padding: var(--padding-10) var(--padding-20);
    border-radius: 25px;
    color: #151515;
    background: #efefef;
    font-size: var(--font-size-17);
    transition: 0.3s;
    cursor: pointer;
}

#marketing .nav-item.active {
    background: var(--main-color-0);
    color: white;
}

#marketing .download-btn {
    display: flex;
    background: var(--main-color-0);
    color: white;
    border: none;
    padding: var(--padding-10) var(--padding-20);
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    font-size: var(--font-size-17);
    font-variation-settings: 'FILL' 1, 'wght' 300, 'GRAD' -25, 'opsz' 24;
    align-items: center;
}

/* Grid Layout */
#marketing .container {
    padding: 0;
}

#marketing .grid {
}

#marketing .card {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

#marketing .image-box {
    width: 100%;
    background: #eee;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
}
#marketing .swiper-slide.active .image-box {
    width: 100%;
    background: #eee;
    border-radius: 15px;
    overflow: hidden;
    margin-bottom: 15px;
}

#marketing .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Typography */
#marketing .card h3 {
    font-size: var(--font-size-24);
    font-weight: 400;
    color: #ccc; /* Unfocused text color */
    margin: 10px 0;
}

#marketing .swiper-slide.active h3 {
    color: var(--sub-color-0);
    font-size: var(--font-size-30);
    font-weight: 600;
}

#marketing .swiper-slide p {
    display: none;
}
#marketing .swiper-slide.active p {
    display: block;
    color: var(--text-muted);
    font-size: var(--font-size-16);
    line-height: 1.6;
}

#marketing .text-content {
    height: 115px;
}
#marketing .swiper-slide.active {
    width:380px !important;
	transition: 0.4s;
}
#marketing .swiper-slide {
	height: 505px;
    /* 부드러운 변화를 위해 모든 슬라이드에 추가 */
        transition: transform 1.5s ease 0s;
}
#marketing .swiper-wrapper {
    align-items: flex-end;
}
/* 마케팅 끝 */

/* 클라이언트 시작 */
#clients {
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('/img/clients-section-background.jpg') no-repeat center center / cover;
    color: #fff;
	flex-direction: column;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
#clients .section-area {
    margin: var(--margin-120) 0 var(--margin-200);
}

#clients .section-area.full {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 0 auto var(--margin-120);
	flex-direction: column;
}

#clients .subtitle {
    font-size: var(--font-size-20);
    color: var(--main-color-0);
    font-weight: 600;
    margin-bottom: 10px;
	text-transform: uppercase;
}
/* 텍스트 스타일 */
#clients .main-title {
    display: flex;
    font-size: var(--font-size-65);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -1.2px;
    margin-bottom: 30px;
    flex-direction: column;
    align-items: center;
}
#clients .main-title .white {
	display: flex;
	margin-bottom: 0px;
}


/* 카드 레이아웃 */
#clients .card-container {
    display: flex;
    gap: 30px;
}

#clients .card {
    flex: 1;
    position: relative;
}
#clients .swiper-container-clients {position: relative; margin: 30px 0px; overflow: hidden;}
#clients .swiper-container-clients .swiper-wrapper {transition-timing-function: linear !important; position: relative;}
#clients .swiper-container-clients img {width: 100%;height: 100%;}
#clients .swiper-slide {
    background: #fff;
    padding: 15px 30px;
    border-radius: 10px;
}
/* 클라이언트 끝 */

/* 레퍼런스 시작 */
#reference {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
	overflow-x: hidden;
}
#reference .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    padding: var(--margin-120) 0;
    margin: 0 auto;
    flex-direction: column;
}

/* 헤더 스타일 */
#reference .header {
    display: flex;
    align-items: center;
    margin-bottom: 50px;
}

#reference .main-title {
    font-size: var(--font-size-65);
    font-weight: 800;
    margin-right: 40px;
}

#reference .brand-name {
    font-size: var(--font-size-18);
    color: var(--main-color-0);
    font-weight: 500;
    margin-bottom: 10px;
	text-transform: uppercase;
}

#reference .description {
    color: #333;
    font-size: var(--font-size-18);
    font-weight: 600;
}
/* 카드 그리드 레이아웃 */
#reference .card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
	overflow: initial;
}

#reference .card {
    display: flex;
    flex-direction: column;	
}
#reference .card.margin-top {
    margin-top: var(--margin-40-0);
}

/* 카드 배경 및 이미지 영역 */
#reference .card-bg {
    height: 430px;
    border-radius: 15px;
    position: relative;
    background-size: cover;
    background-position: center;
    color: white;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 30px 20px;
	transition: background-image 0.3s ease-in-out;
}

#reference .active .card-bg {
    background: url('/img/reference-img-active.png') no-repeat center center / cover !important;
	transition: background-image 0.3s ease-in-out;
}

#reference .card-bg.img-01 {
    background: url('/img/reference-img-01.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-02 {
    background: url('/img/reference-img-02.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-03 {
    background: url('/img/reference-img-03.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-04 {
    background: url('/img/reference-img-04.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-05 {
    background: url('/img/reference-img-05.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-06 {
    background: url('/img/reference-img-06.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-07 {
    background: url('/img/reference-img-07.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-08 {
    background: url('/img/reference-img-08.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-09 {
    background: url('/img/reference-img-09.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-10 {
    background: url('/img/reference-img-10.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-11 {
    background: url('/img/reference-img-11.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-12 {
    background: url('/img/reference-img-12.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-13 {
    background: url('/img/reference-img-13.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-14 {
    background: url('/img/reference-img-14.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.img-15 {
    background: url('/img/reference-img-15.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}
#reference .card-bg.active {
    background: url('/img/reference-img-active.png') no-repeat center center / cover;
	transition: background-image 0.3s ease-in-out;
}

/* 어두운 그라데이션 오버레이 */
#reference .card-bg::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2), rgba(0,0,0,0.7));
    z-index: 1;
}

#reference .category-tag {
    position: relative;
    z-index: 2;
    font-size: var(--font-size-16);
    opacity: 0.8;
	transition: all 0.3s ease-in-out;
}

#reference .active .category-tag {
    font-size: var(--font-size-40);
    font-weight: 800;
    opacity: 1.0;
	transition: all 0.3s ease-in-out;
}
#reference .card-content {
    position: relative;
    z-index: 2;
}

#reference .card-content p {
    font-size: var(--font-size-18);
    line-height: 1.4;
    font-weight: 400;
    opacity: 0.8;
	transition: all 0.3s ease-in-out;
}
#reference .active .card-content p {
    font-weight: 500;
    opacity: 1.0;
	transition: all 0.3s ease-in-out;
}

/* 건기식 빨간색 배경 특수 처리 */
#reference .red-bg {
    /*background-color: #e74c3c !important;
    background-image: none !important;*/
}

/* 하단 태그 그룹 */
#reference .tag-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 15px;
}

#reference .tag-group span {
    background-color: #ededed;
    color: var(--sub-color-0);
    font-size: var(--font-size-14);
    padding: 6px 4px;
    text-align: center;
    border-radius: 8px;
}

/* 마우스 호버 효과 */
#reference .card .card-bg {
    transform: translateY(0px);
	transition: all 0.3s ease-in-out;
}
#reference .card:hover .card-bg {
    transform: translateY(-5px);
	transition: all 0.3s ease-in-out;
}
/* 부드러운 움직임 (Ease-in-out) */
#reference .swiper-wrapper {
    transition-timing-function: linear !important;
}
/* 레퍼런스 끝 */

/* 매출성장 시작 */
#sales {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('/img/sales-section-background.jpg') no-repeat center center / cover;
    color: #fff;
}
#sales .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) 0 var(--margin-500);
    flex-direction: column;
    align-items: center;
}

/* 텍스트 스타일 */
#sales .main-title {
    display: flex;
    font-size: var(--font-size-65);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 45px;
    flex-direction: column;
    align-items: center;
}
#sales .brand-name {
    font-size: var(--font-size-20);
    color: var(--main-color-0);
    font-weight: 600;
    margin-bottom: 20px;
	text-transform: uppercase;
}
/* 매출성장 끝 */

/* 매출로 보여드리겠습니다 시작 */
#revenue {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('/img/revenue-section-background.jpg') no-repeat center center / cover;
    color: #fff;
}
#revenue .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) 0 var(--margin-500);
    flex-direction: column;
    align-items: center;
}

/* 텍스트 스타일 */
#revenue .main-title {
    display: flex;
    font-size: var(--font-size-65);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 45px;
    flex-direction: column;
    align-items: center;
}
#revenue .brand-name {
    font-size: var(--font-size-20);
    color: var(--main-color-0);
    font-weight: 600;
    margin-bottom: 20px;
	text-transform: uppercase;
}
#revenue .main-title .white {
	display: flex;
	margin-bottom: 0px;
}
#revenue .main-title .red {
	display: flex;
	margin-bottom: 20px;
}
#revenue .animated-underline {
  position: relative;
  display: inline-block; /* 텍스트 길이에 맞게 설정 */
}

#revenue .animated-underline::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: var(--margin-5-);
    width: 0;
    height: var(--height-74);
    background-color: var(--main-color-0);
    transition: width 1.5s ease-out;
    z-index: -1;
}

/* AOS에 의해 요소가 화면에 나타날 때 실행되는 스타일 */
#revenue .animated-underline.aos-animate::after {
  width: 100%;
  transition-delay: 2.0s; /* 글자가 나타난 후 밑줄이 그어지도록 지연 시간 설정 */
}
/* 매출로 보여드리겠습니다 끝 */

/* 성과데이터 시작 */
#result {
    display: flex;
    background: url('/img/result-section-background.jpg') no-repeat center center / cover;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
#result .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) auto;
	flex-direction: column;
}

#result header h1 {
    font-size: var(--font-size-65);
	color: #ffffff;
    padding-bottom: 10px;
}

#result .subtitle {
    font-size: var(--font-size-18);
    color: var(--main-color-0);
    font-weight: 400;
    margin-bottom: 10px;
	text-transform: uppercase;
}

#result .description {
    margin-top: 5px;
    font-size: var(--font-size-20-16);
    font-weight: 500;
    color: #ffffff;
}

#result .content {
    margin-top: var(--margin-60);
}

#result .metrics {
    padding: 10px 10px 10px 20px;
    display: inline-block;
    border-radius: 5px;
    border: 2px dashed white;
}
#result .metrics p {
    font-size: var(--font-size-24);
    font-weight: 600;
    color: #ffffff;
}

#result .performance {
  display: flex;
  align-items: center;
  color: var(--main-color-0);
  line-height: 0;
  
  /* 빠른 LED 깜빡임 */
  animation: led-blink 1.0s step-start infinite;
}

@keyframes led-blink {
  50% {
    visibility: hidden;
  }
}

#result .percentage {
    font-size: var(--font-size-18-44);
    font-weight: 800;
}

#result .arrow {
    font-size: var(--font-size-30-80);
    font-weight: 900;
    margin-left: 5px;
    line-height: 0.7;
}

#result .comparison {
    display: flex;
    justify-content: space-between;
    margin-top: var(--margin-200-);
    position: relative;
    align-items: flex-end;
}
#result .competitor, .nanomarketing {
    width: 45%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#result .competitor h2 {
    background-color: #f6c6c2; /* 연한 핑크색 배경 */
    border-radius: var(--margin-15); /* 둥근 모서리 */
    padding: var(--padding-10) var(--padding-40); /* 내부 여백 */
    display: inline-block; /* 내용물 크기에 맞게 너비 조절 */
    position: relative; /* 가상 요소를 위한 위치 기준 설정 */
    font-size: var(--font-size-20);
    font-weight: 400;
    color: #000;
}
/* 말풍선 꼬리 부분 스타일 */
#result .competitor h2::after {
    content: '';
    position: absolute;
    bottom: -10px; /* 꼬리 위치 조절 */
    left: 50%; /* 가운데 정렬 */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid #f6c6c2; /* 꼬리 색상 및 크기 */
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

#result .nanomarketing h2 {
    background-color: var(--main-color-0); /* 연한 핑크색 배경 */
    border-radius: var(--margin-15); /* 둥근 모서리 */
    padding: var(--padding-10) var(--padding-40); /* 내부 여백 */
    display: inline-block; /* 내용물 크기에 맞게 너비 조절 */
    position: relative; /* 가상 요소를 위한 위치 기준 설정 */
    font-size: var(--font-size-30);
    font-weight: 700;
    color: #fff;
}
/* 말풍선 꼬리 부분 스타일 */
#result .nanomarketing h2::after {
    content: '';
    position: absolute;
    bottom: -10px; /* 꼬리 위치 조절 */
    left: 50%; /* 가운데 정렬 */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-top: 10px solid var(--main-color-0); /* 꼬리 색상 및 크기 */
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}
#result .chart {
    width: 100%;
    display: flex;
    align-items: flex-end;
    margin-top: 10px;
}
#result .bar-ad, .bar-sales {
    width: 50%;
    height: 100%;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 5px;
    color: #000;
    font-weight: bold;
}

#result .bar-ad {
    height: 50%; /* 150만원 */
}
#result .money-150 {
    position: absolute;
    font-size: var(--font-size-18-14);
    font-weight: 400;
    color: #fff;
}
#result .money-550 {
    position: absolute;
    font-size: var(--font-size-30-16);
    font-weight: 800;
    color: #fff;
}

#result .bar-sales {    
}

#result .competitor .bar-sales {
    height: 83.33%; /* 250만원 / 300만원 (arbitrary max height) */
}

#result .nanomarketing .bar-sales {
    height: 100%; /* 550만원 */
}

#result .labels {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: 5px;
    font-size: var(--font-size-20-16);
    font-weight: 500;
    color: #fff;
}

#result .cylinder {
    background: linear-gradient(90deg,  rgba(172, 20, 23, 1.0) -5%, rgba(254, 118, 118, 1.0) 10%, rgba(202, 33, 33, 1.0) 50%, rgba(172, 20, 23, 1.0) 73%, rgba(172, 20, 23, 1.0) 100%, rgba(254, 118, 118, 1.0) 100%);
    border-radius: 50% / var(--margin-20);
    box-shadow: 1px 5px 20px rgba(255, 0, 0, 0.5);
    position: relative;
}

/* 원기둥의 윗부분과 아랫부분을 더 명확하게 표현하기 위한 가상 요소 */
#result .cylinder::before {
    content: "";
    position: absolute;
    width: 100%;
    height: var(--margin-40);
    background: radial-gradient(circle, rgba(172, 20, 23, 1.0), rgb(172 20 23 / 64%));
    border-radius: 50%;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
    border: solid 1px rgba(255, 255, 255, 1.0);
	border-top: none;
}
/* 아래쪽 비치는 그림자(반사) 효과 */
#result .cylinder::after {
  content: "";
  position: absolute;
  top: 60%; /* 본체 바로 아래 배치 */
  left: 0;
  width: 100%;
  height: 40%; /* 반사 영역 높이 */
  background: inherit; /* 본체 배경색 상속 */
  transform: scaleY(-1); /* 상하 반전 */
  opacity: 0.3; /* 투명도 조절 */
  filter: blur(4px); /* 흐림 처리 */
  /* 아래로 갈수록 사라지는 마스크 효과 */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
}

#result .cylinder::before {
    top: var(--margin-20);
    left: 0;
    transform: translateY(-50%); /* 윗면을 살짝 위로 이동 */
}

#result .cylinder::after {
    bottom: var(--margin-20);
    left: 0;
    transform: translateY(50%); /* 아랫면을 살짝 아래로 이동 */
    background-color: rgba(0, 0, 0, 0.1); /* 아랫면 그림자 */
}
#result .cylinder.height-01 {
    width: var(--margin-160-60);
    height: var(--height-200);
	background: linear-gradient(90deg, #f7989a -5%, #f7989a 10%, #fe7676 50%, #fe7676 73%, #fe7676 100%, #f7989a 100%);
}
#result .cylinder.height-01::before {
    background: radial-gradient(circle, #cb4447a3 0%, #eb7274 100%);
}
#result .cylinder.height-02 {
    width: var(--margin-160-60);
    height: var(--height-250);
	background: linear-gradient(90deg, #f7989a -5%, #f7989a 10%, #fe7676 50%, #fe7676 73%, #fe7676 100%, #f7989a 100%);
}
#result .cylinder.height-02::before {
    background: radial-gradient(circle, #cb4447a3 0%, #eb7274 100%);
}
#result .cylinder.height-03 {
    width: var(--margin-160-60);
    height: var(--height-220);
}
#result .cylinder.height-04 {
    width: var(--margin-160-60);
    height: var(--height-500);
}

#result .gain {
    position: absolute;
    top: var(--margin-70-);
    right: 0;
    transform: translateX(-50%);
    padding: 0;
    border-radius: 50%;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}
#result .two-bae {
    position: absolute;
    background: #ffffff;
    font-size: var(--font-size-40-13);
    border-radius: 50%;
    padding: var(--padding-46-11) var(--padding-20-3);
    font-weight: 900;
    color: var(--main-color-0);
    top: var(--margin-140);
    right: var(--margin-124);
    animation: led-blink4 1.5s step-start infinite;
}
#result .two-bae2 {
    position: absolute;
    font-size: var(--font-size-50-16);
    font-weight: 800;
    color: #ffffff;
    top: var(--margin-65-15);
    right: var(--margin-100-29);
    animation: led-blink4 1.5s step-start infinite;
}

@keyframes led-blink4 {
  50% {
    visibility: hidden;
  }

} 
#result .arrow-container {
    position: relative;
    display: flex;
    width: var(--width-720);
    justify-content: center;
    align-items: flex-start;
}

/* 곡선 화살표 몸체와 머리 */
#result .count-arrow {
position: absolute;
    width: var(--width-720);
background: linear-gradient(60deg, rgba(74, 16, 16, 0.0) 0%, rgba(74, 16, 16, 0.0) 15%, rgba(206, 42, 30, 1.0) 75%, rgba(206, 42, 30, 1.0) 100%);
clip-path: path('M 60 240 C 183.6 303.6 352.8 297.6 457.2 136.8 L 393.6 117.6 L 578.4 6 L 656.4 192 L 618 180 C 540 370.8 268.8 411.6 60 240 Z');

}

#result .count-arrow {
  width: 100%; /* 부모 너비에 맞춤 */
  aspect-ratio: 16 / 9; /* 원본 비율 유지 */
  
  background: linear-gradient(60deg, 
    rgba(74, 16, 16, 0.0) 0%, 
    rgba(74, 16, 16, 0.0) 15%, 
    rgba(206, 42, 30, 1.0) 75%, 
    rgba(206, 42, 30, 1.0) 100%
  );
  
  /* SVG에 정의된 ID 참조 */
  clip-path: url(#myPath);
  -webkit-clip-path: url(#myPath);
}

#result .count-arrow1 {
    position: absolute;
    width: var(--width-720);
    top: var(--margin-20-);
    left: var(--margin-30);
    background: linear-gradient(25deg, rgba(74, 16, 16, 0.0) 60%, rgba(206, 42, 30, 0.2) 100%);
    /* background: blue; */
    clip-path: polygon(81% 1%, 55% 32%, 91% 52%);
    z-index: -1;
    animation: led-blink2 1.0s step-start infinite;
}

@keyframes led-blink2 {
  50% {
    visibility: hidden;
  }
}  
#result .count-arrow1 {
  width: 100%; /* 부모 요소의 너비에 맞춤 */
  
  /* 1. 반응형의 핵심: 가로세로 비율 고정 */
  aspect-ratio: 16 / 9; /* 원본 비율 유지 */
  
  /* 3. 클립 패스 적용 (제시한 코드) */
  clip-path: polygon(81% 1%, 55% 32%, 91% 52%);
  
  /* 브라우저 호환성용 */
  -webkit-clip-path: polygon(81% 1%, 55% 32%, 91% 52%);
  
  transition: all 0.3s ease; /* 크기 변할 때 부드럽게 */
}
#result .count-arrow2 {
    position: absolute;
    width: var(--width-720);
    top: var(--margin-40-);
    left: var(--margin-36);
    background: linear-gradient(25deg, rgba(74, 16, 16, 0.0) 60%, rgba(206, 42, 30, 0.2) 100%);
    /* background: blue; */
    clip-path: polygon(81% 1%, 55% 32%, 91% 52%);
    z-index: -2;
    animation: led-blink3 1.5s step-start infinite;
}

@keyframes led-blink3 {
  50% {
    visibility: hidden;
  }

}  

#result .count-arrow2 {
  width: 100%; /* 부모 요소의 너비에 맞춤 */
  
  /* 1. 반응형의 핵심: 가로세로 비율 고정 */
  aspect-ratio: 16 / 9; /* 원본 비율 유지 */
  
  /* 3. 클립 패스 적용 (제시한 코드) */
  clip-path: polygon(81% 1%, 55% 32%, 91% 52%);
  
  /* 브라우저 호환성용 */
  -webkit-clip-path: polygon(81% 1%, 55% 32%, 91% 52%);
  
  transition: all 0.3s ease; /* 크기 변할 때 부드럽게 */
}
/* 성과데이터 끝 */

/* 협력광고 시작 */
#nano-great {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
    position: relative;
    overflow: hidden;
    background: url('/img/nano-great-section-background.png') no-repeat center center / cover;
}
#nano-great .section-area {
    position: relative;
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) auto;    
	gap: var(--gap-60);
    flex-direction: column;
    align-items: center;
}
#nano-great .section-area.full {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 0 auto var(--margin-120);
	flex-direction: column;
}

#nano-great .header {
    display: flex;
    align-items: center;
    margin-bottom: var(--margin-50);
}

#nano-great .main-title {
    font-size: var(--font-size-65);
    font-weight: 800;
	text-align: center;
}

#nano-great .nano-great-info {
    display: flex;
	flex-direction: column;
    align-items: center;
}
#nano-great .brand-name {
    font-size: var(--font-size-18);
    color: var(--main-color-0);
    font-weight: 500;
    margin-bottom: 10px;
	text-transform: uppercase;
}

        /* 메인 컨테이너 */
#nano-great .nano-great-wrapper {
	position: relative;
            width: 100%;
            height: var(--width-480);
            margin: 0 auto;
        }

        /* 배경 SVG 연결선 레이어 */
#nano-great .connections-svg {
            position: absolute;
            top: var(--margin-55-0);
            left: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        /* 연결선 흐름 효과 */
#nano-great .connect-line {
    fill: none;
    stroke: var(--main-color-0); 
    stroke-width: 1;    
    
    /* 점선 패턴: 실선 6, 공백 3 (총 패턴 길이 = 9) */
    stroke-dasharray: 6, 3;    

    animation: flowWave 2s linear infinite 2s;
    
    /* 성능 최적화: 브라우저에 애니메이션 변화를 미리 알려 GPU 가속 유도 */
    will-change: stroke-dashoffset, stroke-opacity;
}

@keyframes flowWave {
    from {
        stroke-dashoffset: 0;
    }
    to {
        /* 패턴 길이(9)의 배수인 -18로 설정하여 끊김 없이 부드럽게 루프되도록 처리 */
        stroke-dashoffset: -18; 
    }
}

        /* 중앙 Meta 아이콘 */
#nano-great .center-shield {
            position: absolute;
            top: 50%; 
            left: 50%;
            width: var(--width-250-120);
            height: auto;
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 10;                
			transform: translate(-50%, -50%);
            animation: shieldPulse 3s ease-in-out infinite 0.9s;
        }

        @keyframes shieldPulse {
            0%, 100% { transform: translate(-50%, -50%) scale(1); }
            50% { transform: translate(-50%, -50%) scale(1.04); }
        }
#nano-great .center-shield img {
    width: 100%;
    height: auto;
}

        /* 일반 플랫폼 노드 기본 스타일 (105px x 105px) */
#nano-great .node {
            position: absolute;
            width: var(--width-120);
            height: auto;
            z-index: 5;
            transform: translate(-50%, -50%);
            animation: waveMotion 4.5s ease-in-out infinite;
        }
#nano-great .node.n-oliveyoung,
#nano-great .node.n-musinsa,
#nano-great .node.n-naver {
            width: var(--width-180-80);
            animation: waveMotionPremium 5s ease-in-out infinite;
        }
#nano-great .node img {
            width: 100%;
            height: auto;
        }

        /* 부각되어야 할 주요 핵심 노드 기본 스타일 (115px x 115px) */
#nano-great .node.premium {
            width: 115px;
            height: 115px;
            z-index: 6;
        }

        /* 프리미엄 노드 전용 컨텐츠 스타일 */
#nano-great .node.premium .node-content {
            border-radius: 26px;
            animation: waveMotionPremium 5s ease-in-out infinite;
        }

        /* 브랜드별 프리미엄 노드 테두리 & 시그니처 컬러 그림자 */
#nano-great .n-oliveyoung .node-content {
            border: 2px solid #89b33e;
            box-shadow: 0 12px 28px rgba(137, 179, 62, 0.15);
        }
#nano-great .n-musinsa .node-content {
            border: 2px solid #000000;
            box-shadow: 0 12px 28px rgba(0, 0, 0, 0.12);
        }
#nano-great .n-naver .node-content {
            border: 2px solid #03cf5d;
            box-shadow: 0 12px 28px rgba(3, 207, 93, 0.15);
        }


        /* 기본 둥둥 애니메이션 */
        @keyframes waveMotion {
            0%, 100% { transform: translateY(0px) rotate(0deg); }
            25% { transform: translateY(-5px) translateX(1px) rotate(0.8deg); }
            50% { transform: translateY(1px) translateX(-1px) rotate(-0.8deg); }
            75% { transform: translateY(-3px) translateX(0.5px) rotate(0.4deg); }
        }

        /* 프리미엄용 둥둥 애니메이션 */
        @keyframes waveMotionPremium {
            0%, 100% { transform: translateY(0px) scale(1); }
            50% { transform: translateY(-7px) scale(1.02); }
        }

        @keyframes fadeIn {
            to { opacity: 1; }
        }
#nano-great .svg-area {
    display: flex;
    width: 100%;
    height: 100%;
}
        
        /* 왼쪽 라인 */
#nano-great .n-11st       { top: var(--padding-100); left: 5%;}

#nano-great .n-29cm       { top: var(--padding-240); left: 10%;}

#nano-great .n-wconcept   { top: var(--padding-350-200); left: 20%;}

#nano-great .n-oliveyoung { top: 10px; left: 20%;}

#nano-great .n-musinsa    { top: 0px; left: calc(50% - var(--width-90-40));}

#nano-great .n-naver      { top: 10px; right: 20%;}

#nano-great .n-todayhouse { top: var(--padding-400-240); left: 32%;}

#nano-great .n-whae       { top: var(--padding-415-275); left: calc(50% - var(--margin-60));}

#nano-great .n-cj         { top: var(--padding-400-240); right: 32%;}

#nano-great .n-flo        { top: var(--padding-350-200); right: 20%;}

#nano-great .n-gmarket    { top: var(--padding-240); right: 10%;}

#nano-great .n-ssg        { top: var(--padding-100); right: 5%;}
/* 협력광고 끝 */

/* 대행사 선택 시작 */
#agency {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
    position: relative;
    overflow: hidden;
	background: #FAFAFA;
}
#agency .section-area {
    position: relative;
    display: flex;
    width: 100%;
    /* max-width: 1280px; */
    margin: var(--margin-200) auto;
    flex-direction: column;
    align-items: center;
}
#agency .section-area.full {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 0 auto var(--margin-120);
	flex-direction: column;
}

/* 헤더 스타일 */
#agency .header {
    display: flex;
    align-items: center;
    margin-bottom: var(--margin-50);
}

#agency .main-title {
    font-size: var(--font-size-65);
    font-weight: 800;
    margin-right: 40px;
}

#agency .brand-name {
    font-size: var(--font-size-18);
    color: var(--main-color-0);
    font-weight: 500;
    margin-bottom: 10px;
	text-transform: uppercase;
}

#agency .description {
    color: #333;
    font-size: var(--font-size-18);
    font-weight: 600;
    line-height: 1.6;
    margin-top: 40px;
    margin-bottom: 40px;
}

#agency .hero-section {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    background-color: #fff;
    overflow: hidden;
}
#agency .vertical-line {
    display: block;
    width: 1px;
    height: 69px;
    background-color: #555;
    border: none;
}

/* Central Content Styling */
#agency .main-content {
    text-align: center;
    width: 100%;
    z-index: 10;
}

#agency .sub-heading {
    color: #e63e00; /* Primary brand color */
    font-size: 1.1rem;
}

#agency .logo-container img {
    width: 280px;
    margin-bottom: 50px;
    margin-top: 40px;
}

#agency .cta-button {
    background-color: var(--main-color-0);
    color: #fff;
    padding: var(--padding-20) var(--padding-40);
    border-radius: 50px;
    text-decoration: none;
    font-size: var(--font-size-20);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
}
 
#agency .cta-button .arrow {
    font-size: var(--font-size-18-14);
    background: #ffffff;
    color: var(--main-color-0);
    border-radius: 50%;
    display: flex;
    padding: 4px;
    margin-left: var(--margin-40);
}

/* Floating Image Positions */
#agency .floating-img {
    position: absolute;    
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}

#agency .floating-img img {
    width: 100%;
    display: block;
}

#agency .img-top-left {
    top: 14%;
    left: 10%;
    width: 200px;
    height: 135px;
}
#agency .img-top-right {
    top: 18%;
    right: 10%;
    width: 200px;
    height: 130px;
}
#agency .img-mid-left {
    top: 45%;
    left: -1%;
    width: 240px;
    height: 180px;
}
#agency .img-mid-right {
    top: 45%;
    right: -1%;
    width: 240px;
    height: 180px;
}
#agency .img-bottom-left {
    bottom: 10%;
    left: 20%;
    width: 190px;
    height: 140px;
}
#agency .img-bottom-right {
    bottom: 0%;
    right: 18%;
    width: 320px;
    height: 220px;
}
/* 대행사 선택 끝 */

/* 성공사례 시작 */
#success {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
#success .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) auto 0;
	flex-direction: column;
}
#success .section-area.full {
    display: flex;
    width: 100%;
    max-width: 100%;
    margin: 0 auto var(--margin-120);
	flex-direction: column;
}

/* 헤더 스타일 */
#success .header {
    display: flex;
    align-items: center;
    margin-bottom: var(--margin-50);
}

#success .main-title {
    font-size: var(--font-size-65);
    font-weight: 800;
    margin-right: 40px;
}

#success .brand-name {
    font-size: var(--font-size-18);
    color: var(--main-color-0);
    font-weight: 500;
    margin-bottom: 10px;
	text-transform: uppercase;
}

#success .description {
    color: #333;
    font-size: var(--font-size-18);
    font-weight: 600;
}

/* 카드 레이아웃 */
#success .card-container {
    display: flex;
    gap: 30px;
}

#success .card {
    flex: 1;
    position: relative;
}

/* 배지 스타일 */
#success .badge {
    display: inline-block;
    padding: 5px 15px;
    border-radius: 20px;
    color: white;
    font-size: var(--font-size-14);
    margin-bottom: 15px;
}

#success .cafe-badge { background-color: var(--main-color-0); }
#success .design-badge { background-color: var(--main-color-0); }

/* 이미지 박스 */
#success .image-box {
    width: 100%;
    /* height: 300px; */
    border-radius: 20px;
    overflow: hidden;
    background-color: #fdefee;
    margin-bottom: 25px;
    padding: var(--margin-50) var(--margin-40);
}

#success .image-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
        /* 공통 프로필 스타일 */
#success .profile {
            display: flex;
            align-items: center;
            margin-bottom: 10px;
        }
#success .profile-img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #eee;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
#success .profile-name {
            font-size: 14px;
            font-weight: bold;
            margin: 0 10px;
            color: #333;
        }

        /* 노란색 말풍선 (고객) */
#success .customer-section {
            display: flex;
            flex-direction: column;
            align-items: flex-end;
            margin-bottom: 30px;
        }
#success .yellow-bubble {
    position: relative;
    background-color: #f7e600;
    padding: 20px;
    border-radius: 30px 5px 30px 30px;
    font-size: 15px;
    line-height: 1.5;
    color: #333;
    max-width: 90%;
}

        /* 빨간색 말풍선 (업체) */
#success .company-section {
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
#success .red-bubble {
    position: relative;
    background-color: var(--main-color-0);
    padding: 20px;
    border-radius: 5px 30px 30px 30px;
    font-size: 15px;
    line-height: 1.5;
    color: white;
    max-width: 90%;
}

        /* 아이콘 색상 구분 */
#success .bg-red {
    background-color: var(--main-color-0);
    color: #ffffff;
}
#success .bg-red .material-symbols-outlined {
    font-size: var(--font-size-30);
    font-variation-settings: 'FILL' 1,
  'wght' 400,
  'GRAD' 0,
  'opsz' 24;
} 
#success .bg-white {
    background-color: #fff;
    border: 1px solid #ddd;
    padding: 8px;
}
#success .yellow-bubble:after {
    content: "";
    position: absolute;
    top: 0px;
    right: -15px;
    bottom: auto;
    left: auto;
    border-width: 0px 0 20px 20px;
    border-color: transparent #f7e600;
    display: block;
    width: 0;
    border-style: solid;
}
#success .red-bubble:after {
    content: "";
    position: absolute;
    top: 0px;
    left: -15px;
    bottom: auto;
    right: auto;
    border-width: 0px 20px 20px 0px;
    border-color: transparent var(--main-color-0);
    display: block;
    width: 0;
    border-style: solid;
}

/* 태그 그룹 */
#success .tag-group {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

#success .tag-group span {
    background-color: #F8F8F8;
    padding: 8px 15px;
    border-radius: 5px;
    color: #888;
    font-size: var(--font-size-14);
}

/* 텍스트 스타일 */
#success .card-title {
    font-size: var(--font-size-22);
    font-weight: 700;
    margin-bottom: 20px;
    line-height: 1.4;
	word-break: keep-all;
    /*white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 85%;*/
}

#success .card-text {
    font-size: var(--font-size-15);
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
}
#success .swiper-container-success {position: relative; margin: var(--margin-10) 0 0 0; overflow: hidden;}
#success .swiper-container-success .swiper-wrapper {transition-timing-function: linear !important; position: relative;}
/* 성공사례 끝 */

/* 함께하는 파트너 시작 */
#Business-partner {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('/img/Business-partner-section-background.jpg') no-repeat center center / cover;
    color: #fff;
}
#Business-partner .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) 0 var(--margin-500);
    flex-direction: column;
    align-items: center;
}

/* 텍스트 스타일 */
#Business-partner .main-title {
    display: flex;
    font-size: var(--font-size-65);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 45px;
    flex-direction: column;
    align-items: center;
}
#Business-partner .brand-name {
    font-size: var(--font-size-20);
    color: var(--main-color-0);
    font-weight: 600;
    margin-bottom: 20px;
	text-transform: uppercase;
}
/* 함께하는 파트너 끝 */

/* 나노가 잘하는거 시작 */
#great {
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('/img/great-section-background.jpg') no-repeat center center / cover;
    color: #fff;
}
#great .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) 0 var(--margin-500);
    flex-direction: column;
    align-items: center;
}

/* 텍스트 스타일 */
#great .main-title {
    display: flex;
    font-size: var(--font-size-65);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 45px;
    flex-direction: column;
    align-items: center;
}
#great .brand-name {
    font-size: var(--font-size-20);
    color: var(--main-color-0);
    font-weight: 600;
    margin-bottom: 20px;
	text-transform: uppercase;
}
/* 나노가 잘하는거 끝 */

/* 문의하기 시작 */
#contact {
    display: flex;
    justify-content: space-between;
    background: url('/img/contact-section-background.jpg') no-repeat center center / cover;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}

#contact .section-area {
    display: flex;
    width: 100%;
    max-width: 1280px;
    margin: var(--margin-120) auto;
}
#contact .contact-info { width: 50%; }
/* 왼쪽 텍스트 섹션 */
#contact .brand-name {
    font-size: var(--font-size-16);
    line-height: 1.4;
    font-weight: 400;
    color: var(--main-color-0);
	text-transform: uppercase;
}
#contact .contact-info h1 {
    font-size: var(--font-size-65);
    font-weight: 700;
    line-height: 1.2;
    margin: 20px 0;
    color: var(--sub-color-0);
}
#contact .highlight { color: var(--main-color-0); }
#contact .details {
    display: inline-flex;
    margin-top: var(--margin-80-10);
    flex-direction: column;
    justify-content: center;
    gap: var(--gap-20);
}
#contact .details p {
    display: flex;
    font-size: var(--font-size-18);
    font-weight: 500;
    line-height: 1.4;
    color: var(--sub-color-0);
    align-items: center;
    gap: var(--gap-10);
}
#contact .details p span:nth-child(2) {
    width: var(--margin-80-50);
    font-weight: 400;
    text-align: left;
}
#contact .details p span:nth-child(3) {
    font-weight: 600;
	font-size: var(--font-size-20-16);
}
#contact .details p span a {
    color: var(--sub-color-0);
}

/* 오른쪽 폼 섹션 */
#contact .contact-form {
    width: 50%;
    background-color: #ffffff;
    border-radius: 20px;
    padding: 20px;
}
#contact .input-group { margin-bottom: 30px; border-bottom: 1px solid #666666; padding-bottom: 10px; }
#contact .input-row { display: flex; gap: 20px; }
#contact .input-row .input-group { flex: 1; }

#contact label {
    display: block;
    margin-bottom: 10px;
    color: var(--sub-color-0);
    font-size: var(--font-size-20);
    font-weight: 600;
}
#contact label.sub-label {
    display: flex;
    margin-bottom: 10px;
    color: #757575;
    font-size: var(--font-size-16);
    font-weight: 400;
    white-space: nowrap;
    align-items: center;
    gap: 8px;
}
#contact label span { color: var(--main-color-0); }

#contact input, textarea {
    width: 100%;
    background: transparent;
    border: none;
    color: var(--sub-color-0);
    outline: none;
    font-size: var(--font-size-16);
    padding: 10px 0;
}
/*#contact input.wr_2 {
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 1px solid #757575;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;  
	cursor: pointer;
	position: relative;
	outline: none;
}*/
/* 체크되었을 때의 스타일 (배경색 지정 등) */
/*#contact input.wr_2[type="checkbox"]:checked {
  background-color: var(--main-color-0); /* 체크 시 배경색 */
  /*border-color: var(--main-color-0); /* 체크 시 테두리색 */
/*}*/

/* 체크되었을 때 체크표시(V) 추가 (가상요소 사용) */
/*#contact input.wr_2[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}*/

#contact .checkbox-group { display: flex; flex-wrap: wrap; gap: 15px; margin-top: 10px; color: #888; font-size: 0.8rem; }

/* 버튼 스타일 */
#contact .submit-btn {
    width: 100%;
    background-color: var(--main-color-0);
    color: #fff;
    border: none;
    padding: 20px;
    font-size: var(--font-size-18);
    font-weight: bold;
    cursor: pointer;
}
#contact .agreement {
    font-size: var(--font-size-16);
	color: #757575;
    font-weight: 400;
}
#contact .agreement-txt {
    display: flex;
    align-items: center;
    gap: 8px;
}
#contact .agreement a {
    font-size: var(--font-size-18);
    font-weight: 500;
    color: var(--sub-color-0);
    text-decoration-line: underline;
    padding-left: 10px;
    cursor: pointer;
}

#contact .agreement input.agree {
    width: 20px;
    height: 20px;
    background-color: transparent;
    border: 1px solid #757575;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;  
	cursor: pointer;
	position: relative;
	outline: none;
}
/* 체크되었을 때의 스타일 (배경색 지정 등) */
#contact .agreement input.agree[type="checkbox"]:checked {
  background-color: var(--main-color-0); /* 체크 시 배경색 */
  border-color: var(--main-color-0); /* 체크 시 테두리색 */
}

/* 체크되었을 때 체크표시(V) 추가 (가상요소 사용) */
#contact .agreement input.agree[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 7px;
  width: 5px;
  height: 10px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
/* 배경 레이어 */
/* 팝업 오버레이 (기본 상태: 숨김) */
#contact .popup-overlay {
    /* display: none; -> opacity/visibility로 변경 */
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    backdrop-filter: blur(2px);
    
    /* 1초 동안 서서히 변화 (opacity, visibility, backdrop-filter에 적용) */
    transition: opacity 0.5s ease, visibility 0.5s ease, backdrop-filter 0.5s ease;
}

/* 팝업이 활성화되었을 때 상태 */
#contact .popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* 팝업 컨텐츠 박스 */
#contact .popup-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* 살짝 작은 상태에서 시작 */
    width: 90%;
    max-width: 550px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    
    /* 스케일 변화 추가 */
    transition: transform 0.4s ease;
}

/* 팝업이 활성화되었을 때 컨텐츠 박스 스케일 */
#contact .popup-overlay.show .popup-content {
    transform: translate(-50%, -50%) scale(1);
}

/* --- 나머지 스타일은 동일 --- */
#contact .popup-header {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#contact .popup-header h2 {
    margin: 0;
    font-size: var(--font-size-20);
    color: #333;
    width: 100%;
    display: FLEX;
}
#contact .close-x { background: none; border: none; font-size: 24px; cursor: pointer; }

#contact .popup-body {
    padding: 20px;
    overflow-y: auto;
    font-size: var(--font-size-16);
    line-height: 1.6;
    color: #444;
}
#contact .intro-text { margin-bottom: 20px; font-weight: 500; }
#contact section { margin-bottom: 25px; }
#contact h3 {
    font-size: var(--font-size-17);
    margin-bottom: 10px;
}

#contact table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: var(--font-size-15);
}
#contact th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
#contact th {
    background: #f4f4f4;
    width: 20%;
    text-align: center;
}

#contact .retention {
    border-top: 1px dashed #ccc;
    padding-top: 10px;
    color: var(--main-color-0);
    font-weight: 400;
    padding-left: 20px;
    text-indent: -20px;
    line-height: 1.6;
    font-size: var(--font-size-15);
}

/* 문의하기 끝 */

/* CROSSOVER TOTAL SERVICE 시작 */
#hero {
	width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: url('/img/hero-section-background.jpg') no-repeat center center / cover;
    color: #fff;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}
#hero .section-area {
    margin: var(--margin-300-60) 0;
}

/* 텍스트 스타일 */
#hero .main-title {
    display: flex;
    font-size: var(--font-size-65);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1px;
    margin-bottom: 30px;
    flex-direction: column;
    align-items: center;
}
#hero .main-title .white {
	display: flex;
	margin-bottom: 0px;
}
#hero .main-title .red {
	display: flex;
	margin-bottom: 20px;
}

#hero .main-title .red {
    color: var(--main-color-0); /* 포인트 레드 컬러 */
}

#hero .description {
    display: flex;
    color: #ccc;
    margin-bottom: 40px;
    flex-direction: column;
    align-items: center;
}
#hero .description .description-txt1 {
	display: flex;
    font-size: var(--font-size-22);
    line-height: 1.6;
    font-weight: 400;
}
#hero .description .description-txt2 {
    display: flex;
    font-size: var(--font-size-24);
    line-height: 1.6;
    font-weight: 600;
}	

/* 인포메이션 시작 */
#information {
    display: flex;
    justify-content: space-between;
    padding-left: var(--padding-20-15);
    padding-right: var(--padding-20-15);
}

#information .section-area {
    display: flex;
    width: 100%;
	height: 100%;
    max-width: 1280px;
    margin: var(--margin-120) auto;
    gap: var(--gap-60);
    align-items: flex-end;
}
/* 왼쪽 섹션 스타일 */
#information .left-section {
    width: 45%;
}

#information .brand-name {
    font-size: var(--font-size-16);
    line-height: 1.4;
    font-weight: 400;
    text-transform: uppercase;
	color: var(--main-color-0);
}

#information .main-title {
    font-size: var(--font-size-65);
    font-weight: 700;
    line-height: 1.2;
    margin: 20px 0;
}

#information .highlight {
    color: var(--main-color-0); /* 강조 붉은색 */
}

#information .divider.top {
    width: 100%;
    height: 2px;
    background-color: #333;
    margin: var(--padding-100) 0 20px 0;
}

#information .divider.bottom {
	width: 100%;
	height: 0; /* 높이를 0으로 설정 */
	border-top: 1px dashed #bbb; /* 위쪽에 1px 점선 테두리 생성 */
	margin: 20px 0; /* margin 축약형 */
}

#information .info-list {
    list-style: none;
    background: #f8f8f8;
    padding: var(--padding-20) var(--padding-30);
    border-radius: 20px;
    margin-top: var(--margin-60);
}

#information .info-list li {
    font-size: var(--font-size-17-15);
    margin-bottom: 10px;
    color: #333;
	display: flex;
}
#information .info-list li a {
    color: #333;
}
#information .info-list li:nth-child(1) {
    margin-bottom: 0px;
	display: flex;
}

#information .info-list .label {
    display: inline-block;
    width: var(--width-100);
    font-weight: bold;
}
/* 오른쪽 섹션 스타일 */
#information .right-section {
	width: 55%;
    height: calc(100% - 50px);
}

#information .address {
	color: #333;
    font-size: var(--font-size-20);
    font-weight: 600;
	margin-bottom: var(--margin-20);
}

#information .map-placeholder {
    position: relative;
    width: 100%;
    height: 100%;
    background-color: #e9ecef;
    border-radius: 8px;
    overflow: hidden;
}
#information .map-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#information .contact-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    color: #333;
    font-size: var(--font-size-16);
    font-weight: 500;
    letter-spacing: -0.5px;
}

#information .contact-item {
    display: flex;
    align-items: center;
    gap: 5px;
}

#information .contact-item .label {
    font-weight: bold;
    color: #666666;
    margin-right: 5px;
}

#information .contact-item .material-symbols-rounded, #information .contact-item .value {
    color: #666666;
}

#information .contact-item .value a {
    color: #333333;
    font-size: var(--font-size-20);
    font-weight: 700;
}
#information .loc-link {
    position: absolute;
    bottom: 0;
    right: 0;
    background: var(--main-color-0);
    color: #ffffff;
    display: flex;
    align-items: center;
	align-items: stretch;
    font-size: var(--font-size-15);
    font-weight: 500;
    padding: var(--padding-6) var(--padding-20);
    border-radius: 10px;
    font-variation-settings: 'FILL' 0,
  'wght' 400,
  'GRAD' -25,
  'opsz' 24;
    gap: var(--padding-4);
}
#information .loc-link span {
    font-size: var(--font-size-22);
}
/* 인포메이션 끝 */

/* 버튼 스타일 */
#hero .download-btn {
    display: inline-flex;
    align-items: center;
    padding: 12px 28px;
    background-color: var(--main-color-0);
    color: #fff;
    text-decoration: none;
    border-radius: 50px;
    font-weight: 600;
    font-size: var(--font-size-15);
}

#hero .download-btn:hover {
    background-color: #ff4d5a;
}

#hero .download-btn .icon {
    margin-left: 10px;
    font-size: var(--font-size-18);
}
/* CROSSOVER TOTAL SERVICE 끝 */


/* QUICK CONTACT 시작 */
#contact-quick.contact-quick.pc {
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    width: 100%;
    height: 70px;
    background: var(--sub-color-2);
    z-index: 99;
}
#contact-quick-mo.contact-quick.mobile {
    display: none;
}
#popupLayer3.popup-overlay {
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    backdrop-filter: blur(2px);
    transition: opacity 0.5s ease, visibility 0.5s ease, backdrop-filter 0.5s ease;
}
#contact-quick .cs-tel {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 315px;
    height: 100%;
    background: var(--main-color-0);
    padding: 10px;
    box-sizing: border-box;
}
#contact-quick .cs-tel > a {
    position: relative;
    top: 2px;
    font-size: var(--font-size-22);
    padding: 10px;
    font-weight: 600;
    color: #fff;
    line-height: 1em;
    word-break: keep-all;
    box-sizing: border-box;
}
#contact-quick-mo .cs-tel > a {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    font-size: var(--font-size-15);
    padding: 8px;
    font-weight: 500;
    color: #fff;
    line-height: 1em;
    word-break: keep-all;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    justify-content: center;
    cursor: pointer;
}
#contact-quick .contact-form-mo {display:none;}
#contact-quick .contact-form {
    width: calc(100% - 315px);
}
#contact-quick .contact-form form {
    display: flex;
    width: 100%;
    height: 100%;
}
#contact-quick .contact-form form fieldset {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    width: calc(100% - 315px);
    width: -webkit-calc(100% - 315px);
    height: 100%;
}
#contact-quick .submit-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    width: 315px;
    height: 100%;
    background: var(--main-color-0);
    padding: 10px;
    box-sizing: border-box;
    border: none;
    font-size: var(--font-size-22);
    font-weight: bold;
    line-height: 1em;
    word-break: keep-all;
    color: #fff;
    font-family: "Pretendard", Sans-serif;
}
#contact-quick .contact-form form fieldset label {
    display: inline-block;
    font-size: var(--font-size-17);
    font-weight: 600;
    color: #fff;
    line-height: 1em;
}
#contact-quick .contact-form form .agreement-txt {
    font-size: var(--font-size-15);
    font-weight: 400;
    color: #fff;
    opacity: 0.8;
    gap: 10px;
    display: flex;
    align-items: center;
}
#contact-quick .contact-form form .agreement-txt span {
    display: flex;
    align-items: center;
    margin-top: -2px;
}
#contact-quick .contact-form form fieldset .wr_name, #contact-quick .contact-form form fieldset .wr_1 {
    display: block;
    padding: 10px;
    width: 200px;
    height: 40px;
    border-radius: 3px;
    box-sizing: border-box;
    border: none;
    font-size: 15px;
    color: #333;
    line-height: 1em;
    word-break: keep-all;
    font-family: "Pretendard", Sans-serif;
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.1);
    color: #fff;
}
#contact-quick .contact-form form fieldset .input-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
#contact-quick .contact-form form fieldset .agree-q{
    width: 20px;
    height: 20px;
    background-color: rgba(255,255,255,0.1);
    border: 1px solid #757575;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    outline: none;
}
#contact-quick .contact-form form fieldset .agree-q[type="checkbox"]:checked {
    background-color: var(--main-color-0);
    border-color: var(--main-color-0);
}
#contact-quick .contact-form form fieldset .agree-q[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 7px;
    width: 5px;
    height: 10px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
/* QUICK CONTACT 끝 */


/* 푸터 시작 */
#ft .ft_cnt_dp1 a {
    cursor: pointer;
}

/* 팝업 오버레이 (기본 상태: 숨김) */
#ft .popup-overlay {
    /* display: none; -> opacity/visibility로 변경 */
    opacity: 0;
    visibility: hidden;
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 1000;
    backdrop-filter: blur(2px);
    
    /* 1초 동안 서서히 변화 (opacity, visibility, backdrop-filter에 적용) */
    transition: opacity 0.5s ease, visibility 0.5s ease, backdrop-filter 0.5s ease;
}

/* 팝업이 활성화되었을 때 상태 */
#ft .popup-overlay.show {
    opacity: 1;
    visibility: visible;
}

/* 팝업 컨텐츠 박스 */
#ft .popup-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%) scale(0.9); /* 살짝 작은 상태에서 시작 */
    width: 90%;
    max-width: 550px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 80vh;
    
    /* 스케일 변화 추가 */
    transition: transform 0.4s ease;
}

/* 팝업이 활성화되었을 때 컨텐츠 박스 스케일 */
#ft .popup-overlay.show .popup-content {
    transform: translate(-50%, -50%) scale(1);
}

/* --- 나머지 스타일은 동일 --- */
#ft .popup-header {
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
#ft .popup-header h2 {
    margin: 0;
    font-size: var(--font-size-20);
    color: #333;
    width: 100%;
    display: FLEX;
}
#ft .close-x { background: none; border: none; font-size: 24px; cursor: pointer; }

#ft .popup-body {
    padding: 20px;
    overflow-y: auto;
    font-size: var(--font-size-16);
    line-height: 1.6;
    color: #444;
}
#ft .intro-text {
    margin-bottom: 20px;
    font-weight: 500;
    text-align: left;
}
#ft section { margin-bottom: 25px; }
#ft h3 {
    font-size: var(--font-size-17);
    margin-bottom: 10px;
    text-align: left;
}

#ft table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 10px;
    font-size: var(--font-size-15);
}
#ft th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
#ft th {
    background: #f4f4f4;
    width: 20%;
    text-align: center;
}

#ft .retention {
    border-top: 1px dashed #ccc;
    padding-top: 10px;
    color: var(--main-color-0);
    font-weight: 400;
    padding-left: 20px;
    text-indent: -20px;
    line-height: 1.6;
    font-size: var(--font-size-15);
    text-align: left;
}
/* 푸터 끝 */
#bo_v .material-icons, #bo_v .material-symbols-outlined {
    background: #555555;
    color: #ffffff;
    border-radius: 50%;
    font-size: 15px;
    padding: 2px;
}
#bo_v .material-icons.red, #bo_v .material-symbols-outlined.red {
    background: var(--main-color-0);
    color: #ffffff;
    border-radius: 50%;
    font-size: 15px;
    padding: 2px;
}
#bo_v .pf_img .material-symbols-outlined {
    background: #ffffff;
    color: #333333;
    border-radius: 50%;
    font-size: 55px;
    padding: 2px;
}

/* Large Devices, Wide Screens : ~ 1200px */
@media only screen and (max-width : 1200px) {

}


/* Medium Devices, Desktops : ~ 992px */
@media only screen and (max-width : 992px) {
 .gnb_1dli {display:none;}
 .gnb_mnal {display:block;}
}


/* Small Devices, Tablets : ~ 768px */
@media only screen and (max-width : 768px) {
	.mo-block { display: block; }
	#advertising .section-area {
		display: flex;
		align-items: center;
	}
	#advertising .main-title {
		display: flex;
		align-items: center;
	}
	#marketing .header {
		display: flex;
		flex-direction: column;
	}
	#marketing .main-title {
		margin-right: 0px;
		text-align: center;
	}
	#marketing .brand-name {
		text-align: center;
	}
	#marketing .description {
		text-align: center;
		margin-bottom: 20px;
	}
	#marketing .main-content {
		display: flex;
		flex-direction: column;
	}
	#marketing .image-area, #marketing .text-area {
		width: 100%;
	}
	#marketing .navigation-container {
		display: none;
	}
	#marketing .step-label, #marketing .sub-text {
		text-align: center;
	}
	#clients .swiper-slide {
		padding: 10px 15px;
	}
	#reference .header {
		display: flex;
		flex-direction: column;
	}
	
	#reference .main-title {
		margin-right: 0px;
	}
	#reference .brand-name {
		text-align: center;
	}
	#reference .description {
		text-align: center;
	}
	#success .header {
		display: flex;
		flex-direction: column;
	}
	#success .brand-name {
		text-align: center;
	}
	#success .description {
		text-align: center;
	}
	#success .main-title {
		margin-right: 0px;
	}
	
	#contact .section-area {
		display: flex;
		flex-direction: column;
	}
	#contact .contact-info, #contact .contact-form {
		width: 100%;
		margin-bottom: 0px;
	}	
	#contact .contact-info {
		margin-bottom: 30px;
		text-align: center;
	}	
	
	#ft_wr {
		display: flex;
		flex-direction: column;
	}
	#ft_wr .ft_cnt_dp1 {
		display: flex;
		justify-content: center;
		gap: 10px;
	}
	#ft_wr .ft_cnt_dp2, #ft_wr .ft_cnt_dp3 {
		display: flex;
		justify-content: center;
		flex-direction: column;
		align-items: center;
		gap: 0px;
	}
	#ft_company {
		text-align: center;
		margin-top: 30px;
	}
	#ft_link .ft_cnt_dp3 a:not(:last-child)::after {
		content: "";
	}
	#ft_link a:not(:last-child)::after {
		margin-left: 10px;
	}
	#ft_link a span {
		padding-left: 15px;
	}
	#information .section-area {
		flex-direction: column;
	}
	#information .contact-info {
		flex-direction: column;
	}
	#information .left-section {
		width: 100%;
		order: 1;
	}
	#information .right-section {
		width: 100%;
		order: 2;
	}
	#agency .img-top-left, #agency .img-top-right, #agency .img-mid-left, #agency .img-mid-right, #agency .img-bottom-left, #agency .img-bottom-right {
		display: none;
	}
	#agency .main-title {
		margin-right: 0px;
	}
	#marketing .navbar {
		display: none;
	}
	#effect .header {
		align-items: center;
		flex-direction: column;
		margin-bottom: 20px;
	}
	#effect .divider {
		display: none;
	}
	#contact, #information,#reference {
		overflow: hidden;
	}
	#expertise .expertise-info {
		width: 100%;
		text-align: center;
	}
	#expertise .details {
		margin-top: 20px;
	}
	#marketing .swiper-slide.active {
		width: 100% !important;
		height: 100%;
		
	}
	#marketing .swiper-slide {
		width: 100% !important;
		height: 100%;
	}
	#main .visual-sec .txt-box {
		top: 60px;
		margin-top: 0;
	}
	#hd.active {
		height: 65px;
	}
	#expertise .section-area {
		flex-direction: column;
	}
	#expertise .expertise-form {
		width: 100%;
	}
	#expertise .expertise-form img {
		border-radius: 20px 20px 20px 20px;
        margin-top: 20px;
        width: 100%;
	}
	#success .yellow-bubble, #success .red-bubble {
	    display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.9;
        padding: 8px 20px;
        max-width: 100%;
	}
	#main {
		height: 650px;
	}	
	
	#contact-quick-mo.contact-quick.mobile {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		width: 100%;
		height: 65px;
		background: var(--main-color-0);
		z-index: 99;
	}
	#contact-quick.contact-quick.pc {
		display: none;
	}
	#contact-quick-mo {
		display: none;
	}
	#contact-quick-mo .cs-tel {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 33.333333%;
		height: 100%;
		box-sizing: border-box;
	}
	#contact-quick-mo .cs-tel:nth-child(2) {
		border-left: solid 1px rgba(255, 255, 255, 0.3);
		border-right: solid 1px rgba(255, 255, 255, 0.3);
	}
	/* 팝업 오버레이 (기본 상태: 숨김) */
	#popupLayer3.popup-overlay {
		/* display: none; -> opacity/visibility로 변경 */
		opacity: 0;
		visibility: hidden;
		position: fixed;
		top: 0; left: 0;
		width: 100%; height: 100%;
		background: rgba(0, 0, 0, 0.6);
		z-index: 1000;
		backdrop-filter: blur(2px);
		
		/* 1초 동안 서서히 변화 (opacity, visibility, backdrop-filter에 적용) */
		transition: opacity 0.5s ease, visibility 0.5s ease, backdrop-filter 0.5s ease;
	}

	/* 팝업이 활성화되었을 때 상태 */
	#popupLayer3.popup-overlay.show {
		opacity: 1;
		visibility: visible;
	}

	/* 팝업 컨텐츠 박스 */
	#popupLayer3 .popup-content {
		position: absolute;
		top: 50%; left: 50%;
		transform: translate(-50%, -50%) scale(0.9); /* 살짝 작은 상태에서 시작 */
		width: 90%;
		max-width: 550px;
		background: #fff;
		border-radius: 12px;
		box-shadow: 0 10px 30px rgba(0,0,0,0.3);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		max-height: 80vh;
		
		/* 스케일 변화 추가 */
		transition: transform 0.4s ease;
	}

	/* 팝업이 활성화되었을 때 컨텐츠 박스 스케일 */
	#popupLayer3.popup-overlay.show .popup-content {
		transform: translate(-50%, -50%) scale(1);
	}

	/* --- 나머지 스타일은 동일 --- */
	#popupLayer3 .popup-header {
		padding: 15px 20px;
		background: #f8f9fa;
		border-bottom: 1px solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	#popupLayer3 .popup-header h2 {
		margin: 0;
		font-size: var(--font-size-20);
		color: #333;
		width: 100%;
		display: flex;
		justify-content: center;
	}
	#popupLayer3 .close-x { background: none; border: none; font-size: 24px; cursor: pointer; }

	#popupLayer3 .popup-body {
		padding: 20px;
		overflow-y: auto;
		font-size: var(--font-size-16);
		line-height: 1.6;
		color: #444;
	}
	#popupLayer3 .intro-text {
		margin-bottom: 20px;
		font-weight: 500;
		text-align: left;
	}
	#popupLayer3 section { margin-bottom: 25px; }
	#popupLayer3 h3 {
		font-size: var(--font-size-17);
		margin-bottom: 10px;
		text-align: left;
	}

	#popupLayer3 table {
		width: 100%;
		border-collapse: collapse;
		margin-top: 10px;
		font-size: var(--font-size-15);
	}
	#popupLayer3 th, td { border: 1px solid #ddd; padding: 10px; text-align: left; }
	#popupLayer3 th {
		background: #f4f4f4;
		width: 20%;
		text-align: center;
	}

	#popupLayer3 .retention {
		border-top: 1px dashed #ccc;
		padding-top: 10px;
		color: var(--main-color-0);
		font-weight: 400;
		padding-left: 20px;
		text-indent: -20px;
		line-height: 1.6;
		font-size: var(--font-size-15);
		text-align: left;
	}
	#popupLayer3 .popup-body input.wr_name, #popupLayer3 .popup-body input.wr_1 {
		width: 100%;
		height: 50px;
		padding: 10px;
		background: #f9f9f9;
		border: 1px solid #ddd;
		box-sizing: border-box;
		font-size: 16px;
		font-weight: 400;
		color: #555;
		line-height: 1em;
		word-break: keep-all;
	}
	#popupLayer3 .popup-body fieldset {
		gap: 8px;
		display: flex;
		flex-direction: column;
	}
	#popupLayer3 .popup-body .agree-q-m {
		width: 15px;
        height: 15px;
	}
	#popupLayer3 .popup-body .submit-btn {
		display: block;
		margin-top: 15px;
		width: 100%;
		height: 50px;
		background: var(--main-color-0);
		border-radius: 0;
		font-size: var(--font-size-18);
		font-weight: bold;
		border: none;
		color: #fff;
	}
	#top_btn {
		bottom: 85px;
	}
	#marketing .card h3 {
		text-align: center;
	}

	#marketing .text-content {
		height: auto;
	}
	#result .arrow {
		margin-left: 0px;
	}
	#result .metrics {
		padding: 5px 5px 5px 10px;
	}
	#success .tag-group {
		display: none;
	}
	#contact .details p span:nth-child(2) {
		display: none;
	}
	#contact .details p span:nth-child(3) {
		padding-left: 5px;
	}
	#contact .input-row {
		gap: 0px;
		flex-direction: column;
	}
	#information .info-list .label {
	}
	#effect .banner {
		border-radius: 125px;
	}
	#contact label {
		display: none;
	}
	#contact span.mobile-only {
		color: var(--main-color-0);
		padding-right: 5px;
	}
	#contact .input-group {
		margin-bottom: 15px;
		border-bottom: 1px solid #666666;
		padding-bottom: 10px;
		display: flex;
		align-items: baseline;
	}
	#contact .agreement-txt {
		gap: 0;
	}
	#contact .agreement input.agree {
		margin-right: 8px;
	}
	#information .info-list {
		margin-top: 0;
	}
	#nano-great .center-shield {
		top: 40%;
	}	
	#expertise .details p {
		justify-content: center;
	}
}


/* Extra Small Devices, Phones : ~ 480px */
@media only screen and (max-width : 480px) {

}


/* Custom, iPhone Retina : ~ 320px */
@media only screen and (max-width : 320px) {

}