/*POC의 메인 스타일 */ /* 반응형 */ @media (max-width: 1080px) { .poc-form-container { margin-top: 40px; } .trusted-companies-section h2 { font-size: 1.25rem !important; } .logo-item { flex: 0 0 80px; margin-right: 10px; } .company-logo { max-width: 80px; max-height: 35px; } } /* POC Hero */ .poc-hero { background: linear-gradient(135deg, #f8f8f7, #f8f8f7); padding: 30px; overflow-x: hidden; max-width: 100vw; box-sizing: border-box; } .poc-hero h1 { font-size: 3rem; font-weight: 700; color: #313131; margin-bottom: 1.5rem; line-height: 1.2; } .poc-hero > .container > .row > .col-lg-5 > p { font-size: 1.24rem; color: #313131; margin-bottom: 2rem; line-height: 1.6; } /* Benefit List */ .benefit-list .benefit-item { display: flex; align-items: center; margin-bottom: 1rem; } .benefit-list .benefit-item i { color: #313131; margin-right: 0.75rem; } .benefit-list .benefit-item span { color: #313131; } /* 신뢰 받는 기업 */ .trusted-companies { background: linear-gradient #fafcff; padding: 25px 0; overflow: hidden; } .trusted-companies h2 { font-size: 1.0rem; color: #909399; } /* 로고 캐러셀 */ .logo-carousel-wrapper { position: relative; width: 100%; margin: 0 auto; overflow: hidden; } .logo-carousel-wrapper::before, .logo-carousel-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 50px; z-index: 2; pointer-events: none; } .logo-carousel-wrapper::before { left: 0; background: linear-gradient(to right, rgba(248, 248, 247, 1), rgba(248, 248, 247, 0)); } .logo-carousel-wrapper::after { right: 0; background: linear-gradient(to left, rgba(248, 248, 247, 1), rgba(248, 248, 247, 0)); } .logo-carousel { display: flex; animation: scroll 60s linear infinite; } .logo-item { flex: 0 0 100px; display: flex; align-items: center; justify-content: center; margin-right: 15px; } .company-logo { max-width: 120px; max-height: 50px; width: auto; height: auto; object-fit: contain; opacity: 0.7; transition: all 0.3s ease; } .company-logo:hover { opacity: 1; filter: grayscale(0%); transform: scale(1.1); } @keyframes scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-150%); } } .logo-carousel:hover { animation-play-state: paused; } /* POC 신청 폼 */ .poc-form-container { /* background: #ffffff; */ /* border: 1px solid #e4e7ed; */ /* border-radius: 12px; */ padding: 20px; /* box-shadow: 0 1px 4px rgba(0,0,0,0.08); */ } .poc-form-container h2 { font-size: 1.25rem; font-weight: 600; color: #313131; margin-bottom: 1rem; } .poc-form-container .form-group { margin-bottom: 1.5rem; } .poc-form-container label { font-size: 0.875rem; font-weight: 500; color: #313131; margin-bottom: 0.25rem !important; } .poc-form-container label span { color: #fa751e; } .poc-form-container input.form-control, .poc-form-container select.form-control { height: 38px !important; padding: 6px 12px !important; font-size: 15px !important; color: #333 !important; background-color: #f8f8f7 !important; border: 1px solid #ced4da !important; } .poc-form-container select.form-control option{ background-color: #f8f8f7 !important; color: #333 !important; } .poc-form-container select[name="c_poc_country"], .poc-form-container select[name="c_poc_company_size"], .poc-form-container select[name="c_poc_inquiry_reason"] { color: #999 !important; font-weight: 400 !important; } .poc-form-container input.form-control::placeholder { color: #999 !important; font-weight: 400 !important; } .poc-form-container textarea.form-control { padding: 6px 12px !important; font-size: 15px !important; font-weight: 400 !important; color: #333 !important; background-color: #f8f8f7 !important; border: 1px solid #ced4da !important; } .poc-form-container textarea.form-control::placeholder { color: #999 !important; font-weight: 400 !important; } .poc-form-container .btn-primary { padding: 10px 20px; font-size: 0.9375rem; font-weight: 500; background-color: #313131; border-color: #313131; } /* 폼 하단 텍스트 */ .poc-form-container form + div { margin-top: 2rem; } .poc-form-container form + div + div { margin-top: 1.5rem; } /* 개인정보 보호정책 링크 */ .poc-form-container form + div a { color: #313131; text-decoration: underline; } .poc-form-container form + div a:hover { color: #313131; } .poc-form-container .btn-primary:hover { background-color: #313131; border-color: #313131; } /* 체크박스 */ .checkbox-item { display: flex; align-items: center; cursor: pointer; margin-bottom: 0; color: #787774 !important; } .checkbox-item input[type="checkbox"] { width: 16px; height: 16px; margin-right: 8px; cursor: pointer; } .checkbox-item span { font-size: 0.9375rem; color: #909399 !important; } /* 문의하기 */ .info-card { background: #f8f8f7; border-radius: 12px; padding: 32px; margin-bottom: 24px; } .info-card h3 { font-size: 1.25rem; font-weight: 600; color: #313131; margin-bottom: 1.5rem; } /* POC 진행 프로세스 */ .process-step { display: flex; margin-bottom: 1.5rem; } .process-step:last-child { margin-bottom: 0; } .process-step > div:first-child { min-width: 32px; height: 32px; background: #1e96eb; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.875rem; font-weight: 600; margin-right: 1rem; } .process-step h4 { font-size: 1rem; font-weight: 600; color: #313131; margin-bottom: 0.25rem; } .process-step p { font-size: 0.875rem; color: #909399; margin: 0; } /* 관심 기능 선택 */ .feature-list .feature-item { border-bottom: 1px solid #e4e7ed; padding: 12px 0; } .feature-list .feature-item:last-child { border-bottom: none; } .feature-item h4 { font-size: 1rem; font-weight: 500; color: #313131; margin-bottom: 0.5rem; } .feature-item h4 i { margin-right: 8px; color: #1e96eb; } .feature-item p { font-size: 0.875rem; color: #909399; margin: 0; } /* 문의하기 */ .contact-card { background: #ffffff; border: 1px solid #e4e7ed; border-radius: 12px; padding: 24px; margin-bottom: 60px; box-shadow: 0 1px 4px rgba(0,0,0,0.08); } .contact-card h3 { font-size: 1.125rem; font-weight: 600; color: #313131; margin-bottom: 1rem; } .contact-card p { font-size: 0.875rem; color: #909399; margin-bottom: 0.25rem; } .contact-card > div > p:last-child { font-size: 1rem; color: #313131; font-weight: 500; margin: 0; } .contact-card a { color: #1e96eb; text-decoration: none; } .contact-card a:hover { color: #1e96eb; text-decoration: underline; } .contact-card > div:last-child { margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid #e4e7ed; } .contact-card > div:last-child p { font-size: 0.875rem; color: #909399; line-height: 1.5; } .field-error-message { color: #f56c6c; font-size: 0.75rem; margin-top: 2px; margin-left: 2px; display: block; } /* 신청 버튼 제출시 로딩 애니메이션 */ .loading-dots { display: inline-flex; align-items: center; margin-left: 8px; gap: 4px; } .loading-dots span { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background-color: rgba(255, 255, 255, 0.6); animation: dot-fade 1.4s infinite ease-in-out; } .loading-dots span:nth-child(1) { animation-delay: 0s; } .loading-dots span:nth-child(2) { animation-delay: 0.2s; } .loading-dots span:nth-child(3) { animation-delay: 0.4s; } @keyframes dot-fade { 0%, 60%, 100% { opacity: 0.3; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1.2); } } .btn-primary:disabled { opacity: 0.9; cursor: not-allowed; } /* Three.js Cosmos Container */ /* #cosmos-container { background: linear-gradient(135deg, #313131 0%, #313131 50%, #313131 100%); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } #cosmos-canvas { display: block; width: 100% !important; height: 100% !important; cursor: grab; } #cosmos-canvas:active { cursor: grabbing; } */