@charset "UTF-8";
@import url("common.css");

/* 전체 레이아웃 */
#wrap {width: 100%; min-height: 100vh; position: relative;}

/* 스크롤바 숨기기 */
body {scrollbar-width: none; -ms-overflow-style: none; overflow-y: auto;}

/* 부드러운 스크롤 동작 */
html {
    scroll-behavior: smooth;
}

/* 스크롤 중일 때 포인터 이벤트 비활성화 */
body.scrolling {
    pointer-events: none;
}

body.scrolling * {
    pointer-events: none;
}

/* 모바일 메뉴 열렸을 때 스크롤 방지 */
body.menu-open {
    overflow: hidden;
}

/* 스크롤 완료 후 포인터 이벤트 재활성화 */
body:not(.scrolling) {
    pointer-events: auto;
}

body:not(.scrolling) * {
    pointer-events: auto;
}

.header {width: 100%; height: 80px; background: rgba(0, 0, 0, 0.4); position: fixed; z-index: 99999;  display: flex; align-items: center;  padding: 0 40px; top: 0;}
.header .logo {display: flex; align-items: center; position: absolute; left: 5%;}
.header .logo img {height: 25px; width: auto;}
.header .menu {position: absolute; left: 50%; transform: translateX(-50%);}
.header .menu ul {display: flex; gap: 80px; margin: 0; padding: 0; list-style: none;}
.header .menu a {color: #fff; text-decoration: none; font-size: 16px; font-weight: 500; padding: 10px 0; }
.header .menu a:hover {color: #007bff;}

/* 메뉴2 */
.header.bg-white { background: #ffffff !important; box-shadow: 0 2px 10px rgba(122, 122, 122, 0.1);}
.header.bg-white .menu a {color: #333 !important;}
.header.bg-white .menu a:hover {color: #007bff !important;}

/* 컨텐츠 영역 */
.content01, .content02, .content03, .content04 {padding: 0 40px; width: 100%; height: 100vh; position: relative; display: flex; align-items: center; justify-content: center; box-sizing: border-box;}

/* 섹션 인디케이터 */
.section-indicator {position: fixed; left: 30px; top: 50%; transform: translateY(-50%); z-index: 999; display: flex; flex-direction: column; gap: 15px;}
.indicator-dot {width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(170, 170, 170, 0.5); cursor: pointer; transition: all 0.3s ease; position: relative;}
.indicator-dot:hover {background: rgba(255, 255, 255, 0.3); transform: scale(1.2);}
.indicator-dot.active {background: #2266ff; border-color: #2266ff; }
.indicator-dot::before {content: attr(data-section); position: absolute; left: 25px; top: 50%; transform: translateY(-50%); background: rgba(0, 0, 0, 0.8); color: white; padding: 5px 10px; border-radius: 4px; font-size: 12px; white-space: nowrap; opacity: 0; transition: opacity 0.3s ease; pointer-events: none;}
.indicator-dot:hover::before {opacity: 1;}

/* 컨텐츠01 - 메인 비주얼 */
.content01 {background: url('../images/main.png') center/cover no-repeat; color: white; text-align: left; z-index: 1;}
.content01::before {content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: -1;}
.content01 > div {max-width: 1400px; width: 100%; }
.content01 .main-title {font-size: 3.5rem; font-weight: 600; margin-bottom: 30px; color: white; line-height: 1.2;}
.content01 .main-title .highlight {color: #2266ff;}
.content01 .main-description {font-size: 1.2rem; margin-bottom: 50px; line-height: 1.6; max-width: 800px;}
.content01 .btn-group {display: flex; gap: 20px; justify-content: flex-start; flex-wrap: wrap;}
.content01 .btn-group a {display: inline-block; padding: 15px 30px; border-radius: 100px; text-decoration: none; font-weight: 600; font-size: 1rem; transition: all 0.3s ease; }
.content01 .btn-group .naver {background:#00000050; color: #ffffff; border: 1px solid #ffffff80;}
.content01 .btn-group .naver:hover {border: 1px solid #007bff; transform: translateY(-2px);}
.content01 .btn-group .daum {background:#00000050; color: #ffffff; border: 1px solid #ffffff80;}
.content01 .btn-group .daum:hover { border: 1px solid #007bff; transform: translateY(-2px);}


/* 컨텐츠 내부 컨테이너 */
.content02 > div, .content03 > div, .content04 > div{max-width: 1400px; width: 100%;}

/* 컨텐츠02 - 서비스 소개 */
.content02 {background: url('../images/background.png') center/cover no-repeat; color: #313131;}
.content02 .prod {max-width: 1400px;margin: 0 auto;position: relative;height: 700px;display: flex;flex-direction: column;justify-content: center;z-index: 1000;}
.content02 .prod .prod-top{display: flex;justify-content: space-between;align-items: center;margin-bottom: 16px;}
.content02 .prod .prod-top .prod-label {color: #2266ff;font-weight: 700;font-size: 1.2rem;letter-spacing: 1px;}
.content02 .prod .prod-title .prod-more{color: #222;font-size: 1rem;font-weight: 500;text-decoration: none;align-self: flex-end;}
.content02 .prod .prod-title .prod-more:hover { color: #007bff; }
.content02 .prod .prod-title {font-size: 2.2rem;font-weight: 700;margin-bottom: 40px;color: #222;display: flex;justify-content: space-between;align-items: center;}
.content02 .prod .prod-title h2 { font-size: 40px; font-weight: 500; }

.content02 .prod-container {display: flex;align-items: center;position: relative;width: 100%;margin: 0 auto;}
.content02 .prod-wrap {display: flex; align-items: center;position: relative;width: 100%;margin: 0 auto;overflow: hidden;}
.content02 .prod-list {display: flex; width: 100%;transition: transform 0.3s ease;}
.content02 .card {cursor: pointer;width: auto;flex-shrink: 0;transition: transform 0.3s ease, box-shadow 0.3s ease; margin-right: 40px;}
.content02 .card:last-child { margin-right: 0; }
.content02 .card:hover {transform: translateY(-5px); }
.content02 .card .card-image {width: 300px; height: 350px; display: flex; align-items: center; justify-content: center; overflow: hidden; border-radius: 5px;}
.content02 .card .card-image {box-shadow: 0 2px 10px rgba(0,0,0,0.08); border: 1px solid #eee; background: rgba(221, 238, 255, 0.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.2);} 
.content02 .card:hover .card-image {box-shadow: 0 8px 20px rgba(0,0,0,0.16);} 
.content02 .card .card-image img {width: 100%; height: 100%; object-fit: cover; display: block;}
.content02 .card:hover img {filter: brightness(0.8);}
.content02 .card-info {padding: 16px 12px;}
.content02 .card-name {font-size: 1.1rem;font-weight: 700;margin-bottom: 4px;}
.content02 .card-desc {font-size: 1rem;color: #444;font-weight: 600;}

.content02 .arrow {background: #fff;border: 1px solid #ddd;border-radius: 50%;width: 48px;height: 48px;
        display: flex;align-items: center;justify-content: center;font-size: 2rem;color: #9b9b9b;box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        cursor:pointer; position: absolute;z-index: 10;top: 40%;transform: translateY(-50%);opacity: 0.7;}
.content02 .arrow.left { left: -24px; }
.content02 .arrow.right { right: -24px; }
.content02 .arrow:hover { border: 1px solid #333; color: #333;}

/* 스크롤 인디케이터 */
.content02 .scroll-indicator {display: flex;justify-content: flex-end;margin-top: 40px;padding-right: 60px;}
.content02 .scroll-track {width: 150px;height: 4px;background: rgba(0,0,0,0.15);border-radius: 4px;position: relative;overflow: hidden;}
.content02 .scroll-thumb {height: 100%;background: #8a8a8a;border-radius: 4px;transition: width 0.3s ease;box-shadow: 0 1px 3px rgba(0,0,0,0.3);}

/* 컨텐츠03 - 기술 소개 */
.content03 {background: #f8f9fa; color: #313131;}
.content03 .notice {max-width: 1400px; margin: 0 auto; position: relative;height: 700px;display: flex;flex-direction: column;justify-content: center;}
.content03 .notice-top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;}
.content03 .notice-label {color: #2266ff; font-weight: 700; font-size: 1.2rem; letter-spacing: 1px;}
.content03 .notice-title {font-size: 2.2rem; font-weight: 700; margin-bottom: 40px; color: #222; display: flex; justify-content: space-between; align-items: center;}
.content03 .notice-title h2 {font-size: 40px; font-weight: 500;}
.content03 .notice-more {color: #222; font-size: 1rem; font-weight: 500; text-decoration: none; align-self: flex-end;}
.content03 .notice-more:hover {color: #007bff;}

.content03 .notice-container {display: flex; gap: 60px; align-items: flex-start;}
.content03 .notice-content {flex: 1; position: relative;}
.content03 .notice-list {margin-bottom: 30px;}
.content03 .notice-table {width: 100%; border-collapse: collapse;}
.content03 .notice-table th {padding: 15px 0; border-bottom: 2px solid #e0e0e0; text-align: left; font-weight: 600; color: #333; font-size: 1rem;}
.content03 .notice-table tbody {border-top: 2px solid #333;}
.content03 .notice-table td {padding: 20px 0; border-bottom: 1px solid #e0e0e0; vertical-align: bottom;}
.content03 .notice-table tr:last-child td {border-bottom: none;}
.content03 .notice-title-header {width: 80%;}
.content03 .notice-date-header {width: 20%; text-align: center;}
.content03 .notice-text {padding-right: 20px;}
.content03 .notice-link {text-decoration: none; color: inherit; display: block; }
.content03 .notice-subtitle {font-size: 1.1rem; font-weight: 600; color: #222; margin: 0 0 8px 0; line-height: 1.4;}
.content03 .notice-content {font-size: 1rem; line-height: 1.6; color: #333; margin: 0;}
.content03 .notice-date {font-size: 0.9rem; color: #666; font-weight: 500; white-space: nowrap; text-align: center;}
.content03 .notice-pagination {display: flex; gap: 8px; margin-top: 20px;}
.content03 .pagination-dot {width: 12px; height: 12px; border-radius: 50%; background: #ddd; cursor: pointer; transition: background 0.3s ease;}
.content03 .pagination-dot.active {background: #2266ff;}
.content03 .notice-image { position: relative;}

.content03 .image-container {position: relative; border-radius: 8px; overflow: hidden;}
.content03 .image-container img {width: 295px; height: 400px; display: block;}
.content03 .image-controls {position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); display: flex; justify-content: space-between; padding: 0 20px; pointer-events: none;}
.content03 .image-arrow {background: rgba(255, 255, 255, 0.5); border: none; border-radius: 50%; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; color: #747474; cursor: pointer; pointer-events: auto; transition: all 0.3s ease;}
.content03 .image-arrow:hover {background: #fff; transform: scale(1.1);}
.content03 .image-arrow.disabled {background: rgba(255, 255, 255, 0.2); color: #ccc; cursor: default; opacity: 0.5;}
.content03 .image-arrow.disabled:hover {background: rgba(255, 255, 255, 0.2); transform: none;}




/* 컨텐츠04 - CONTACT US */
.content04 {background: url('../images/bg02.png') center/cover no-repeat; color: white; }
.content04 .contact {max-width: 1400px; margin: 0 auto; position: relative;height: 700px;display: flex;flex-direction: column;justify-content: flex-start;padding-top: 70px; box-sizing: border-box;}
.content04 .contact-top {display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;}
.content04 .contact-label {color: #ffffff; font-weight: 700; font-size: 1.2rem; letter-spacing: 1px;}
.content04 .contact-title {font-size: 2.2rem; font-weight: 700; margin-bottom: 40px; color: #fff; display: flex; justify-content: space-between; align-items: center;}
.content04 .contact-title h2 {font-size: 40px; font-weight: 500; color: #ffffff;}
.content04 .contact-form {max-width: 450px; width: 100%; background: rgba(255, 255, 255, 0.1); backdrop-filter: blur(10px); border-radius: 10px; padding: 50px; border: 1px solid rgba(255, 255, 255, 0.2); margin: 0 auto; display: block; position: absolute; top: 55%; left: 50%; transform: translate(-50%, -50%);}

.content04 .form-content {display: flex; flex-direction: column; gap: 25px;}
.content04 .form-group {display: flex; flex-direction: column; gap: 8px;}
.content04 .form-group label {color: #ffffff; font-size: 1rem; font-weight: 600;}
.content04 .form-group input, .content04 .form-group textarea {padding: 15px; border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 8px; background: rgba(255, 255, 255, 0.1); color: #ffffff; font-size: 1rem; transition: all 0.3s ease;}
.content04 .form-group input::placeholder, .content04 .form-group textarea::placeholder {color: rgba(255, 255, 255, 0.6);}
.content04 .form-group input:focus, .content04 .form-group textarea:focus {outline: none; border-color: #007bff; background: rgba(255, 255, 255, 0.15);}
.content04 .form-group textarea {resize: vertical; min-height: 120px;}

.content04 .submit-btn {padding: 15px 30px; background: #007bff; color: #ffffff; border: none; border-radius: 8px; font-size: 1.1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; margin-top: 10px;}
.content04 .submit-btn:hover {background: #0056b3; transform: translateY(-2px);}


/* 푸터 스타일 */
.footer { background-color: #818181; color: #fff; padding: 40px 0 20px 0; position: relative; z-index: 10;}
.footer .footer-content { max-width: 1400px; margin: 0 auto; padding: 0 20px;}
.footer .footer-info { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px;}
.footer .company-info h3 { font-size: 1.5rem; font-weight: 700; margin-bottom: 15px; color: #fff;}
.footer .company-info h3 img { height: 25px; width: auto; display: block;}
.footer .ceo-phone { display: flex; gap: 20px; margin-bottom: 8px; flex-wrap: wrap;}
.footer .ceo-phone span { font-size: 0.9rem; color: #e0e0e0;}
.footer .company-info p { margin: 8px 0; font-size: 0.9rem; line-height: 1.4; color: #e0e0e0;}
.footer .footer-links { display: flex; gap: 20px;}
.footer .footer-links a { color: #e0e0e0; text-decoration: none; font-size: 0.9rem; transition: color 0.3s ease;}
.footer .footer-links a:hover { color: #fff;}
.footer .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.2); padding-top: 20px; text-align: center;}
.footer .footer-bottom p { font-size: 0.8rem; color: #ccc; margin: 0;}



/* **********모바일 햄버거 메뉴 ********** */
.mobile-menu-toggle {display: none; flex-direction: column; justify-content: space-between; width: 30px; height: 25px; background: transparent; border: none; cursor: pointer; padding: 0; z-index: 1000;}

.mobile-menu-toggle span {width: 100%; height: 3px; background: #fff; border-radius: 3px; transition: all 0.3s ease; transform-origin: center;}
.mobile-menu-toggle.active span:nth-child(1) {transform: rotate(45deg) translate(6px, 6px);}
.mobile-menu-toggle.active span:nth-child(2) {opacity: 0;}
.mobile-menu-toggle.active span:nth-child(3) {transform: rotate(-45deg) translate(6px, -6px);}
.mobile-menu {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.95); z-index: 2000; flex-direction: column; justify-content: center; align-items: center; opacity: 0; transition: opacity 0.3s ease;}
.mobile-menu.active {display: flex; opacity: 1;}
.mobile-menu ul {list-style: none; padding: 0; margin: 0; text-align: center;}
.mobile-menu li {margin: 20px 0;}
.mobile-menu a {color: #fff; text-decoration: none; font-size: 1.5rem; font-weight: 500; padding: 15px 30px; display: block; transition: all 0.3s ease;}
.mobile-menu a:hover {color: #007bff; transform: scale(1.1);}

/* 모바일 반응형 디자인 */
@media (max-width: 1200px) {
    .header {padding: 0px 30px; height: 70px;}
    .header .logo {left: 30px;}
    .header .logo img {height: 20px;}
    .header .menu {display: none;}
    .mobile-menu-toggle {display: flex; margin-left: auto; margin-right: 40px;}
    .header.bg-white .mobile-menu-toggle span {background: #333;}
    
    /* 모바일에서 인디케이터 숨기기 */
    .section-indicator {display: none;}
    .content01 .main-title {font-size: 2rem; margin-bottom: 20px;}
    .content01 .main-description {font-size: 0.9rem; margin-bottom: 30px;}
    .content01 .btn-group {flex-direction: column; gap: 15px;}
    .content01 .btn-group a {padding: 12px 25px; font-size: 0.9rem; text-align: center;}
    .content01, .content02, .content03, .content04 {height: auto; min-height: 100vh; padding: 80px 20px 40px;}
    .content01 > div, .content02 > div, .content03 > div, .content04 > div {padding: 0;}
    .content02 .prod {height: auto; padding: 40px 0;}
    .content02 .prod .prod-title h2 {font-size: 28px;}
    .content02 .prod .prod-title {font-size: 1.8rem; margin-bottom: 30px; flex-direction: column; gap: 15px; align-items: flex-start;}
    .content02 .arrow {width: 40px; height: 40px; font-size: 1rem;}
    .content02 .arrow.left {left: 10px;}
    .content02 .arrow.right {right: 10px;}
    .content02 .card {width: auto;} 
    .content02 .card .card-image {width: 250px; height: 300px;}
    .content02 .card .card-image img {width: 100%; height: 100%; object-fit: cover;}
    .content02 .card-info {padding: 12px 0;}
    .content02 .card-name {font-size: 1rem;}
    .content02 .card-desc {font-size: 0.9rem;}
    .content03 .notice {height: auto; padding: 40px 0;}
    .content03 .notice-title h2 {font-size: 28px;}
    .content03 .notice-title {font-size: 1.8rem; margin-bottom: 30px; flex-direction: column; gap: 15px; align-items: flex-start;}
    .content03 .notice-container {flex-direction: column; gap: 30px;}
    .content03 .notice-table {font-size: 0.9rem;}
    .content03 .notice-table th, .content03 .notice-table td {padding: 12px 8px;}
    .content03 .notice-subtitle {font-size: 1rem;}
    .content03 .notice-content {font-size: 0.9rem; width: 100%;}
    .content03 .notice-image {display: none;}
    .content03 .image-container {display: none;}
    .content03 .image-container img {height: 250px;}
    .content03 .image-arrow {width: 35px; height: 35px; font-size: 1rem;}
    .content04 .contact {height: auto; padding: 40px 0;}
    .content04 .contact-title h2 {font-size: 28px;}
    .content04 .contact-title {font-size: 1.8rem; margin-bottom: 30px; flex-direction: column; gap: 15px; align-items: flex-start;}
    .content04 .contact-form {position: relative; top: auto; left: auto; transform: none; margin: 30px auto 0; padding: 30px 20px; max-width: 100%; width: calc(100% - 40px);}
    .content04 .form-content {gap: 20px;}
    .content04 .form-group input, .content04 .form-group textarea {padding: 12px; font-size: 0.9rem;}
    .content04 .submit-btn {padding: 12px 25px; font-size: 1rem;}
    .footer {padding: 30px 0 15px 0;}
    .footer .footer-content {padding: 0 20px;}
    .footer .footer-info {flex-direction: column; gap: 20px; margin-bottom: 20px;}
    .footer .company-info h3 {font-size: 1.3rem; margin-bottom: 12px;}
    .footer .company-info h3 img {height: 20px;}
    .footer .ceo-phone {flex-direction: row; gap: 15px;  flex-wrap: wrap;}
    .footer .ceo-phone span {font-size: 0.85rem;}
    .footer .company-info p {font-size: 0.85rem; margin: 6px 0;}
    .footer .footer-links {flex-direction: row; gap: 15px; flex-wrap: wrap;}
    .footer .footer-links a {font-size: 0.85rem;}
    .footer .footer-bottom {padding-top: 15px;}
    .footer .footer-bottom p {font-size: 0.75rem;}
}

/* 태블릿 반응형 */
@media (max-width: 1024px) and (min-width: 769px) {
    .header {padding: 0 30px;}
    .content04 .contact-form {max-width: 400px; padding: 40px;}
}

/* 작은 모바일 화면 */
@media (max-width: 480px) {
    .header {padding: 0 15px; height: 60px;}
    .header .logo {left: 15px;}
    .header .logo img {height: 18px;}
    .mobile-menu-toggle {right: 15px; width: 25px; height: 20px;}
    .content01, .content02, .content03, .content04 {padding: 70px 15px 30px;}
    .content01 .main-title {font-size: 2rem;}
    .content01 .main-description {font-size: 0.9rem;}
    .content02 .prod .prod-title h2, .content03 .notice-title h2, .content04 .contact-title h2 {font-size: 24px;}
    .content02 .prod .prod-title, .content03 .notice-title, .content04 .contact-title {font-size: 1.5rem;}
    .content02 .card {width: auto;} 
    .content02 .card .card-image {width: 250px; height: 300px;}
    .content02 .card .card-image img {width: 100%; height: 100%; object-fit: cover;}
    .content03 .notice-content {display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4;}
    .content03 .image-container img {height: 200px;}
    .content04 .contact-form {padding: 25px 15px; width: calc(100% - 30px);}
    .footer .footer-content {padding: 0 15px;}
}