@font-face { font-family: 'S-CoreDream'; src: url('/src/font/SCDream1.otf') format('opentype'); font-weight: 100; } /* Thin (100) */
@font-face { font-family: 'S-CoreDream'; src: url('/src/font/SCDream2.otf') format('opentype'); font-weight: 200; } /* ExtraLight (200) */
@font-face { font-family: 'S-CoreDream'; src: url('/src/font/SCDream3.otf') format('opentype'); font-weight: 300; } /* Light (300) */
@font-face { font-family: 'S-CoreDream'; src: url('/src/font/SCDream4.otf') format('opentype'); font-weight: 400; } /* Regular (400) */
@font-face { font-family: 'S-CoreDream'; src: url('/src/font/SCDream5.otf') format('opentype'); font-weight: 500; } /* Medium (500) */
@font-face { font-family: 'S-CoreDream'; src: url('/src/font/SCDream6.otf') format('opentype'); font-weight: 700; } /* Bold (700) */
@font-face { font-family: 'S-CoreDream'; src: url('/src/font/SCDream7.otf') format('opentype'); font-weight: 800; } /* ExtraBold (800) */
@font-face { font-family: 'S-CoreDream'; src: url('/src/font/SCDream8.otf') format('opentype'); font-weight: 900; } /* Heavy (900) */

