:root { --primary: #48BEFF ;--primary-sub: #002F7B; --text-sub: #666; --white: #ffffff; --bg-gray: #F8F9FA; --sec-pd:clamp(90px,11vw,160px); --text-main: #000000;  --font-main: 'Pretendard', sans-serif; --font-en: 'DM Sans', sans-serif; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: var(--font-main); font-size: 18px; font-weight: 400; line-height: 1.7; letter-spacing: -0.02em; color:#000;overflow-x: clip; }
a { text-decoration: none;  }
ul { list-style: none; }
img { max-width: 100%; display: block; object-fit: cover; }
i { font-style: normal; }
.text-sm { font-size: 14px; }
h1 { font-family: var(--font-en); font-size: clamp(45px, 6vw, 80px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
h2 { font-family: var(--font-en); font-size: clamp(40px, 5.2vw, 70px); font-weight: 600; line-height: 1.1; letter-spacing: -0.03em; }
h3 { font-family: var(--font-en); font-size: clamp(36px, 4.5vw, 60px); font-weight: 600; line-height: 1.2; }
h4 { font-family: var(--font-en); font-size: clamp(28px, 3.8vw, 50px); font-weight: 600; line-height: 1.2; }
h5 { font-family: var(--font-en); font-size: clamp(24px, 2.5vw, 30px); font-weight: 600; line-height: 1.2; }
h6 { font-family: var(--font-en); font-size: clamp(20px, 2vw, 24px); font-weight: 600; line-height: 1.2; }


.wrap { width: 100%; max-width: 1600px; margin: 0 auto; box-sizing: border-box;word-break:keep-all}
.nop{display:none}
.nom{display:block}
hr{height:160px;display:block;content:'';border:0;margin:0;padding:0}
@keyframes scrollDown { 100% { top: 100%; } }
@keyframes rotateBadge { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }

.board_commom{max-width:1600px ; margin: 0 auto; padding:var(--sec-pd) 0;}



@media(max-width:768px){
body { font-size: 15px; word-break:keep-all}
.wrap { padding:0px 20px;}
.board_commom{max-width:1600px ; margin: 0 auto; padding:var(--sec-pd) 20px;}
h1 { line-height: 1.4; letter-spacing: -0.03em; }
h2 {  line-height: 1.4; letter-spacing: -0.03em; }
h3 {line-height: 1.4; }
h4 { line-height: 1.4; }
h5 {  line-height: 1.4; }
h6 {  line-height: 1.4; }

.nop{display:block}
.nom{display:none}
hr{height:60px;display:block;content:'';border:0;margin:0;padding:0}

}

.ani-up { opacity:0; transform:translateY(30px); transition:opacity .8s ease-out, transform .8s ease-out; }
.ani-up.on { opacity:1; transform:translateY(0); }
.ani-down { opacity:0; transform:translateY(-30px); transition:opacity .8s ease-out, transform .8s ease-out; }
.ani-down.on { opacity:1; transform:translateY(0); }
.ani-left { opacity:0; transform:translateX(30px); transition:opacity .8s ease-out, transform .8s ease-out; }
.ani-left.on { opacity:1; transform:translateX(0); }
.ani-right { opacity:0; transform:translateX(-30px); transition:opacity .8s ease-out, transform .8s ease-out; }
.ani-right.on { opacity:1; transform:translateX(0); }
.ani-reveal-rb { clip-path:inset(100% 0 0 100%); transition:clip-path 1s cubic-bezier(.22,1,.36,1); }
.ani-reveal-rb.on { clip-path:inset(0 0 0 0); }
.ani-reveal-lb { clip-path:inset(100% 100% 0 0); transition:clip-path 1s cubic-bezier(.22,1,.36,1); }
.ani-reveal-lb.on { clip-path:inset(0 0 0 0); }
.ani-reveal-rt { clip-path:inset(0 0 100% 100%); transition:clip-path 1s cubic-bezier(.22,1,.36,1); }
.ani-reveal-rt.on { clip-path:inset(0 0 0 0); }
.ani-reveal-lt { clip-path:inset(0 100% 100% 0); transition:clip-path 1s cubic-bezier(.22,1,.36,1); }
.ani-reveal-lt.on { clip-path:inset(0 0 0 0); }







header { position: fixed; top: 0; left: 0; width: 100%; height: 90px; padding: 0 5%; display: flex; justify-content: space-between; align-items: center; z-index: 1000; border-bottom: 1px solid rgba(255,255,255,0.1); transition: transform 0.4s ease, background 0.4s ease, height 0.4s ease; }
header.scrolled { height: 80px; background: rgba(255,255,255,0.95); backdrop-filter: blur(10px); border-bottom: 1px solid #eee; }
header:hover { background: rgba(255,255,255,1); backdrop-filter: blur(10px); border-bottom: 1px solid #eee; }


header.hide { transform: translateY(-100%); }

.logo { position: relative; width: 190px; height: 50px; flex-shrink: 0; }
.logo img { position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 100%; height: auto; transition: opacity 0.3s; }
.logo-c { opacity: 0; }
.logo:hover .logo-w, header.scrolled .logo-w, header:hover .logo-w { opacity: 0; }
.logo:hover .logo-c, header.scrolled .logo-c, header:hover .logo-c { opacity: 1; }

.nav-links { display: flex; gap: 100px; height: 100%; align-items: center; margin-left: auto; margin-right: 50px; }
.nav-item { position: relative; height: 100%; display: flex; align-items: center; }
.nav-item .main-link { font-weight: 600; color: var(--white); transition: 0.3s; display: flex; align-items: center; gap: 6px; height: 100%; position: relative; }
header.scrolled .main-link, header:hover .main-link { color: var(--text-main); }
.nav-item .main-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 3px; background: var(--primary); transform: scaleX(0); transform-origin: center; transition: transform 0.3s ease; }
.nav-item:hover .main-link::after { transform: scaleX(1); }
.sub-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%); width: max-content; padding: 20px 40px 24px; display: flex; flex-direction: column; gap: 16px; opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); z-index: 10; text-align: center; font-size: 16px; background:#fff; box-shadow: 0 15px 30px rgba(0,0,0,0.08); }
.nav-item:hover .sub-menu { opacity: 1; visibility: visible; }
.sub-menu a { font-weight: 500; color: var(--text-sub); transition: all 0.3s ease; }
.sub-menu a:hover { color: var(--primary); font-weight: 600; transform: translateY(-2px); }

.header-right { display: flex; align-items: center; gap: 20px; flex-shrink: 0; }
.icon-external { width: 16px; height: 16px; }

.search-btn { background: none; border: none; color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; transition: 0.3s; }
.search-btn i { font-size: 22px; }


header.scrolled .search-btn, header:hover .search-btn { color: var(--text-main); }

.contact-us-btn { border-radius:2em;background: none; border: 1px solid rgba(255,255,255,0.6); color: var(--white); font-weight: 700; font-size: 13px; letter-spacing: 1px; padding: 0 22px; height: 40px; cursor: pointer; transition: all 0.3s; white-space: nowrap; }
.contact-us-btn { display: inline-flex; align-items: center; justify-content: center; }
.contact-us-btn:hover { background: var(--primary); border-color: var(--primary); }
header.scrolled .contact-us-btn, header:hover .contact-us-btn { color: var(--text-main); border-color: #ccc; }
header.scrolled .contact-us-btn:hover, header:hover .contact-us-btn:hover { color: var(--white); background: var(--primary); border-color: var(--primary); }

.lang-btn { background: none; border: none; color: var(--white); display: flex; align-items: center; gap: 6px; cursor: pointer; transition: 0.3s; font-weight: 700; font-size:14px}


.lang-wrap { position: relative; }
.lang-dropdown { position: absolute; top: calc(100% + 14px); right: 0; text-align:center;width: 60px; background: var(--white); border: 1px solid #eee; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.3s ease; overflow: hidden; z-index: 20; }
.lang-wrap:hover .lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.lang-option { display: block; padding: 12px 16px; font-size: 14px; font-weight: 600; color: var(--text-sub); transition: 0.2s; }
.lang-option:hover { background: var(--bg-gray); color: var(--text-main); }
.lang-option.active { color: var(--primary); }






header.scrolled .lang-btn, header:hover .lang-btn { color: var(--text-main); }










.search-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.9); z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.3s; backdrop-filter: blur(4px); }
.search-overlay.on { opacity: 1; visibility: visible; }
.search-box { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -60%); width: 700px; max-width: 90vw; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s; opacity: 0; }
.search-overlay.on .search-box { transform: translate(-50%, -50%); opacity: 1; }
.search-input-wrap { display: flex; align-items: center; border-bottom: 2px solid var(--white); padding-bottom: 16px; gap: 16px; }
.search-input-wrap i { font-size: 28px; color: rgba(255,255,255,1); }
.search-input-wrap input { flex: 1; background: none; border: none; outline: none; color: var(--white); font-family: var(--font-main); font-weight: 500; }
.search-input-wrap input::placeholder { color: rgba(255,255,255,0.3); }
.search-close { background: none; border: none; color: rgba(255,255,255,1); cursor: pointer; font-size: 28px; transition: 0.3s; display: flex; }
.search-close:hover { color: var(--primary); }
.search-hint { margin-top: 20px; color: rgba(255,255,255,0.4); font-size: 14px; letter-spacing: 1px; }


/* 3depth */
.nav-links .sub-menu .sub-item {position:relative;}
.nav-links .sub-menu .sub-item > a {display:flex;align-items:center;justify-content:space-between;gap:8px;}
.nav-links .sub-menu .sub-item > a::after {content:'›';font-size:16px;opacity:0.5;}
.nav-links .sub-menu .sub-item .depth3-menu {position:absolute;left: calc(100% + 8px);top:-20px;text-align:left;min-width:180px;background:#fff;box-shadow:4px 8px 24px rgba(0,0,0,.10);padding:12px 0;opacity:0;visibility:hidden;transition:opacity .2s,visibility .2s;}
.nav-links .sub-menu .sub-item .depth3-menu a {display:block;padding:10px 20px;font-size:14px;color:#333;white-space:nowrap;transition:color .2s;}
.nav-links .sub-menu .sub-item .depth3-menu a:hover {color:var(--primary);}
.nav-links .sub-menu .sub-item:hover .depth3-menu {opacity:1;visibility:visible;}





/* 햄버거 */
.hamburger-btn {display:none;flex-direction:column;gap:5px;background:none;border:none;cursor:pointer;padding:4px;color:#fff;}
.hamburger-btn span {display:block;width:22px;height:2px;background:currentColor;transition:background .3s;}
.hamburger-btn span:nth-child(2){width:30px}
#header.scrolled .hamburger-btn span, #header:hover .hamburger-btn span {background:#111;}

/* 전체메뉴 오버레이 */
.all-menu-overlay {position:fixed;inset:0;background:#0d1b35;z-index:9999;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s;padding:0 8%;}
.all-menu-overlay.on {opacity:1;pointer-events:all;}
.all-menu-close {position:fixed;top:36px;right:48px;background:none;border:none;color:#fff;font-size:44px;cursor:pointer;line-height:1;transition:opacity .2s;}
.all-menu-close:hover {opacity:.6;}
.all-menu-inner {display:grid;grid-template-columns:1fr 2fr 1fr 1fr;gap:0;width:100%;max-width:1400px;border-left:1px solid rgba(255,255,255,.08);}
.all-menu-col {display:flex;flex-direction:column;padding:0 48px;border-right:1px solid rgba(255,255,255,.08);}
.all-menu-col strong {color:#fff;font-size:24px;font-weight:700;padding-bottom:24px;border-bottom:1px solid rgba(255,255,255,.15);margin-bottom:32px;display:block;letter-spacing:-0.02em;}
.all-menu-col > a {color:rgba(255,255,255,.6);font-size:18px;font-weight:500;transition:color .2s;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06);}
.all-menu-col > a:hover {color:#fff;}
.all-menu-depth2 {display:flex;flex-direction:column;}
.all-menu-depth2-item {border-bottom:1px solid rgba(255,255,255,.06);}
.all-menu-depth2-item > a {display:flex;align-items:center;justify-content:space-between;color:rgba(255,255,255,.6);font-size:18px;font-weight:500;padding:10px 0;transition:color .2s;}
.all-menu-depth2-item > a:hover {color:#fff;}
.all-menu-depth2-item > a::after {content:'›';font-size:20px;opacity:.4;}
.all-menu-depth3 {display:flex;flex-wrap:wrap;gap:4px 24px;padding:8px 0 14px 16px;border-left:2px solid rgba(72,190,255,.3);margin-bottom:4px;}
.all-menu-depth3 a {color:rgba(255,255,255,.38);font-size:14px;padding:3px 0;transition:color .2s;white-space:nowrap;}
.all-menu-depth3 a:hover {color:var(--primary);}


@media (max-width: 1024px) {
    .nav-links,
    .header-right .contact-us-btn,
    .header-right .search-btn,
    .header-right .lang-wrap { display: none; }
    .hamburger-btn { display: flex; }
	    .header-right { display: flex; align-items: center; gap: 12px; margin-left: auto; margin-right:10px;}
    .hamburger-btn { margin-left: 0; }
}

@media (max-width: 768px) {
    .logo img{width:130px}
    .all-menu-overlay { justify-content: flex-start; align-items: stretch; padding: 0; }
    .all-menu-close { top: 20px; right: 20px; font-size: 32px; }
    .all-menu-inner { display: block; grid-template-columns: none; max-width: 100%; width: 100%; height: 100vh; overflow-y: auto; border-left: none; padding: 80px 24px 40px; }

    .all-menu-col { padding: 0; border-right: none; border-bottom: 1px solid rgba(255,255,255,.08); }
    .all-menu-col strong { padding: 18px 0; border-bottom: none; margin-bottom: 0; display: flex; align-items: center; justify-content: space-between; cursor: pointer; }
    .all-menu-col strong::after { content: '+'; font-weight: 400; color: rgba(255,255,255,.4); transition: transform 0.3s; }
    .all-menu-col.on strong::after { transform: rotate(45deg); }

    .all-menu-depth2 { max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
    .all-menu-col.on .all-menu-depth2 { max-height: 2000px; }
    .all-menu-depth2-item { border-bottom: none; }
    .all-menu-depth2-item > a { padding: 10px 0 10px 8px; font-size: 15px; }
    .all-menu-depth2-item > a::after { display: none; }
    .all-menu-depth3 { border-left: 2px solid rgba(72,190,255,.2); margin: 0 0 8px 8px; padding: 6px 0 6px 12px; }
}



.m-search-btn, .m-lang-wrap { display: none; }

.m-search-btn { background: none; border: none; color: #fff; cursor: pointer; width: 36px; height: 36px; align-items: center; justify-content: center; }
#header.scrolled .m-search-btn, #header:hover .m-search-btn { color: #111; }

.m-lang-wrap { position: relative; }
.m-lang-btn { background: none; border: none; color: #fff; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; align-items: center; }
#header.scrolled .m-lang-btn, #header:hover .m-lang-btn { color: #111; }
.m-lang-dropdown { position: absolute; top: calc(100% + 12px); right: 0; text-align: center; width: 60px; background: var(--white); border: 1px solid #eee; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.1); display: flex; flex-direction: column; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: all 0.3s ease; overflow: hidden; z-index: 20; }
.m-lang-wrap.on .m-lang-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.m-lang-option { display: block; padding: 10px 14px; font-size: 13px; font-weight: 600; color: var(--text-sub); }
.m-lang-option:hover { background: var(--bg-gray); color: var(--text-main); }
.m-lang-option.active { color: var(--primary); }

@media (max-width: 1024px) {
    .m-search-btn { display: flex; }
    .m-lang-wrap { display: block; }
}






.contact-dim { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 1500; opacity: 0; visibility: hidden; transition: all 0.3s; }
.contact-dim.on { opacity: 1; visibility: visible; }
.contact-panel { position: fixed; top: 0; right: -480px; width: 460px; height: 100vh; background: var(--white); z-index: 1600; transition: right 0.4s cubic-bezier(0.22, 1, 0.36, 1); overflow-y: auto; box-shadow: -10px 0 40px rgba(0,0,0,0.15); }
.contact-panel.on { right: 0; }
.contact-panel-inner { padding: 40px 36px; }
.contact-panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; }
.contact-panel-head strong { font-family: var(--font-en); font-size: 22px; font-weight: 700; letter-spacing: 2px; }
.contact-panel-close { background: none; border: none; font-size: 28px; cursor: pointer; color: var(--text-main); transition: 0.3s; display: flex; }
.contact-panel-close:hover { color: var(--primary); transform: rotate(90deg); }
.contact-panel-desc { font-size: 14px; color: var(--text-sub); margin-bottom: 28px; }
.contact-highlight { display: flex; align-items: center; gap: 16px; background: #f4f4f4; border-left: 3px solid var(--primary); padding: 16px 20px; margin-bottom: 24px; border-radius: 0 8px 8px 0; }
.contact-highlight i { font-size: 28px; color: var(--primary); flex-shrink: 0; }
.contact-highlight strong { display: block; font-size: 15px; margin-bottom: 2px; }
.contact-highlight p { font-size: 13px; color: var(--text-sub); margin: 0; }
.contact-form input[type="text"],
.contact-form textarea { width: 100%; border: 1px solid #e0e0e0; padding: 13px 16px; font-size: 15px; font-family: var(--font-main); outline: none; transition: border 0.3s; margin-bottom: 12px; border-radius: 4px; }
.contact-form input:focus,
.contact-form textarea:focus { border-color: var(--primary); }
.contact-form textarea { resize: none; }
.contact-agree { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--text-sub); margin-bottom: 20px; cursor: pointer; }
.contact-agree input { accent-color: var(--primary); width: 16px; height: 16px; }
.contact-submit { width: 100%; background: var(--primary); color: var(--white); border: none; padding: 16px; font-size: 16px; font-weight: 700; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.3s; border-radius:2em; }
.contact-submit:hover { background: var(--primary-sub);; }







footer { background: #111; color: var(--white); padding: 0 5% 40px; }
.footer-top { display: flex; justify-content: space-between; align-items: center; padding: 60px 0; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 60px; }
.footer-slogan-wrap h4 { color: var(--white); line-height: 1.4; }
.footer-inner { display: flex; gap: 60px; padding-bottom: 60px; border-bottom: 1px solid rgba(255,255,255,0.1); margin-bottom: 32px; }
.footer-col { display: flex; flex-direction: column; gap: 12px; }
.footer-col-logo { margin-right: auto; gap: 24px; }
.footer-logo-img img { width: 150px; height: auto; }
.footer-addr { color: rgba(255,255,255,0.5); line-height: 1.8; }
.footer-col-title { color: var(--white); font-weight: 700; margin-bottom: 8px; }
.footer-col a { color: rgba(255,255,255,0.5); transition: color 0.3s; }
.footer-col a:hover { color: var(--white); }
.footer-bottom { display: flex; align-items: center; color: rgba(255,255,255,0.4); }
.footer-privacy { color: var(--white); font-weight: 700; transition: color 0.3s; }
.footer-privacy:hover { color: var(--primary); }

/* 상단 이동 버튼: 푸터 밖으로 분리, 스크롤시 항상 고정 */
.top-btn { position: fixed; right: 5%; bottom: 40px; width: 56px; height: 56px; border-radius: 50%; border: none; background: var(--primary); color: var(--white); cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 500; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s; }
.top-btn.show { opacity: 1; visibility: visible; transform: translateY(0); }

.top-btn-arrow { position: relative; width: 22px; height: 22px; overflow: hidden; }
.top-btn-arrow i { position: absolute; top: 0; left: 0; width: 100%; height: 100%; font-size: 22px; display: flex; align-items: center; justify-content: center; transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.top-btn-arrow .arrow-1 { transform: translateY(0); }
.top-btn-arrow .arrow-2 { transform: translateY(100%); }

.top-btn:hover .top-btn-arrow .arrow-1 { transform: translateY(-100%); }
.top-btn:hover .top-btn-arrow .arrow-2 { transform: translateY(0); }

@keyframes topBtnArrow {
    0% { transform: translateY(6px); opacity: 0; }
    30% { opacity: 1; }
    60% { transform: translateY(-10px); opacity: 0; }
    61% { transform: translateY(6px); opacity: 0; }
    100% { transform: translateY(6px); opacity: 0; }
}


/*개인정보취급방침*/
.footer-privacy { color: var(--white); font-weight: 700; transition: color 0.3s; cursor: pointer; }
.footer-privacy:hover { color: var(--primary); }

.privacy-dim { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 2000; opacity: 0; visibility: hidden; transition: all 0.3s; display: flex; align-items: center; justify-content: center; }
.privacy-dim.on { opacity: 1; visibility: visible; }
.privacy-modal { width: 600px; max-width: 90vw; max-height: 80vh; background: var(--white); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; transform: translateY(20px); transition: transform 0.3s; }
.privacy-dim.on .privacy-modal { transform: translateY(0); }
.privacy-modal-head { display: flex; justify-content: space-between; align-items: center; padding: 24px 30px; border-bottom: 1px solid #eee; flex-shrink: 0; }
.privacy-modal-head strong { font-size: 18px; font-weight: 700; color: var(--text-main); }
.privacy-close { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--text-sub); display: flex; transition: 0.3s; }
.privacy-close:hover { color: var(--primary); }
.privacy-modal-body { padding: 30px; overflow-y: auto; color: var(--text-sub); font-size: 14px; line-height: 1.8; }
.privacy-modal-body h6 { font-size: 15px; color: var(--text-main); margin: 24px 0 8px; font-family: var(--font-main); }
.privacy-modal-body h6:first-child { margin-top: 0; }
.privacy-modal-body p { margin-bottom: 4px; }
.privacy-note { margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee; font-size: 13px; color: #999; }


.sns-links { display: flex; flex-direction: row; gap: 12px; align-items: center; }
.sns-links a { background: var(--white); color: #111; transition: all 0.3s; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px; }
.sns-links a:hover { background: var(--primary); color: var(--white); }
.naver-blog-btn { background: var(--white) !important; }
.naver-blog-btn svg { fill: #111; }
.naver-blog-btn:hover svg { fill: var(--white); }


@media (max-width: 1024px) {
    .footer-inner { flex-wrap: wrap; gap: 40px 30px; }
    .footer-col-logo { flex: 0 0 100%; margin-right: 0; }
    .footer-col:not(.footer-col-logo) { flex: 0 0 calc(33.333% - 20px); }
}

@media (max-width: 768px) {
    footer { padding: 0 20px 30px; }
    .footer-top { flex-direction: column; align-items: flex-start; gap: 20px; padding: 40px 0; }
    .footer-inner { flex-direction: column; gap: 30px; padding-bottom: 40px; }
    .footer-col:not(.footer-col-logo) { display: none; }
    .footer-col-logo { flex: none; }
    .footer-logo-img img { width: 120px; }
    .sns-links { flex-wrap: wrap; }
    .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
    .privacy-modal { width: 100%; max-width: 90vw; }
    .privacy-modal-body { padding: 20px; }
}



.new_icon { display: inline-flex; align-items: center; justify-content: center; padding:2px 5px; background: var(--primary-sub); color: #fff; border-radius: 20%; 
font-size: 10px; font-weight: 700; margin-left: 4px; vertical-align: middle; }

.view_more { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; text-decoration: none; border: 1px solid #ccc; padding: 10px 30px; border-radius: 3em; transition: all 0.3s;background:transparent  }
.view_more i { transition: transform 0.3s ease; font-size: 24px; }
.view_more:hover { border-color: var(--primary); color: var(--primary); }
.view_more:hover i { transform: rotate(45deg); }


.view_more2 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-weight: 700; text-decoration: none; border: 1px solid #ccc; padding: 20px 60px !important; border-radius: 3em; transition: all 0.3s; background: #fff; box-sizing: border-box; font-family: inherit; font-size: inherit; color: inherit; line-height: 1; cursor: pointer; }
.view_more2:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.view_more2 i { transition: transform 0.3s ease; font-size: 24px; }
.view_more2 svg { transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); margin-left: 15px; }
.view_more2:hover svg { transform: translateX(5px); }


@media (max-width: 768px) {
    .view_more { padding: 5px 10px; font-size: 13px; }
    .view_more i { font-size: 14px; }
    .view_more2 { padding: 14px 36px !important; font-size: 14px; }
    .view_more2 i { font-size: 14px; }
    .view_more2 svg { margin-left: 8px; width: 16px; height: 16px; }
}


.fade-up { opacity: 0; }

#bo_cate { text-align:center !important; margin:25px 0 80px 0 !important; }
#bo_cate ul { display:flex !important; justify-content:center !important; gap:24px !important; }
#bo_cate li { display:inline-block !important; padding:0 !important; }
#bo_cate a { font-size:24px; display:flex !important; flex-direction:column !important; align-items:center !important; padding:10px 50px !important; border:none !important; border-bottom:1px solid #000 !important; border-radius:0 !important; background:none !important; color:#000 !important; box-shadow:none !important; position:relative !important; }
#bo_cate a::before { content:'' !important; display:block !important; width:10px !important; height:10px !important; border-radius:50% !important; background:transparent !important; margin-bottom:8px !important; transition:background .3s !important; }
#bo_cate a::after { content:'' !important; position:absolute !important; bottom:-1px !important; left:0 !important; width:0 !important; height:2px !important; background:#000 !important; transition:width .4s ease !important; }
#bo_cate a:hover::after { width:100% !important; }
#bo_cate a:hover { background:none !important; border-bottom-color:transparent !important; }
#bo_cate #bo_cate_on { border-bottom:2px solid #000 !important; background:none !important; box-shadow:none !important; }
#bo_cate #bo_cate_on::before { background:var(--primary) !important; }
#bo_cate #bo_cate_on::after { display:none !important; }

.sub-visual { position: relative; width: 100%; height: 55vh; display: flex; align-items: center; color: var(--white); }
.sub-bg-wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; z-index: -2; }
.sub-bg { position: absolute; inset: 0; width: 100%; height: 100%; background: url('/images/hero_sub1.jpg') center/cover; transform: scale(1.05); transform-origin: center center; }
.sub-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.3); z-index: 1; }
.sv-inner { width: 100%; max-width: 1600px; margin: 0 auto; box-sizing: border-box; }
.sv-label { display: inline-flex; align-items: center; margin-bottom: 20px; gap: 20px; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,1); font-family: var(--en); }
.sv-label::after { content: ''; display: block; width: 80px; height: 1px; background: rgba(255,255,255,1); }
.sv-title { font-weight: 600; line-height: 1.3; margin: 0; }

#bo_v img{display:block;margin:0 auto}

@media (max-width:768px) {
.sub-visual { position: relative; width: 100%; height: 35vh;  display: flex; align-items: center; color: var(--white); padding:0 20px}
#bo_cate { text-align:center !important; margin:25px 0 0px 0 !important; }
#bo_cate a { font-size:18px; padding:5px 0px !important; }
.cert_subject{margin-bottom:40px}
}






@keyframes sv-fade { from { opacity:0; transform:translateY(20px); } to { opacity:1; transform:translateY(0); } }
@keyframes sv-line { from { width:0; opacity:0; } to { width:80px; opacity:1; } }

.sv-label { opacity:0; animation:sv-fade .6s ease-out .1s forwards; }
.sv-label::after { width:0; animation:sv-line .5s ease-out .4s forwards; }
.sv-title { opacity:0; animation:sv-fade .6s ease-out .25s forwards; }

.sv-location { position: absolute; bottom: 50%; right: 10%; display: flex; align-items: center; height: auto; z-index: 10; background: rgba(255,255,255,0.15); backdrop-filter: blur(10px); padding: 16px 30px; border-radius: 2em; border: 1px solid rgba(255,255,255,0.2); }
.sv-loc-home { display: flex; align-items: center; justify-content: center; color: var(--white); transition: 0.3s; font-size: 20px; }
.sv-loc-home:hover { color: var(--primary); }
.sv-loc-sep { color: rgba(255,255,255,0.4); margin: 0 16px; }
.sv-loc-item { position: relative; display: flex; align-items: center; color: var(--white); font-weight: 600; cursor: pointer; transition: 0.3s; }
.sv-loc-item > span { display: flex; align-items: center; gap: 6px; }
.sv-loc-item i { color: rgba(255,255,255,0.7); transition: transform 0.3s ease; }
.sv-loc-item:hover i { transform: rotate(-180deg); color: var(--white); }
.sv-dropdown { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: max-content; background: var(--white); border: 1px solid #e1e1e1; display: flex; flex-direction: column; opacity: 0; visibility: hidden; transition: all 0.3s ease; z-index: 20; border-radius: 12px; overflow: hidden; }
.sv-loc-item:hover .sv-dropdown { opacity: 1; visibility: visible; padding:20px 40px}
.sv-dropdown li a { display: block;  color: var(--text-sub); transition: 0.3s; white-space: nowrap;line-height:2}
.sv-dropdown li a:hover { color: var(--primary);  }


.sub-bg-01 { background-image: url('/images/hero_sub1.jpg'); }
.sub-bg-02 { background-image: url('/images/hero_sub2.jpg'); }
.sub-bg-03 { background-image: url('/images/hero_sub3.jpg'); }
.sub-bg-04 { background-image: url('/images/hero_sub4.jpg'); }









/****************기업정보******************************/
/**********************************************/
/*.hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('') center/cover; z-index: -2; transform: scale(1.05); border:1px solid red}*/



/*section.wrap {padding:160px 0; max-width: 1600px; margin: 0 auto; }*/
.sec-title { font-weight: 600; color: var(--text-main); line-height: 1.3; margin-bottom: 20px; }
.sec-desc { color: var(--text-sub); margin-bottom: 80px; word-break: keep-all; font-weight: 300; }


.ov-bg-wrap { position: relative; width: 100%; overflow: hidden; }
.ov-bg-mask { width: 100%; height: 500px; position: relative; overflow: hidden; clip-path: inset(0 0 100% 0); }
.ov-bg-img { width: 100%; height: 500px; object-fit: cover; display: block; }
.ov-bg-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); }

.ov-list-horizontal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; padding: 0 60px; margin: 0; opacity: 0; transition: opacity 0.6s ease; }
.ov-list-horizontal.on { opacity: 1; }

.ov-list-horizontal li { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px; border-right: 1px solid rgba(255,255,255,0.2); }
.ov-list-horizontal li:last-child { border-right: none; }
.ov-list-horizontal .ov-th { color: rgba(255,255,255,0.6); font-weight: 600; margin-bottom: 12px; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ov-list-horizontal .ov-th i { color: var(--primary); }
.ov-list-horizontal .ov-td { color: #fff; font-weight: 400; word-break: keep-all; text-align: center; }

@media (max-width: 1024px) {
    .ov-bg-img { height: 700px; }
    .ov-list-horizontal { flex-wrap: wrap; gap: 30px; padding: 40px 30px; align-content: center; }
    .ov-list-horizontal li { flex: 0 0 calc(50% - 15px); border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); padding-bottom: 20px; }
    .ov-list-horizontal li:last-child { border-bottom: none; }
}

@media (max-width: 768px) {
    .ov-bg-wrap { height: auto; min-height:600px; }
    .ov-bg-mask, .ov-bg-img { height: auto; min-height: 600px; }
    .ov-list-horizontal { justify-content: flex-start; gap: 20px; padding: 40px 20px; }
    .ov-list-horizontal li { flex: 0 0 100%; border-right: none; border-bottom: none; }
}


/*조직도*/
.org-sec {text-align:Center  }
.org-wrap { width: 100%; overflow-x: auto; }
.org-wrap svg text { font-size: 10px; font-family: var(--font-main); }
.org-wrap svg text.sm {  }







.visual-bridge { position: relative; text-align:center;width: 100%; height: 80vh; display: flex; flex-direction: column; justify-content: center; align-items: center;  color: var(--white); overflow: hidden;  }

.vb-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('/images/p11_2.jpg') center/cover fixed; z-index: -2; transform: scale(1.35); }
.vb-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.6); z-index: -1; }
.vb-quote { color:#fff;max-width:1300px;margin:0 auto;}
.vb-title { font-weight: 600; line-height: 1.3; margin-bottom: 20px; }



.acc-container { display: flex; gap: 20px; width: 100%; height: 600px; }
.acc-item { flex: 1; position: relative;  overflow: hidden; cursor: pointer; transition: flex 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.acc-item:hover { flex: 2.5; }
.acc-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transition: transform 0.6s ease; z-index: 1; }
.acc-item:hover .acc-bg { transform: scale(1.05); }
.acc-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 20%, rgba(0,0,0,0) 100%); z-index: 2; transition: 0.4s; }
.acc-item:hover .acc-overlay { background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0) 100%); }
.acc-content { position: absolute; bottom: 40px; left: 40px; right: 40px; z-index: 3; color: var(--white); }
.acc-label { font-weight: 700; color: var(--primary); margin-bottom: 10px; display: block; text-transform: uppercase; transition: 0.4s; }
.acc-item:hover .acc-label { color: var(--white); opacity: 0.8; }
.acc-title { font-weight: 600; margin-bottom: 15px; white-space: nowrap; }
.acc-desc { font-weight: 300; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; max-width: 400px; word-break: keep-all; }
.acc-item:hover .acc-desc { opacity: 1; transform: translateY(0); transition-delay: 0.2s; }



.quality-sec { background: var(--bg-gray); padding:var(--sec-pd) 0}
.quality-inner { max-width: 1600px; margin: 0 auto; }
.qual-top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 80px; }
.iso-badge { display: inline-block; padding: 10px 24px; border: 2px solid var(--primary); color: var(--primary); font-weight: 700; border-radius: 50px; margin-bottom: 20px; }
.qual-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; }
.qual-card { border-top: 4px solid #ddd; padding-top: 40px; transition: 0.4s ease; cursor: default; }
.qual-card:hover { border-color: var(--primary); transform: translateY(-10px); }
.q-num { font-weight: 900; color: #ddd; line-height: 1; margin-bottom: 20px; display: block; transition: 0.4s; }
.qual-card:hover .q-num { color: var(--primary); }
.qual-card h5 { font-weight: 600; margin-bottom:30px; color: var(--text-main); }
.qual-card p { color: var(--text-sub); word-break: keep-all; margin-top: 20px; }
.sv-cat-nav { position: absolute; top: 50%; transform: translateY(-50%); left: 0; width: 100%; display: flex; justify-content: space-between; padding: 0 3%; z-index: 10; box-sizing: border-box; }
.sv-cat-prev, .sv-cat-next { width: 56px; height: 56px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.4); color: var(--white); display: flex; align-items: center; justify-content: center; font-size: 22px; transition: all 0.3s; }
.sv-cat-prev:hover, .sv-cat-next:hover { border-color: var(--primary); color: var(--primary); }




@media (max-width: 768px) {
.visual-bridge{padding:80px 0;height:auto}
.vb-quote { color:#fff;width:80%;margin:0 auto;}


    .acc-container { flex-direction: column; height: auto; gap: 16px; }
    .acc-item { flex: none; height: 280px; }
    .acc-item:hover { flex: none; }
    .acc-bg { transform: scale(1); }
    .acc-item:hover .acc-bg { transform: scale(1); }
    .acc-overlay { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%); }
    .acc-item:hover .acc-overlay { background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.3) 60%, rgba(0,0,0,0.1) 100%); }
    .acc-content { bottom: 24px; left: 24px; right: 24px; }
    .acc-title { white-space: normal; }
    .acc-desc { opacity: 1; transform: translateY(0); }
}


@media (max-width: 1024px) {
    .qual-grid { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}

@media (max-width: 768px) {
    .qual-top { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 40px; }
    .qual-top p { text-align: left; max-width: 100%; }
    .qual-grid { grid-template-columns: 1fr; gap: 30px; }
    .qual-card img { width: 60px; }
}

/*ci*/
.cibi-sec {  }
.cibi-top { display: flex; gap: 80px; align-items: center; margin-bottom: 80px; padding-bottom: 80px; border-bottom: 1px solid #eee; }
.cibi-logo-area { flex: 0 0 450px; height: 450px; border: 1px solid #e8e8e8; border-radius: 12px; display: flex; align-items: center; justify-content: center; background-color: #fff; background-image: linear-gradient(#efefef 1px, transparent 1px), linear-gradient(90deg, #efefef 1px, transparent 1px); background-size: 30px 30px; }
.cibi-logo-area img { width:260px; display: block; }
.cibi-text-area { flex: 1; }
.cibi-headline {  margin-bottom: 24px; word-break: keep-all; }
.cibi-main-text { color: #666; line-height: 1.9; word-break: keep-all; }
.cibi-bottom { display: flex; gap: 40px; }
.cibi-swatch { flex: 1; display: flex; gap: 32px; align-items: flex-start; }
.swatch-block { flex: 0 0 140px; height: 140px; border-radius: 8px; display: flex; align-items: flex-end; padding: 16px; }
.swatch-title { color: #fff; font-weight: 700; }
.swatch-info { flex: 1; padding-top: 4px; }
.swatch-desc { color: #333; margin-bottom: 16px; word-break: keep-all; line-height: 1.6; }
.swatch-detail { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.swatch-detail li { display: flex; gap: 16px; }
.swatch-detail em { color: #999; font-style: normal; min-width: 40px; }
.swatch-detail span { color: #333; }

@media (max-width: 1440px) {
.cibi-bottom { flex-direction: column; gap: 32px; }
}
@media (max-width: 1024px) {
.cibi-sec {  }
.cibi-top { flex-direction: column; gap: 40px; margin-bottom: 60px; padding-bottom: 60px; }
.cibi-logo-area { flex: 0 0 auto; width: 100%; height: 200px; }
.cibi-bottom { flex-direction: column; }
}
@media (max-width: 768px) {
.cibi-sec {  }
.cibi-logo-area { height: 160px; }
.cibi-logo-area img { width: 120px; }
.swatch-block { flex: 0 0 100px; height: 100px; }
}


/*파트너쉽*/
.partner-sec {  }
.partner-slider-wrap { overflow: hidden; width: 100%; position: relative;  }
.partner-slider-wrap::before { content: ""; position: absolute; top: 0; left: 0; width: 80px; height: 100%; background: linear-gradient(to right, #fff, transparent); z-index: 2; }
.partner-slider-wrap::after { content: ""; position: absolute; top: 0; right: 0; width: 80px; height: 100%; background: linear-gradient(to left, #fff, transparent); z-index: 2; }
.partner-track { display: flex; align-items: center; gap: 60px; animation: slideLeft 30s linear infinite; width: max-content; }
.partner-track:hover { animation-play-state: paused; }
.partner-item { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width:200px; }
.partner-item img { max-width: 100%; object-fit: contain; filter:  opacity: 1; transition: all 0.3s; }
.partner-item:hover img { filter: grayscale(0%); opacity: 1; }

@keyframes slideLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

@media (max-width: 768px) {
.partner-sec {  }
.partner-item { width: 120px; }
}


/************오시는길***********************/
/***********************************/
.sub-location { padding:var(--sec-pd) 0; }
.loc-btns { display:flex; gap:10px; justify-content:flex-end; margin-bottom:16px; }
.loc-btn { display:inline-flex; align-items:center; gap:6px; height:38px; padding:0 16px; border:1px solid #ddd; background:#fff; color:#333; text-decoration:none; cursor:pointer; transition:all .15s; }
.loc-btn:hover { border-color:#111; color:#111; }
.loc-btn svg { width:16px; height:16px; }
.loc-map { width:100%; height:480px; }
.loc-map iframe { width:100%; height:100%; border:none; }
.loc-info { display:grid; grid-template-columns:1fr 1fr 1fr; border:1px solid #eee; border-top:2px solid #111; margin-top:40px; }
.loc-item { padding:32px 28px; border-right:1px solid #eee; }
.loc-item:last-child { border-right:none; }
.loc-icon { width:80px; height:80px; margin-bottom:20px; border-radius:50%; border:1px solid var(--primary); display:flex; align-items:center; justify-content:center; padding:0; }
.loc-icon svg { width:44px; height:44px; flex-shrink:0; }
.loc-lbl { color:var(--primary); margin-bottom:8px; font-weight:bold}
@media (max-width:768px) { .loc-info { grid-template-columns:1fr; } .loc-item { border-right:none; border-bottom:1px solid #eee; } .loc-item:last-child { border-bottom:none; } .loc-map { height:300px; } }
@media print { .loc-btns { display:none; } }





/*교육장비*/
.sub-biz { position:relative; overflow:hidden; padding:var(--sec-pd) 0; }
.sub-biz-en { text-align:right; line-height:60px;position:absolute; top:250px; right:0%; transform:scale(6); transform-origin:right center; opacity:0; z-index:0; pointer-events:none; margin:0; transition:transform 2.5s cubic-bezier(.22,1,.36,1), opacity 2s cubic-bezier(.22,1,.36,1); }
.sub-biz-en.on { transform:scale(3); opacity:0.04; }

.sub-biz-head { position:relative; margin-bottom:60px; }
.sub-biz-head h4 { position:relative; font-weight:400;letter-spacing:-1.5px}
.sub-biz-head p { position:relative; }
.sub-biz-head h1{color:var(--primary-sub);font-weight:800;margin-bottom:30px;}
.sub-biz-row { display:flex; height:600px; gap:20px; margin-bottom:20px; word-break:keep-all;}
.sub-biz-panel { color:#fff;position:relative; flex:1; overflow:hidden; cursor:pointer; background-image:var(--bg); background-size:cover; background-position:center; clip-path:inset(0 100% 100% 0); transition:clip-path 1.2s cubic-bezier(.22,1,.36,1), flex .6s cubic-bezier(.22,1,.36,1); }
.sub-biz-panel.on { clip-path:inset(0 0 0 0); }
.sub-biz-row:hover .sub-biz-panel { flex:.5; :keep-all;}
.sub-biz-row:hover .sub-biz-panel:hover { flex:1; }
.sub-biz-overlay { position:absolute; inset:0; background:rgba(0,0,0,.8); opacity:0.2; transition:opacity .4s; }
.sub-biz-panel:hover .sub-biz-overlay { opacity:1; }
.sub-biz-inner { position:absolute; inset:0; padding:50px; display:flex; flex-direction:column; z-index:2; }
.sub-biz-title { margin-bottom:0;word-break:keep-all; }
.sub-biz-title  em{font-size:0.8em}
.sub-biz-desc { opacity:0; margin-top:20px; max-width:400px; transition:opacity .4s .2s; }
.sub-biz-panel:hover .sub-biz-desc { opacity:1; }

@media (max-width:1024px) { 
.sub-biz-row { height:400px; } 
}

@media (max-width:768px) { 
.sub-biz-row { flex-wrap:wrap; height:auto; } 
.sub-biz-panel { flex:none; width:calc(50% - 4px); height:350px; } 
}

@media (max-width:600px) { 
.sub-biz-panel { width:100%; height:300px; } 
.sub-biz-overlay { opacity:0.6; } 
.sub-biz-desc { opacity:1; } 
}