@charset "UTF-8"; /* 메인페이지 전용 CSS (style.css) */ .inner{box-sizing:border-box;} /* main01: 메인 비주얼 섹션 */ #main01 {background: linear-gradient(180deg, #E8F4FF 0%, #FFFFFF 100%); height:80vh;padding: 60px 0; position: relative; overflow: hidden; width:97%; margin:0 auto; border-radius:24px; margin-top:1vh; overflow: hidden;box-sizing:border-box;} #main01 .inner {display: flex; align-items: center; justify-content: space-between; gap: 80px;} #main01 .title {flex: 1; max-width: 700px; opacity: 0; transform: translateY(30px); animation: fadeInUp 0.8s ease forwards;} #main01 .title .badge {display: inline-block; background: #293aaf; color: #fff; font-size: 14px; font-weight: 500; padding: 8px 20px; border-radius: 20px; margin-bottom: 24px; animation: bounceIn 0.8s ease 0.3s both;} #main01 .title h2 {font-size: 52px; font-weight: 700; line-height: 1.3; margin-bottom: 24px; color: #1a1a1a;} #main01 .title h2 strong {color: #293aaf; display: inline-block; animation: colorPulse 2s ease infinite;} #main01 .title .sub {font-size: 18px; color: #666; line-height: 1.8;} #main01 .visual {flex: 1; max-width: 820px;margin-right:5%; opacity: 0; transform: translateX(50px); animation: fadeInRight 0.8s ease 0.2s forwards;} #main01 .visual img {width: 120%; height: auto; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.1)); transition: transform 0.5s ease;} #main01 .visual:hover img {transform: scale(1.05) translateY(-10px);} /* main02: SINCE 2010 섹션 */ #main02 {background:url(../../../image/bg-main-section02.jpg) no-repeat 50% / cover; position: relative; overflow: hidden;}w #main02::before {content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 1px, transparent 1px); background-size: 50px 50px; animation: gridMove 20s linear infinite; pointer-events: none;} #main02 .inner {display: flex; align-items: center; justify-content: space-between; gap: 20px; position: relative; z-index: 2; box-sizing:border-box} #main02 .ctn {width: 40%; color: #fff;} #main02 .ctn .sub {font-size: 18px; color: rgba(255,255,255,0.9); font-weight: 300; animation: fadeIn 0.8s ease;} #main02 .ctn h2 {font-size:5vw; font-weight: 900; letter-spacing: -2px; margin-bottom:8px; text-shadow: 0 4px 12px rgba(0,0,0,0.2); animation: scaleIn 0.8s ease 0.2s both;} #main02 .ctn .history {display: flex; gap: 8px; flex-wrap: wrap;} #main02 .ctn .history li {font-size: 15px; font-weight: 500; padding: 10px 24px; background: rgba(255,255,255,0.2); backdrop-filter: blur(10px); border-radius: 30px; border: 1px solid rgba(255,255,255,0.3); animation: slideInUp 0.6s ease both; transition: all 0.3s ease;} #main02 .ctn .history li:nth-child(1) {animation-delay: 0.4s;} #main02 .ctn .history li:nth-child(2) {animation-delay: 0.5s;} #main02 .ctn .history li:nth-child(3) {animation-delay: 0.6s;} #main02 .ctn .history li:hover {background: rgba(255,255,255,0.3); transform: translateY(-5px); box-shadow: 0 8px 20px rgba(0,0,0,0.2);} #main02 .trophy {width: 20%;animation: float 3s ease-in-out infinite; } #main02 .trophy img {width: 100%; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.3));transform:translate(0,80px)} #main02 .bg-text {width:40%; z-index: 1;text-align: center; color: #fff; font-size:26px;} #main02 .bg-text h3{font-weight:bold;} #main02 .bg-text p {font-size: 17px; text-align: center; line-height: 1.8; margin-top:1em;} /* main03: 고객 감사 이벤트 섹션 */ #main03 {position: relative;width:97%; margin:1.5% auto ; background:#55a9ff; padding: 100px 0; position: relative; border-radius:24px; overflow: hidden;} #main03 .inner {display: flex; align-items: stretch; gap: 80px;} #main03 .event-box {flex: 1; border-radius: 28px; padding: 24px; transition: transform 0.3s ease; box-sizing:border-box;} #main03 .event-box:hover {transform: translateY(-10px);} #main03 .event-box .sub {font-size: 17px; color: #fff; font-weight: 600; margin-bottom: 6px; text-align: center;} #main03 .event-box h2 {font-size:54px; font-weight: 700; color: #fff; margin-bottom: 24px; line-height: 1.4; text-align: center;} #main03 .benefit-list {display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px;} #main03 .benefit-list li {background:#fff; color: #333; padding: 40px; border-radius: 20px; text-align: center; box-shadow: 0 8px 24px rgba(102,126,234,0.3); transition: all 0.4s ease; position: relative; overflow: hidden;} #main03 .benefit-list li::before {content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%); transform: scale(0); transition: transform 0.6s ease;} #main03 .benefit-list li:hover::before {transform: scale(1);} #main03 .benefit-list li:hover {transform: translateY(-8px) scale(1.02); box-shadow: 0 15px 40px rgba(102,126,234,0.5);} #main03 .benefit-list li strong {display: block; font-size:18px; font-weight:600; margin-bottom: 14px; opacity: 0.9;} #main03 .benefit-list li .value {display: block; font-size:42px; font-weight: 700; animation: numberPulse 2s ease infinite; color: #55a9ff;} #main03 .benefit-list li .highlight {display: block; font-size: 32px; font-weight: 700; background: rgba(255,255,255,0.2); color: #55a9ff; padding: 10px; border-radius: 10px;} #main03 .form-box {position: relative; z-index: 1;flex: 1;border-radius: 28px; padding: 60px;position: relative; background: #fff; border:30px solid #eee} #main03 .form-box h3 {font-size: 28px; font-weight: 400; line-height: 1.2; margin-bottom: 35px; color: #333; text-align: center;} #main03 .form-box h3 strong {display: block; font-size: 34px; font-weight: 700; color: #293aaf; margin-top:4px;} #main03 .form-box form {position: relative; z-index: 2;} #main03 .form-box .form-group {margin-bottom: 24px;} #main03 .form-box .form-group label {display: block; font-size: 15px; font-weight: 600; color: #333; margin-bottom: 10px;} #main03 .form-box .form-group input {width: 100%; padding: 16px 20px; border: 2px solid #E5E7EB; border-radius: 12px; font-size: 16px; transition: all 0.3s; box-sizing:border-box} #main03 .form-box .form-group input:focus {outline: none; border-color: #293aaf; box-shadow: 0 0 0 4px rgba(74,144,226,0.1); transform: translateY(-2px);} #main03 .form-box .form-group input::placeholder {color: #9CA3AF;} #main03 .form-box .btn-check {width: 100%; padding: 18px; background:#293aaf; color: #fff; font-size: 17px; font-weight: 700; border-radius: 12px; margin-top: 12px; transition: all 0.3s; box-shadow: 0 4px 16px rgba(102,126,234,0.4); position: relative; overflow: hidden; border:none} #main03 .form-box .btn-check::before {content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.3); transform: translate(-50%, -50%); transition: width 0.6s, height 0.6s;} #main03 .form-box .btn-check:hover::before {width: 300px; height: 300px;} #main03 .form-box .btn-check:hover {transform: translateY(-2px); box-shadow: 0 6px 24px rgba(102,126,234,0.5);} #main03 .form-check {margin-bottom: 28px; display: flex; align-items: center; gap: 10px;} #main03 .form-check input[type="checkbox"] {width: 22px; height: 22px; cursor: pointer;} #main03 .form-check label {font-size: 15px; color: #666; cursor: pointer; margin: 0;} #main03 .link-detail {color: #293aaf; text-decoration: underline; font-weight: 500; transition: color 0.3s; background: none; border: none; padding: 0; cursor: pointer;} #main03 .link-detail:hover {color: #2D4A9E;} #main03 .hand-img {position: absolute;width:65%; bottom:-40%; right:7%; z-index: 0; pointer-events: none;} #main03 .hand-img img{width:100%;} /* main04: 카드뉴스 섹션 */ #main04 {padding: 100px 0; background: #fff; position: relative;} #main04::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml,'); pointer-events: none;} #main04 .title {text-align: center; margin-bottom: 36px;} #main04 .title h2 {font-size: 48px; font-weight: 700; color: #1a1a1a; margin-bottom: 20px;} #main04 .title p {font-size: 18px; color: #666; line-height: 1.6;} #main04 .cardSwiper {padding: 20px 30px 70px;} #main04 .card-item {background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 20px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative;} #main04 .card-item::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(135deg, rgba(74,144,226,0.1) 0%, transparent 50%); opacity: 0; transition: opacity 0.4s ease; z-index: 1; pointer-events: none;} #main04 .card-item:hover::before {opacity: 1;} #main04 .card-item:hover {transform: translateY(-12px) scale(1.02); box-shadow: 0 20px 50px rgba(0,0,0,0.2);} #main04 .card-img {position: relative; padding-top: 66.67%; overflow: hidden;} #main04 .card-img img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease;} #main04 .card-item:hover .card-img img {transform: scale(1.1);} #main04 .card-img .badge {position: absolute; top: 20px; left: 20px; background: rgba(74,144,226,0.95); color: #fff; font-size: 13px; font-weight: 600; padding: 8px 16px; border-radius: 20px; backdrop-filter: blur(10px); animation: badgePulse 2s ease infinite;} #main04 .card-info {padding: 28px; position: relative; z-index: 2;} #main04 .card-info h2 {font-size: 17px; font-weight:bold; line-height: 1.5; color: #333; transition: color 0.3s ease;} #main04 .card-info>p{color: #444;} #main04 .card-item:hover .card-info h2 {color: #293aaf;} #main04 .card-info .card-info-detail{padding-top:12px;margin-top:12px;font-size:14px; border-top: 1px solid #ddd;color: #444;} #main04 .card-info .card-info-detail h3{font-weight:bold;} #main04 .swiper-pagination {position: relative; margin-top: 40px;} #main04 .swiper-pagination-bullet {width: 12px; height: 12px; background: #D1D5DB; opacity: 1; transition: all 0.3s ease;} #main04 .swiper-pagination-bullet-active {background: #293aaf; width: 36px; border-radius: 6px;} /* main05: 지역파트너 모집 섹션 */ #main05 {width:97%; margin:0 auto;height:80vh;border-radius:24px;background: linear-gradient(rgba(0,0,0,0.1), rgba(0,0,0,0.1)), url('../../../image/bg-main-section05.jpg') center/cover no-repeat; text-align: center; position: relative; overflow: hidden; box-sizing:border-box;} #main05 .inner{height:100%;display:flex; justify-content:center; align-content:center; align-items:center; } #main05::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(45deg, transparent 30%, rgba(74,144,226,0.1) 50%, transparent 70%); animation: shimmer 3s ease-in-out infinite;} #main05 .ctn span{display: inline-block;color: #fff; margin-bottom:16px;} #main05 .ctn span strong{font-weight:bold;} #main05 .ctn h2 {font-size: 52px; font-weight: 700; color: #fff; line-height: 1.4; margin-bottom: 50px; text-shadow: 0 2px 8px rgba(0,0,0,0.3); animation: fadeInUp 0.8s ease;} #main05 .btn-apply {display: inline-block; background: #293aaf; color: #fff; font-size: 20px; font-weight: 700; padding: 20px 60px; border-radius: 50px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 8px 24px rgba(74,144,226,0.4); position: relative; overflow: hidden; z-index: 1;} #main05 .btn-apply::before {content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; border-radius: 50%; background: rgba(255,255,255,0.1); transform: translate(-50%, -50%); transition: width 0.6s ease, height 0.6s ease; z-index: -1;} #main05 .btn-apply:hover::before {width: 400px; height: 400px;} #main05 .btn-apply:hover {background: #3A7BC8; transform: translateY(-5px) scale(1.05); box-shadow: 0 15px 40px rgba(74,144,226,0.6);} /* main06: 고객센터 안내 섹션 */ #main06 {padding: 140px 0; background: #F9FAFB;} #main06 .title {text-align: center; margin-bottom: 80px;} #main06 .title h2 {font-size: 48px; font-weight: 700; color: #1a1a1a; margin-bottom: 20px; line-height: 1.4;} #main06 .title p {font-size: 18px; color: #666; line-height: 1.8;} #main06 .title ul{margin-top:0.7em;} #main06 .title ul li{display: inline-block; background:#222; color: #fff; border-radius:100px; overflow: hidden; padding:8px 20px;} #main06 .contact-list {display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; margin-bottom: 60px;} #main06 .contact-item {background: #fff; padding: 50px 40px; border-radius: 20px; text-align: center; box-shadow: 0 2px 16px rgba(0,0,0,0.06); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden;} #main06 .contact-item::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 4px; background: linear-gradient(90deg, #293aaf, #667eea); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease;} #main06 .contact-item:hover::before {transform: scaleX(1);} #main06 .contact-item:hover {transform: translateY(-10px); box-shadow: 0 15px 40px rgba(0,0,0,0.15);} #main06 .contact-item .icon {width: 70px; height: 70px;padding:16px; margin: 0 auto 24px; background: #E8F4FF; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.4s ease;} #main06 .contact-item:hover .icon {background: #293aaf; transform: rotateY(360deg);} #main06 .contact-item .icon img {width: 80%;transition: filter 0.3s ease;} #main06 .contact-item:hover .icon img {filter: brightness(0) invert(1);} #main06 .contact-item .label {display: block; font-size: 15px; color: #999; margin-bottom: 10px;} #main06 .contact-item .value {display: block; font-size: 22px; font-weight: 700; color: #1a1a1a; margin-bottom: 8px; transition: color 0.3s ease;} #main06 .contact-item:hover .value {color: #293aaf;} #main06 .contact-item .sub {font-size: 14px; color: #666; margin-top: 10px;} #main06 .sns-links {display: flex; justify-content: center; gap: 24px;} #main06 .sns-item {width: 64px; height: 64px; display: flex; align-items: center; justify-content: center; background: #fff; border-radius: 50%; box-shadow: 0 2px 12px rgba(0,0,0,0.08); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative;} #main06 .sns-item::before {content: ''; position: absolute; inset: -4px; border-radius: 50%; background: linear-gradient(135deg, #293aaf, #667eea); opacity: 0; transition: opacity 0.3s ease; z-index: -1;} #main06 .sns-item:hover::before {opacity: 1;} #main06 .sns-item:hover {transform: translateY(-8px) rotate(5deg); box-shadow: 0 10px 30px rgba(74,144,226,0.3);} #main06 .sns-item img {width: 32px; height: 32px;} /* main07: 상담 신청 폼 섹션 */ #main07 {padding: 140px 0; background: #fff;} #main07 .inner {display: flex; gap: 80px; align-items: stretch;} #main07 .bg-area {flex: 1; background:url(../../../image/bg-main-section07.jpg) no-repeat 50% / cover; border-radius: 28px; padding: 80px 60px; color: #fff; display: flex; flex-direction: column; justify-content: center;} #main07 .bg-area h2 {font-size: 56px; font-weight: 700; margin-bottom: 24px;} #main07 .bg-area p {font-size: 20px; line-height: 1.8; opacity: 0.95;} #main07 .form-area {flex: 1; background: #F9FAFB; border-radius: 28px; padding: 60px;box-sizing:border-box} #main07 .form-area .form-group {margin-bottom: 28px;} #main07 .form-area .form-group label {display: block; font-size: 15px; font-weight: 600; color: #333; margin-bottom: 10px;} #main07 .form-area .form-group input, #main07 .form-area .form-group textarea {width: 100%; padding: 16px 20px; border: 2px solid #E5E7EB; border-radius: 12px; font-size: 16px; background: #fff; transition: border-color 0.3s;box-sizing:border-box} #main07 .form-area .form-group input:focus, #main07 .form-area .form-group textarea:focus {outline: none; border-color: #667eea;} #main07 .form-area .form-group input::placeholder, #main07 .form-area .form-group textarea::placeholder {color: #9CA3AF;} #main07 .form-area .form-group textarea {resize: vertical; min-height: 120px;} #main07 .form-area .form-check {margin-bottom: 28px; display: flex; align-items: center; gap: 10px;} #main07 .form-area .form-check input[type="checkbox"] {width: 22px; height: 22px; cursor: pointer;} #main07 .form-area .form-check label {font-size: 15px; color: #666; cursor: pointer; margin: 0;} #main07 .form-area .btn-submit {width: 100%; padding: 18px; background: #293aaf; color: #fff; font-size: 17px; font-weight: 700; border-radius: 12px; transition: transform 0.2s, box-shadow 0.3s; box-shadow: 0 4px 16px rgba(102,126,234,0.4); border:none;cursor: pointer;} #main07 .form-area .btn-submit:hover {transform: translateY(-2px); box-shadow: 0 6px 24px rgba(102,126,234,0.5);} #main07 .link-detail {color: #293aaf; text-decoration: underline; font-weight: 500; transition: color 0.3s; background: none; border: none; padding: 0; cursor: pointer;} #main07 .link-detail:hover {color: #2D4A9E;} /* 애니메이션 정의 */ @keyframes fadeInUp {from {opacity: 0; transform: translateY(30px);} to {opacity: 1; transform: translateY(0);}} @keyframes fadeInRight {from {opacity: 0; transform: translateX(50px);} to {opacity: 1; transform: translateX(0);}} @keyframes fadeIn {from {opacity: 0;} to {opacity: 1;}} @keyframes bounceIn {0% {opacity: 0; transform: scale(0.3);} 50% {opacity: 1; transform: scale(1.05);} 70% {transform: scale(0.9);} 100% {transform: scale(1);}} @keyframes colorPulse {0%, 100% {color: #293aaf;} 50% {color: #667eea;}} @keyframes scaleIn {from {opacity: 0; transform: scale(0.8);} to {opacity: 1; transform: scale(1);}} @keyframes slideInUp {from {opacity: 0; transform: translateY(20px);} to {opacity: 1; transform: translateY(0);}} @keyframes float {0%, 100% {transform: translateY(0);} 50% {transform: translateY(-20px);}} @keyframes gridMove {0% {transform: translate(0, 0);} 100% {transform: translate(50px, 50px);}} @keyframes numberPulse {0%, 100% {transform: scale(1);} 50% {transform: scale(1.1);}} @keyframes handWave {0%, 100% {transform: rotate(0deg);} 25% {transform: rotate(10deg);} 75% {transform: rotate(-10deg);}} @keyframes badgePulse {0%, 100% {box-shadow: 0 0 0 0 rgba(74,144,226,0.7);} 50% {box-shadow: 0 0 0 10px rgba(74,144,226,0);}} @keyframes shimmer {0% {transform: translateX(-100%);} 100% {transform: translateX(100%);}} @media (max-width: 1280px) { #main03 .inner {gap: 20px;} #main03 .event-box{flex:1.5;} #main03 .benefit-list li .value{font-size:30px;} #main03 .form-box{border:20px solid #eee} #main01 .title h2{font-size:40px;} #main01{height:55vh;} } /* 태블릿 반응형 */ @media (max-width: 1024px) { #main01 {padding: 100px 0; height:70vh;} #main01 .title h2 {font-size: 40px;} #main01 .inner {gap: 50px;} #main02 {padding: 60px 0;} #main02 .ctn{width: 100%;} #main02 .ctn h2 {font-size: 70px;} #main02 .trophy {width: 140%;} #main02 .bg-text br{display: none;} #main02 .bg-text{width: 100%; text-align:right;} #main02 .bg-text p{text-align:right;} #main02 .inner {gap: 60px;} #main03 {padding: 100px 0;} #main03 .benefit-list li {padding:16px 0;} #main03 .benefit-list li strong{margin-bottom:4px;} #main03 .inner {flex-direction: column;} #main03 .event-box, #main03 .form-box {width: 100%; box-sizing:border-box;} #main04 {padding: 100px 0;} #main04 .title h2 {font-size: 40px;} #main05 {padding: 120px 0;} #main06 {padding: 100px 0;} #main06 .contact-list {grid-template-columns: repeat(2, 1fr);} #main07 {padding: 100px 0;} #main07 .inner {flex-direction: column;} } /* 모바일 반응형 */ @media (max-width: 768px) { #main01 {padding: 60px 0;height:90vh;} #main01 .visual img{width: 100%;} #main01 .inner {flex-direction: column; text-align: center;} #main01 .title {max-width: 100%;} #main01 .title h2 {font-size: 28px;} #main01 .title .sub {font-size: 14px;} #main01 .visual {max-width: 320px; margin: 0 auto;} #main02 {padding: 80px 0;} #main02 .inner {flex-direction: column; text-align: center; gap: 30px;} #main02 .ctn h2 {font-size: 48px;} #main02 .trophy {width: 80%; margin-top:-10vh;} #main02 .ctn .history {justify-content: center;font-size: 14px;} #main02 .bg-text {text-align: center;} #main02 .bg-text p {font-size: 16px; text-align:center;} #main03 {padding: 60px 0;} #main03 .event-box, #main03 .form-box {padding: 50px 20px;} #main03 .event-box h2 {font-size: 26px; text-align: center;} #main03 .event-box .sub{text-align:center;} #main03 .benefit-list {grid-template-columns: 1fr; gap: 15px;} #main03 .form-box h3 {font-size: 20px; text-align: center; margin-bottom:16px;} #main03 .form-box h3 strong {font-size: 24px;} #main03 .form-box .hand-img {width: 150px; right: -10px; bottom: -10px;} #main04 {padding: 60px 0;} #main04 .title h2 {font-size: 28px;} #main04 .title p {font-size: 14px;} #main04 .cardSwiper {padding: 10px 10px 50px;} #main05 {padding: 80px 0; height:50vh;} #main05 .ctn h2 {font-size: 28px; margin-bottom: 30px;} #main05 .btn-apply {font-size: 16px; padding: 14px 40px;} #main06 {padding: 60px 0;} #main06 .title h2 {font-size: 32px;} #main06 .title p {font-size: 16px;} #main06 .contact-list {grid-template-columns: 1fr; gap: 20px;} #main06 .contact-item {padding: 30px 20px;} #main06 .sns-links {gap: 15px;} #main07 {padding: 60px 0;} #main07 .bg-area {padding: 40px 30px;} #main07 .bg-area h2 {font-size: 32px;} #main07 .bg-area p {font-size: 16px;} #main07 .form-area {padding: 30px 20px;} #main06 .title ul li{font-size:12px;} }