* {margin:0;padding:0;box-sizing:border-box;font-family:'S-CoreDream',sans-serif;}
body {background-color:#fff;}

section { padding: 55px 0; margin: 0 auto; width: 100%;}
.sub-section { padding: 30px; }

input:disabled {
    background-color: #f5f5f5;  /* 연한 회색 배경 */
    color: #999;               /* 텍스트도 회색으로 */
    cursor: not-allowed;       /* 마우스 오버 시 비활성 느낌 */
}

/*글로벌변수설정*/
:root {--accent-color:#ff9800;--accent-hover-color:#1a44ec;--background-color:#fff;--text-color:#333;}

.container {max-width:1200px;margin:0 auto;width:100%;padding:0 20px;}
.container-sub {max-width:800px;}
.container-sub2 {max-width:1200px;}
.container-sub h2 {text-align: center; margin-bottom: 20px}

.main-container {margin:0 auto;width:100%;}

/*헤더영역*/
header {background-color:#fff;color:#333;padding:15px 0;position:fixed;top:0;left:0;width:100%;z-index:1000;box-shadow:0 2px 5px rgba(0,0,0,0.1);}
/*nav {position: relative;display:flex;gap:30px;}*/
nav {
    display: flex;
    align-items: center; /* 수직 중앙 정렬 */
    justify-content: space-between; /* 요소들 사이 간격 균등 배분 */
    position: relative;
}
.header-content {display:flex;align-items:center;justify-content:space-between;}
.logo {display:flex;align-items:center;}
.logo-box {background-color:#333;color:var(--accent-color, #ff9800);width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:5px;font-weight:bold;font-size:24px;margin-right:10px;}
.logo-text {display:flex;flex-direction:column;}
.logo-brand {color:#333;font-weight:bold;font-size:18px;}
.logo-name {font-size:14px;font-weight:bold;color:#333;}
.menu {display:flex;gap:30px;position: relative;}
.menu a {color:#333;text-decoration:none;font-size:18px;font-weight:bold;transition:color 0.3s;position: padding: 10px 0;position:relative;}
.menu a.active, .menu a:hover {color:var(--accent-color, #ff9800);}
.menu-toggle {display:none;cursor:pointer;font-size:24px;color:#333;}
.login-section {margin:0 40px;display:flex;align-items:center;gap:8px;font-size: 14px;}
.login-section a {color:#333;text-decoration:none;transition:color0.3s;}
.login-section a:hover {color:var(--accent-color,#ff9800);}
.login-section span {color:#f1f1f1;}

/*메인컨텐츠영역*/
.main-content {margin-top:123px;padding-bottom:20px;}
.main-content main .title {text-align:center;padding:25px;word-break: keep-all;}
.main-content main .title p {padding: 10px 0;}

/*카드컨테이너*/
/*.card-container {padding:20px 0; display: grid; grid-template-columns: repeat(2, 1fr); }
.card-container .card {background-color:#fff;color:#333;padding:20px;border-radius:10px;text-align:center;box-shadow:0 4px 8px rgba(0,0,0,0.1);transition:all 0.3s ease;border-top:5px solid #ececec;margin: 0 10px 20px 10px; }
.card-container .card:hover {box-shadow:0 6px 12px rgba(41,83,253,0.2);}*/
.card h2 {margin-bottom:15px;font-size:20px;color:#000000;text-align: center;word-break: keep-all;}
.card p {font-size:16px;}
.card img {padding:5px;max-width:45px;}

.card-container { /*padding: 20px 0;*/margin: 0 auto; max-width: 1200px; display: flex; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 20px; justify-content: center; align-items: center; }
.card-container .card { background-color: #fff; color: #333; padding: 20px; border-radius: 10px; text-align: center; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: all 0.3s ease; border-top: 5px solid #ececec; }
.card-container .card:hover { box-shadow: 0 6px 12px rgba(41,83,253,0.2); }
.card-container a { display: flex; justify-content: center; align-items: center; }
.card-container a > img { max-width: 100%; height: auto; width: 521px; max-height: 511px; object-fit: contain; }

/* 데스크톱 */
@media (min-width: 769px) {
    .card-container { display: grid; grid-template-columns: repeat(4, 1fr); padding: 16px;}
}

/* 태블릿 */
@media (max-width: 768px) {
    .card-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;  /* 간격을 좀 더 키워서 일관되게 보이도록 */
        padding: 16px;  /* 컨테이너 자체에 패딩 추가 */
        box-sizing: border-box;  /* 패딩이 전체 너비에 포함되도록 */
    }
    .card-container > div,
    .card-container > a {
        width: 100%;  /* 각 카드 요소가 자신의 그리드 셀을 꽉 채우도록 */
        aspect-ratio: 1;  /* 정사각형 비율 유지 (필요에 따라 조정) */
        margin: 0;  /* 기존 마진 제거 */
    }

    .card-container a > img {
        max-width: 100%;  /* 이미지가 부모 요소에 맞게 조정되도록 */
        height: auto;  /* 이미지 비율 유지 */
    }
}

/* 모바일 */
@media (max-width: 480px) {
    .card-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;  /* 간격을 좀 더 키워서 일관되게 보이도록 */
        padding: 16px;  /* 컨테이너 자체에 패딩 추가 */
        box-sizing: border-box;  /* 패딩이 전체 너비에 포함되도록 */
    }

    .card-container > div,
    .card-container > a {
        width: 100%;  /* 각 카드 요소가 자신의 그리드 셀을 꽉 채우도록 */
        aspect-ratio: 1;  /* 정사각형 비율 유지 (필요에 따라 조정) */
        margin: 0;  /* 기존 마진 제거 */
    }

    .card-container a > img {
        max-width: 100%;  /* 이미지가 부모 요소에 맞게 조정되도록 */
        height: auto;  /* 이미지 비율 유지 */
    }
}

.btn {background-color:var(--accent-color,#ff9800);color:#fff;border:none;padding:8px 16px;border-radius:4px;font-weight:bold;cursor:pointer;transition:background-color 0.3s;margin-top:20px;}
.btn:hover {background-color:var(--accent-hover-color,#1a44ec);}
button.learn-more {display:inline-block;margin-top:10px;padding:10px 20px;border:none;background-color:#ff9800;color:white;font-size:16px;cursor:pointer;border-radius:5px;transition:background-color 0.3s;}
button.learn-more:hover {background-color:#1a44ec;}

/*약관동의스타일*/
.agreement-section {margin-bottom:20px;text-align:left;}
.agreement-section h3 {margin-bottom:10px;color:#333;font-size:18px;}
.agreement-content {background-color:#f9f9f9;padding:15px;border-radius:5px;border:1px solid #eee;margin-bottom:10px;height:150px;overflow-y:auto;}
.agreement-content h4 {margin:10px 0 5px;color:#555;font-size:16px;}
.agreement-content p {margin-bottom:10px;font-size:14px;color:#666;line-height:1.5;}
.privacy-table {width:100%;border-collapse:collapse;margin:10px 0;}
.privacy-table th, .privacy-table td {border:1px solid #ddd;padding:8px;text-align:left;font-size:14px;}
.privacy-table th {background-color:#f2f2f2;}
.agreement-checkbox {display:flex;align-items:center;}
.agreement-checkbox input[type="checkbox"] {margin-right:10px;width:18px;height:18px;}
.agreement-checkbox label {font-size:15px;cursor:pointer;}
.all-agreement {background-color:#fff;/*padding:15px;*/border-radius:5px;margin-bottom:20px;display:flex;align-items:center;}
.all-agreement input[type="checkbox"] {margin-right:10px;width:20px;height:20px;}
.all-agreement label {font-size:16px;cursor:pointer;}
.signup-button {text-align:center;}
.signup-button button, .section-item .btn01 {padding:12px 30px;background-color:#ffb808;color:#333;border:none;border-radius:5px;font-size:16px;font-weight:bold;cursor:pointer;transition:background-color 0.3s;}
.signup-button button:hover, .section-item .btn01:hover  {background-color:#ff9900;}

/*슬라이더*/
.slider-container {position:relative;margin-bottom:30px;overflow:hidden;/*box-shadow:0 4px 8px rgba(0,0,0,0.1);*/width:100%;}
.slider {display:flex;transition:transform 0.5s ease;}
/*.slide {min-width:100%;height:450px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;font-weight:bold;text-shadow:1px 1px 3px rgba(0,0,0,0.5);}*/
.slide {min-width:100%;height:450px;background-repeat: no-repeat; background-size: auto 450px;background-position:center;display:flex;align-items:center;justify-content:center;color:white;font-size:24px;font-weight:bold;text-shadow:1px 1px 3px rgba(0,0,0,0.5);}

.slider-controls {position:absolute;bottom:20px;left:50%;transform:translateX(-50%);display:flex;gap:10px;}
.slider-dot {width:12px;height:12px;border-radius:50%;background-color:rgba(255,255,255,0.5);cursor:pointer;}
.slider-dot.active {background-color:white;}
.slider-nav {position:absolute;top:50%;width:100%;display:flex;justify-content:space-between;transform:translateY(-50%);}
.nav-btn {background-color:#00000000;color:#0000001a;border:none;padding:10px 55px;cursor:pointer;font-size:35px;}

@media(max-width:768px) {
    .slide {height:250px;font-size:16px;}
    .nav-btn {font-size:35px;padding:8px 12px;}
}
/*카드컨테이너반응형*/
/*@media(min-width:768px) {
    .card-container {display:grid;grid-template-columns:repeat(2,1fr);gap:15px;}
}
@media(min-width:992px) {
    .card-container {grid-template-columns:repeat(4,1fr);}
}*/
/*서브헤더영역*/
.sub-header {background-color:#fff;padding:0;box-shadow:0 2px 4px rgba(0,0,0,0.05);position:fixed;top:78px;left:0;width:100%;z-index:900;}
.sub-menu-wrapper {display:flex;flex-wrap:nowrap;justify-content:space-between;align-items:center;white-space:nowrap;overflow-x:auto;}
.select-box {position:relative;flex:1;}
.main-link {display:block;padding:15px;color:#333;text-decoration:none;font-weight:bold;border-bottom:3px solid transparent;transition:all 0.3s;text-align:center;}
.main-link.active, .main-link:hover {color:var(--accent-color,#ff9800);border-bottom-color:var(--accent-color,#ff9800);}

/*푸터영역*/
/*footer {background-color: #f7f7f7;color:#ddd;padding:40px 0 95px 0;text-align:center;font-size: 13px;}*/
footer a, footer span {color:#6f6f6f;text-decoration:none;font-weight:bold;}
.footer-logo {color:var(--accent-color,#ff9800);font-weight:bold;margin-bottom:10px;}

.footer { background-color: #f5f5f5; padding: 20px; color: #333; font-size: 14px; }
.footer-container { max-width: 1200px; margin: 0 auto; text-align: center; padding-bottom: 115px; }
.footer-logo { display: flex; align-items: center; justify-content: center; margin-bottom: 15px; }
.logo-box { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 2px solid #000; margin-right: 10px; font-weight: bold; font-size: 18px; }
.logo-text { font-size: 20px; font-weight: bold; }
.logo-text span { color: #FFB800; }
.footer-info { line-height: 1.8; }
.info-row { display: flex; flex-wrap: wrap; margin-bottom: 5px; justify-content: center; align-items: center;}
.info-item { word-break: keep-all; }
.divider { display: inline-block; width: 1px; height: 12px; background-color: #ccc; margin: 0 10px; vertical-align: middle; }
@media (max-width: 768px) {
    .footer-container { padding-bottom: 160px; }
    .info-row {flex-direction: column;margin-bottom: 10px;}

    /* 기본적으로 항목들을 세로로 쌓기 */
    .info-item {margin-bottom: 5px;}

    /* 기본적으로 구분선 숨기기 */
    .divider {display: none;}

    /* 첫 번째 줄 타겟팅 (운영시간, 전화번호) */
    .info-row:first-child {flex-direction: row;flex-wrap: wrap;justify-content: center;}

    /* 이 줄에서는 구분선 표시 */
    .info-row:first-child .divider {display: inline-block;}

    /* 세 번째 줄 타겟팅 (대표이사, FAX) */
    .info-row:last-child {flex-direction: row;flex-wrap: wrap;justify-content: center;}

    /* 이 줄에서는 구분선 표시 */
    .info-row:last-child .divider {display: inline-block;}
}

/*반응형모바일스타일*/
@media(max-width:768px) {
    .menu {display:none;flex-direction:column;position:absolute;top:70px;left:0;width:100%;background-color:#fff;padding:20px;gap:15px;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
    .menu.active {display:flex;}
    .menu-toggle {display:block;}
    .login-section {white-space:nowrap;}
    .slide {height:200px;font-size:18px;background-repeat: no-repeat; background-size: auto 200px;}
    .agreement-content {height:120px;}
    .sub-header {position:fixed;top:78px;left:0;width:100%;z-index:900;}
    .main-content {margin-top:118px;padding-top: 0;}
    .info-section {flex-direction:column;}
    .reverse {flex-direction:column;}
    .image {margin-top:20px;}

    /*크롬,사파리등웹킷기반브라우저의스크롤바숨기기*/
    .sub-menu-wrapper::-webkit-scrollbar {display:none;}
    .select-box {flex:0 0 auto;/*유연한크기조정방지*/min-width:fit-content;/*컨텐츠크기에맞춰최소너비설정*/}
    .main-link {padding:12px 15px;/*간격조정*/white-space:nowrap;/*텍스트줄바꿈방지*/}
}

/*추가선택자들*/
.info-section {display:flex;align-items:center;justify-content:space-between;margin-bottom:50px;padding:20px;border-radius:10px;box-shadow:0 0 10px rgba(0,0,0,0.1);background-color:#f9f9f9;min-height:250px;}
.text {flex:1;padding:20px;}
.text h2,.text p {margin-bottom:10px;}
.image {flex:1;text-align:center;}
.image img {max-width:70%;height:auto;border-radius:10px;}

/*부유배너*/
.floating-banner {position:fixed;bottom:0;left:0;width:100%;background-color:#333;color:white;padding:15px;text-align:center;z-index:999;}
.close-banner{ position:absolute; top:10px; right:10px; background:none; border:none; color:white; cursor:pointer; font-size:18px;}

/*인증컨테이너스타일*/
.auth-container {max-width:500px;margin:120px auto 0;padding:020px;}
.auth-container .card {background-color:#fff;margin-top:30px;padding:40px;border-radius:10px;box-shadow:0 4px 15px rgba(0,0,0,0.1);border-top:5px solid #ececec;}
.auth-container .cardh2 {text-align:center;margin-bottom:30px;color:#333;}
.auth-container .form-group {margin-bottom:20px;}
.auth-container .form-group label {display:block;margin-bottom:5px;font-weight:500;color:#555;}
.auth-container .form-control {width:100%;padding:12px;border:1px solid #ddd;border-radius:5px;font-size:16px;transition:border-color0.3s;}
.auth-container .form-control:focus {border-color:#ffb808;outline:none;}
.auth-container .btn {width:100%;padding:14px;background-color:#ececec;color:#333;border:none;border-radius:5px;font-size:16px;font-weight:700;cursor:pointer;transition:background-color0.3s;}
.auth-container .btn.active, .auth-container .btn:hover {background-color:#ff9900;}
.auth-container .btn.btn-leave {background-color: #c60d0d; color: #fff;}
.auth-container .text-center {text-align:center;margin-top:20px;color:#666;}
.auth-container .text-center a {color:#ffb808;text-decoration:none;font-weight:500;}
.auth-container .text-center a:hover {text-decoration:underline;}
.auth-container .alert {padding:12px;border-radius:5px;margin-bottom:20px;}
.auth-container .alert-success {background-color:#e7f6e7;color:#2e7d32;border:1px solid #c8e6c9;}
.auth-container .alert-danger {background-color:#ffebee;color:#c62828;border:1px solid #ffcdd2;}
.auth-container .error-message {color:#c62828;font-size:14px;margin-top:5px;}
.auth-container .forgot-password {text-align:right;margin-top:-10px;margin-bottom:15px;}
.auth-container .forgot-password a {color:#666;font-size:14px;text-decoration:none;}
.auth-container .forgot-password a:hover {color:#ffb808;text-decoration:underline;}

/*반응형스타일*/
@media(max-width:768px) {
    .menu {display:none;flex-direction:column;position:absolute;top:70px;left:0;width:100%;background-color:#fff;padding:20px;gap:15px;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
    .menu.active {display:flex;}
    .menu-toggle {display:block;}
}
/*공지및섹션*/
.main-sections {display:flex;justify-content:space-between;gap:20px;max-width:1200px;margin:0 auto;/*padding:45px 0;*/}
.main-sections .section {flex:1;background-color:white;border-radius:10px;border-top:5px solid #ececec;box-shadow:0 4px 8px rgba(0,0,0,0.1);padding:25px;max-width: 370px;}
.main-sections .section-header {display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;margin-bottom:15px;}
.main-sections .section-title {font-size:20px;font-weight:bold;color:#333;}
.main-sections .section-more {color:#666;text-decoration:none;font-size:14px;}
.main-sections .section-content {display:flex;flex-direction:column;}
.main-sections .section-content a {text-decoration-line: none;}
.main-sections .section-item {display:flex;justify-content:space-between;padding:10px 0;/*border-bottom:1px solid #f0f0f0;*/gap: 15px;}
.main-sections .section-item:last-child {border-bottom:none;}
.main-sections .item-title {font-size:14px;color:#333;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.main-sections .item-date {font-size:12px;color:#888; white-space: nowrap;}
.main-sections .contact-info {font-size:35px;font-weight:bold;color:#ff6b6b;text-align:center;margin-top:15px;}

@media(max-width:768px) {
    .main-sections {flex-direction:column;padding:10px 0;}
    .main-sections .section {margin-bottom:15px;}
}

.match-success { font-size: 14px; color: #4fba57; }
.match-error  { font-size: 14px; color: #f86f6f; }

/* 1:1 문의 */
.inquiry-form {background-color: #fff; border-radius: 10px; /*box-shadow: 0 4px 6px rgba(0,0,0,0.1);*/ padding: 30px; margin-bottom: 30px;}
.form-title {text-align: center; margin-bottom: 30px; padding-bottom: 15px; border-bottom: 2px solid var(--accent-color); font-size: 24px; font-weight: bold;}
.form-row {margin-bottom: 20px; display: flex; align-items: flex-start; border-bottom: 1px solid #eee; padding-bottom: 20px;}
.form-row:last-child {border-bottom: none;}
.form-label {flex: 0.25; font-weight: bold;}
.form-input {flex: 1;}
input[type="text"], input[type="email"], select, textarea {width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px;}
.phone-input {display: flex; gap: 5px; align-items: center;}
.phone-input select, .phone-input input {flex: 1;}
.email-input {display: flex; gap: 5px; align-items: center;}
.email-input input, .email-input select {flex: 1;}

@media (max-width: 768px) {
    .email-input {flex-wrap: nowrap; width: 100%;}
    .email-input input {min-width: 0; flex: 1;}
    .email-input > span {flex: none; margin: 0 2px;}
    .email-input select {flex: 1; min-width: 0;}
}
.email-notice {font-size: 12px; color: #f86f6f; margin-top: 5px;}
.radio-group {display: flex; flex-wrap: wrap; gap: 15px;}
.radio-item {display: flex; align-items: center; gap: 5px; font-size: 14px;}
.form-input textarea {
    width: 100%;
    min-height: 200px;
    resize: vertical;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .form-input textarea {
        width: 100% !important;
        min-height: 150px;
        font-size: 16px;
    }
    .form-row .form-input {
        width: 100%;
    }
}
.required::after {content: " *"; color: red;}
.checkbox-group {margin-top: 5px;}
.checkbox-item {display: flex; align-items: center; gap: 5px; margin: 5px 0;}
.submit-btn {display: block; width: 200px; margin: 30px auto 0; padding: 12px; background-color: var(--accent-color); color: white; border: none; border-radius: 5px; font-size: 16px; font-weight: bold; cursor: pointer; transition: background-color 0.3s;}
.submit-btn:hover {background-color: var(--accent-hover-color);}
.preview-btn {display: block; width: 200px; margin: 15px auto 0; padding: 10px; background-color: #6c757d; color: white; border: none; border-radius: 5px; font-size: 14px; cursor: pointer; transition: background-color 0.3s;}
.preview-btn:hover {background-color: #5a6268;}
.modal {display: none; position: fixed; z-index: 1000; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5);}
.modal-content {background-color: #fff; margin: 10% auto; padding: 20px; border-radius: 10px; width: 80%; max-width: 600px; box-shadow: 0 5px 15px rgba(0,0,0,0.3); position: relative;}
.close-modal {position: absolute; right: 20px; top: 15px; font-size: 24px; cursor: pointer;}
.preview-title {margin-bottom: 20px; padding-bottom: 10px; border-bottom: 1px solid #ddd; font-size: 20px; font-weight: bold;}
.preview-item {margin-bottom: 15px;}
.preview-label {font-weight: bold; margin-bottom: 5px;}
@media (max-width: 768px) {.form-row {flex-direction: column; align-items: flex-start;} .form-label {margin-bottom: 10px;} .radio-group {flex-direction: column; gap: 10px;} .phone-input {flex-wrap: wrap;} .email-input {flex-wrap: wrap;}}


/* 회사소개 */
.company { line-height: 1.6; color: #333; }
.company section { padding: 80px 0; }
.company h1, h2, h3 { font-weight: 700; line-height: 1.2; }
.company p { margin-bottom: 15px; }
.company .btn { display: inline-block; background-color: #4b70e2; color: white; padding: 12px 30px; border-radius: 50px; text-decoration: none; font-weight: 600; transition: all 0.3s ease; border: none; cursor: pointer; }
.company .btn:hover { background-color: #3a5bbf; transform: translateY(-2px); box-shadow: 0 6px 15px rgba(75, 112, 226, 0.3); }
.company .section-title { text-align: center; margin-bottom: 60px; }
.company .section-title h2 { font-size: 36px; margin-bottom: 15px; position: relative; display: inline-block; border-bottom:3px solid #4b70e2; }
/*.company .section-title h2::after { content: ''; position: absolute; left: 50%; bottom: -10px; transform: translateX(-50%); width: 60px; height: 3px; background-color: #4b70e2; }*/
.company .section-title p { font-size: 18px; color: #666; }
.company .hero { background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('/src/img/main/company/1.png') no-repeat center center; background-size: cover; color: white; text-align: center; padding: 180px 50px; position: relative; }
.company .hero-content { max-width: 800px; margin: 0 auto; word-break: keep-all; }
.company .hero h1 { font-size: 48px; margin-bottom: 20px; animation: fadeInDown 1s ease; }
.company .hero p { font-size: 22px; margin-bottom: 30px; animation: fadeInUp 1s ease; }
.company .about-content { display: flex; align-items: center; gap: 40px; }
.company .about-text { flex: 1; }
.company .about-img { flex: 1; background-repeat: no-repeat; background-size: cover; background-position: center; min-height: 400px; width: 100%; display: block; }
.company .services { background-color: #f0f4ff; }
.company .services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.company .service-card { background-color: white; padding: 30px; border-radius: 12px; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; }
.company .service-card:hover { transform: translateY(-10px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.company .service-card h3 { font-size: 22px; margin-bottom: 15px; color: #4b70e2; }
.company .values-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 30px; }
.company .value-card { padding: 25px; border-radius: 12px; background-color: white; box-shadow: 0 5px 15px rgba(0,0,0,0.05); transition: all 0.3s ease; min-width: 280px; }
.company .value-card:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0,0,0,0.1); }
.company .value-card h3 { font-size: 20px; margin-bottom: 10px; display: flex; align-items: center; word-break: keep-all; }
.company .value-card h3 span { margin-right: 10px; color: #4b70e2; }
.company .cta { background: linear-gradient(135deg, #4b70e2, #3a5bbf); color: white; text-align: center; padding: 80px 0; }
.company .cta h2 { font-size: 36px; margin-bottom: 15px; }
.company .cta p { font-size: 20px; margin-bottom: 30px; }
.company .cta .btn { background-color: white; color: #4b70e2; font-size: 18px; }
.company .cta .btn:hover { background-color: #f0f4ff; }
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 992px) { .about-content { flex-direction: column; } .hero h1 { font-size: 40px; } .hero p { font-size: 18px; } section { padding: 60px 0; } }
@media (max-width: 768px) {
    .hero h1 { font-size: 36px; }
    .hero { padding: 120px 0; }
    .section-title h2 { font-size: 30px; }
    .company .about-img { min-height: 300px;  /* 모바일에서도 최소 높이 유지 */ }
}

/* 중간 메뉴 */
.breadcrumb-container {background-color: #f8f9fa; padding: 10px 0; border-bottom: 1px solid #eee;}
.breadcrumb ul {list-style: none; display: flex; flex-wrap: wrap; padding: 0; margin: 0;}
.breadcrumb li {display: flex; align-items: center; font-size: 14px; color: #666;}
.breadcrumb li a {color: #666; text-decoration: none; transition: color 0.3s;}
.breadcrumb li a:hover {color: var(--accent-color, #ff9800);}
.breadcrumb li:not(:last-child)::after {content: ">"; margin: 0 10px; color: #ccc;}
.breadcrumb li.active {color: var(--accent-color, #ff9800); font-weight: 500;}

@media (max-width: 768px) {
    .breadcrumb-container {padding: 8px 0;}
    .breadcrumb li {font-size: 12px;}
    .breadcrumb li:not(:last-child)::after {margin: 0 5px;}
}

/* 게시판 리스트 페이지 */
.board-list {background-color:#fff;border-radius:10px;overflow:hidden;margin-bottom:30px;}
.board-list-header {display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;}
.board-list-title {font-size:24px;font-weight:bold;color:#333;}
.board-search {display:flex;gap:10px;}
.board-search-input {padding:8px 12px;border:1px solid #ddd;border-radius:4px;width:200px;}
.board-search-input:focus {outline:none;border-color:var(--accent-color);}
.board-search-btn {background-color:var(--accent-color);color:#fff;border:none;padding:8px 16px;border-radius:4px;cursor:pointer;transition:background-color 0.3s;}
.board-search-btn:hover {background-color:var(--accent-hover-color);}
.board-table {width:100%;border-collapse:collapse;}
.board-table th {background-color:#f5f5f5;padding:12px;text-align:center;font-weight:bold;color:#555;border-top:2px solid #ddd;border-bottom:1px solid #ddd;}
.board-table td {font-size: 14px; padding:15px 12px;text-align:center;border-bottom:1px solid #eee;color:#333;}
.board-table tr:hover {background-color:#f9f9f9;}
.board-table a {font-size: 14px;}
.board-title-cell {text-align:left !important;}
.board-title-link {color:#333;text-decoration:none;font-weight:500;transition:color 0.3s;display: inline-block;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: calc(100% - 75px);vertical-align: middle;}
.board-title-link:hover {color:var(--accent-color);}
.board-notice {display:inline-block;background-color:#ff6b6b;color:#fff;padding:3px 8px;border-radius:3px;font-size:12px;margin-right:8px;}
.board-new {display:inline-block;background-color:#4fba57;color:#fff;padding:2px 6px;border-radius:3px;font-size:11px;margin-left:8px;}
.board-comment-count {color:var(--accent-color);font-weight:bold;margin-left:5px;}
.board-pagination {display:flex;justify-content:center;margin-top:30px;gap:5px;}
.board-page-item {width:36px;height:36px;display:flex;align-items:center;justify-content:center;border:1px solid #ddd;border-radius:4px;color:#555;text-decoration:none;transition:all 0.3s;}
.board-page-item:hover, .board-page-item.active {background-color:var(--accent-color);color:#fff;border-color:var(--accent-color);}
.board-buttons {display:flex;justify-content:flex-end;margin-top:20px;}
.mobile-info {display:none;}
.board-category {display:inline-block;background-color:#e0e0e0;color:#555;padding:3px 8px;border-radius:3px;font-size:12px;margin-right:8px;}

/* 페이지네이션 */
.pagination{display:flex;justify-content:center;margin-top:20px;list-style-type:none;padding:0;}
.pagination li{margin:0 3px;}
.pagination li a{display:inline-block;padding:8px 12px;border:1px solid #ddd;border-radius:4px;color:#333;text-decoration:none;transition:background-color 0.3s;}
.pagination li a:hover{background-color:#f5f5f5;}
.pagination li.active a{background-color:#333;color:white;border-color:#333;}
.pagination li.disabled a{color:#999;cursor:not-allowed;background-color:#f9f9f9;}

/* 게시판 뷰 페이지 스타일 */
.board-view {background-color:#fff;border-radius:10px;/*box-shadow:0 4px 8px rgba(0,0,0,0.1);*/margin-bottom:30px;overflow:hidden;}
.board-header {padding:20px;border-bottom:1px solid #eee;}
.board-title {font-size:24px;font-weight:bold;margin-bottom:10px;color:#333;}
.board-info {display:flex;justify-content:space-between;color:#777;font-size:14px;}
.board-author {display:flex;align-items:center;gap:5px;}
.board-author-img {width:30px;height:30px;border-radius:50%;background-color:#f1f1f1;display:flex;align-items:center;justify-content:center;color:#777;}
.board-meta {display:flex;gap:15px;}
.board-meta span {display:flex;align-items:center;gap:5px;}
.board-content {padding:30px;line-height:1.6;color:#333;min-height:300px;}
.board-content img {max-width:100%;height:auto;margin:15px 0;}
.board-content p {margin-bottom:15px;}
.board-files {padding:15px 20px;background-color:#f9f9f9;border-top:1px solid #eee;}
.board-files a {text-decoration:none;}
.board-files-title {font-weight:bold;margin-bottom:10px;font-size:14px;color:#555;}
.file-item {display:flex;align-items:center;gap:10px;margin-bottom:5px;padding:5px;background-color:#fff;border-radius:4px;box-shadow:0 1px 3px rgba(0,0,0,0.05);}
.file-icon {color:#777;}
.file-name {font-size:14px;color:#333;}
.file-size {font-size:12px;color:#777;margin-left:auto;}
.board-buttons {display:flex;justify-content:space-between;margin-top:20px;}
.btn-group {display:flex;gap:10px;}
.btn-secondary {background-color:#f1f1f1;color:#333;border:none;padding:8px 16px;border-radius:4px;font-weight:bold;cursor:pointer;transition:background-color 0.3s;}
.btn-secondary:hover {background-color:#e1e1e1;}
.btn-danger {background-color:#ff6b6b;color:#fff;}
.btn-danger:hover {background-color:#ff5252;}
.comments-section {margin-top:30px;}
.comments-title {font-size:18px;font-weight:bold;margin-bottom:15px;color:#333;display:flex;align-items:center;gap:10px;}
.comment-count {background-color:var(--accent-color);color:#fff;padding:3px 8px;border-radius:10px;font-size:14px;}
.comment-item {padding:15px;border-bottom:1px solid #eee;display:flex;gap:15px;}
.comment-author-img {width:40px;height:40px;border-radius:50%;background-color:#f1f1f1;display:flex;align-items:center;justify-content:center;color:#777;flex-shrink:0;}
.comment-content {flex:1;}
.comment-header {display:flex;justify-content:space-between;margin-bottom:5px;}
.comment-author {font-weight:bold;color:#333;}
.comment-date {font-size:12px;color:#777;}
.comment-text {font-size:14px;line-height:1.5;color:#555;}
.comment-form {margin-top:20px;padding:20px;background-color:#f9f9f9;border-radius:10px;}
.comment-form-title {font-weight:bold;margin-bottom:10px;color:#333;}
.comment-textarea {width:100%;height:100px;padding:10px;border:1px solid #ddd;border-radius:5px;resize:none;margin-bottom:10px;font-size:14px;font-family:inherit;}
.comment-textarea:focus {border-color:var(--accent-color);outline:none;}
.comment-form-bottom {display:flex;justify-content:space-between;align-items:center;}
.comment-info {font-size:12px;color:#777;}

/* 게시판 갤러리 스타일*/
.board-list.gallery .board-table { display: none; }
.board-list.gallery .board-gallery-container { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; padding: 20px 0; }
.board-gallery-item { background: #fff; border: 1px solid #e0e0e0; border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,0.08); min-width: 200px; }
.board-gallery-item:hover { transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,0,0,0.15); border-color: var(--accent-color); }
.board-gallery-thumbnail { width: 100%; height: 180px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding-bottom: 100%; }
.board-gallery-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.board-gallery-item:hover .board-gallery-thumbnail img { transform: scale(1.05); }
.board-gallery-thumbnail .default-icon { font-size: 48px; color: rgba(255,255,255,0.7); }
.board-gallery-content { padding: 16px; }
.board-gallery-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 8px; }
.board-gallery-category { display: inline-block; background-color: var(--accent-color); color: #fff; padding: 4px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; text-transform: uppercase; }
.board-gallery-title { font-size: 16px; font-weight: 600; color: #333; margin-bottom: 8px; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 44px; }
.board-gallery-excerpt { font-size: 13px; color: #666; line-height: 1.5; margin-bottom: 12px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; min-height: 39px; }
.board-gallery-meta { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: #888; padding-top: 12px; border-top: 1px solid #f0f0f0; }
.board-gallery-author { font-weight: 500; color: #555; }
.board-gallery-stats { display: flex; gap: 12px; align-items: center; }
.board-gallery-comments { color: var(--accent-color); font-weight: 600; }
.board-gallery-date { color: #999; }
.board-pagination { display: flex; justify-content: center; margin-top: 30px; gap: 5px; }
.board-page-item { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; border-radius: 4px; color: #555; text-decoration: none; transition: all 0.3s; }
.board-page-item:hover, .board-page-item.active { background-color: var(--accent-color); color: #fff; border-color: var(--accent-color); }
@media (max-width: 768px) { .board-list.gallery .board-gallery-container { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px; } .board-gallery-thumbnail { height: 150px; } }
@media (max-width: 480px) { .board-list.gallery .board-gallery-container { grid-template-columns: 1fr; gap: 12px; } }

/*
@media(max-width:768px) {
    .menu {display:none;flex-direction:column;position:absolute;top:70px;left:0;width:100%;background-color:#fff;padding:20px;gap:15px;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
    .menu.active {display:flex;}
    .menu-toggle {display:block;}
    .board-info {flex-direction:column;gap:10px;}
    .board-meta {justify-content:space-between;}
    .board-buttons {flex-direction:column;gap:10px;}
    .btn-group {justify-content:space-between;}
    .comment-item {flex-direction:column;gap:10px;}
    .comment-header {flex-direction:column;}
}*/

/* 반응형 스타일 */
@media(max-width:768px) {
    .menu {display:none;flex-direction:column;position:absolute;top:53px;left:0;width:100%;background-color:#fff;padding:20px;gap:15px;box-shadow:0 4px 8px rgba(0,0,0,0.1);}
    .menu.active {display:flex;z-index: 1001 !important;}
    .menu-toggle {display:block;}
    .board-table thead {display:none;}
    .board-table tbody tr {display:block;border-bottom:1px solid #eee;padding:15px 0;}
    .board-table td {display:block;text-align:left;padding:5px 0;border:none;}
    .board-table td:not(.board-title-cell) {display:none;}
    .mobile-info {display:flex;margin-top:5px;font-size:12px;color:#888;gap:10px;}
    .board-search-input {width:150px;}
    .board-list-header {flex-direction:column;align-items:flex-start;gap:15px;}
    .board-search {width:100%;}
    .board-search-input {flex:1;}
    /* 크롬, 사파리 등 웹킷 기반 브라우저의 스크롤바 숨기기 */
    .sub-menu-wrapper::-webkit-scrollbar {display:none;}
    .select-box {flex:0 0 auto;min-width:fit-content;}
    .main-link {padding:12px 15px;white-space:nowrap;}
}

/* 슬라이더 컨테이너 */
.review-slider-container { max-width: 1200px; margin: 0 auto;; position: relative; }
.review-slider-title { text-align: center; margin-bottom: 40px; }
.review-slider-title h2 { font-size: 32px; font-weight: 700; margin-bottom: 10px; }
.review-slider-title p { font-size: 16px; color: #666; }
/* 슬라이더 */
.swiper { width: 100%; padding-bottom: 50px; /* 페이지네이션을 위한 여백 */ }
.review-slide { padding: 30px; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1); border-radius: 10px; background-color: #fff; transition: all 0.3s ease; height: auto; min-height: 290px; }
.review-slide:hover { transform: translateY(-5px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15); }
/* 리뷰 카드 내용 */
.review-header { display: flex; align-items: center; margin-bottom: 20px; }
.review-avatar { width: 60px; height: 60px; border-radius: 50%; overflow: hidden; margin-right: 15px; background-color: #f0f0f0; }
.review-avatar img { width: 100%; height: 100%; object-fit: cover; }
.review-info h4 { font-size: 18px; margin-bottom: 5px; }
.review-info .course-name { font-size: 14px; color: #666; }
.review-stars { display: flex; margin-bottom: 15px; color: #ffb400; }
.review-text { font-size: 15px; line-height: 1.6; color: #444; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; min-height: 72px; }
.review-date { margin-top: 20px; font-size: 14px; color: #888; text-align: right; }

/* 커스텀 내비게이션 */
.custom-navigation { position: absolute; width: 100%; top: 60%; left: 0; transform: translateY(-50%); z-index: 10; pointer-events: none; }
.custom-prev-btn, .custom-next-btn { width: 50px; height: 50px; border-radius: 50%; background-color: #fff; box-shadow: 0 3px 10px rgba(0, 0, 0, 0.2); border: none; cursor: pointer; position: absolute; top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; pointer-events: auto; }
.custom-prev-btn { left: 10px; }
.custom-next-btn { right: 10px; }
.custom-prev-btn:hover, .custom-next-btn:hover { background-color: #f8f8f8; box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); }
.arrow-left, .arrow-right { border: solid #333; border-width: 0 3px 3px 0; display: inline-block; padding: 4px; }
.arrow-left { transform: rotate(135deg); margin-right: -3px; }
.arrow-right { transform: rotate(-45deg); margin-left: -3px; }

@media (max-width: 768px) {
    .custom-prev-btn, .custom-next-btn { width: 40px; height: 40px; }
    .custom-prev-btn { left: 10px; }
    .custom-next-btn { right: 10px; }
    .arrow-left, .arrow-right { padding: 3px; }
}
/* 커스텀 페이지네이션 */
.custom-pagination { display: flex; justify-content: center; align-items: center; margin-top: 20px; gap: 10px; }
.custom-pagination-bullet { width: 12px; height: 12px; border-radius: 50%; background-color: #ddd; cursor: pointer; transition: all 0.3s ease; }
.custom-pagination-bullet.active { background-color: #797979; }

/* 부유 배너 스타일 */
.floating-banner { position: fixed; bottom: 0; left: 0; width: 100%; background-color: #1a3a8f; color: white; z-index: 1000; padding: 15px; box-sizing: border-box; }
.banner-content { position: relative; max-width: 1200px; margin: 0 auto; }
.float-form-title { font-size: 18px; font-weight: bold; margin-bottom: 5px; text-align: center; }
.close-banner { position: absolute; top: 5px; right: 5px; background: none; border: none; color: white; font-size: 20px; cursor: pointer; }

/* PC 레이아웃 - 모든 요소 한 줄로 */
.inline-form-row { display: flex; flex-wrap: nowrap; gap: 5px; align-items: center; width: 100%; }
.inputs-container { display: flex; gap: 5px; flex: 3; }
.float-form-input { flex: 1; padding: 8px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; min-width: 0; }
.actions-container { display: flex; align-items: center; gap: 5px; flex: 1; }
.privacy-check { display: flex; align-items: center; white-space: nowrap; }
.privacy-check label { font-size: 12px; margin-left: 2px; }
.float-submit-btn { padding: 8px 10px; background-color: #007bff; color: white; border: none; border-radius: 4px; cursor: pointer; font-size: 14px; white-space: nowrap; }

/* 모바일 화면용 두 줄 레이아웃 */
@media (max-width: 768px) {
    .inline-form-row { flex-wrap: wrap; }
    .inputs-container { width: 100%; margin-bottom: 8px; flex: auto; }
    .actions-container { width: 100%; justify-content: space-between; flex: auto; }
}
/*
.menu-item { position: relative; }

.menu-item:hover .submenu { display: block; }
.submenu { position: absolute; top: 100%; left: 0; background-color: white; min-width: 200px; box-shadow: 0 8px 16px rgba(0,0,0,0.1); display: none; z-index: 100; padding: 5px 0;border-radius: 4px; }
.submenu a { color: #333; padding: 10px 20px; text-decoration: none; display: block; font-size: 16px; font-weight: normal;}
.submenu a:hover {background-color: #f5f5f5;}

.menu-toggle {display: none; cursor: pointer; font-size: 24px; color: #333; }

@media (max-width: 768px) {
    .menu-toggle {display:block;}
    .menu { flex-direction: column; gap: 10px; }
    .submenu { position: relative; box-shadow: none; padding-left: 20px;}
    .submenu a { padding: 5px 10px;}
}*/

.menu-item { position: relative; }
/* PC에서는 hover로 작동 */
@media (min-width: 769px) {
    .menu-item:hover .submenu { display: block; }
}
/* 모바일에서는 클릭으로 작동하도록 변경 */
.submenu {
    position: absolute;
    top: 100%;
    left: 0;
    background-color: white;
    min-width: 120px;
    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    display: none;
    z-index: 100;
    padding: 5px 0;
    border-radius: 4px;
}
/* JS로 제어할 show 클래스 추가 */
.submenu.show {
    display: block;
}
.submenu a { color: #333; padding: 10px 20px; text-decoration: none; display: block; font-size: 16px; font-weight: normal;}
.submenu a:hover {background-color: #f5f5f5;}
/*.menu-toggle {display: none; cursor: pointer; font-size: 24px; color: #333; position: absolute; right: 15px; top: 15px; }*/
.menu-toggle {
    display: flex;
    align-items: center; /* 아이콘 수직 중앙 정렬 */
    justify-content: center; /* 아이콘 수평 중앙 정렬 */
    font-size: 24px; /* 아이콘 크기 조정 */
    cursor: pointer;
    display: none;
}

@media (max-width: 768px) {
    .menu-toggle {display: block;padding-bottom: 5px;}
    .menu { flex-direction: column; gap: 10px; }
    /* 모바일에서도 absolute 유지하되 위치 조정 */
    .submenu {
        position: absolute;
        top: 100%;
        left: 0;
        width: 120px;
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
    }
    .login-section {
        margin:0 20px;
        position: relative;
    }
    .submenu a { padding: 8px 15px; }
}