@charset "utf-8";

/* 애니랩 서브페이지 내비게이션 */
#anylab_mysubmenu { width:100%; height:clamp(56px, 4.7vw, 72px); border-bottom:1px solid #eee; background:#fff; position:relative; z-index:200; }
#anylab_mysubmenu ul, #anylab_mysubmenu ol { margin:0; padding:0; list-style:none; }
#anylab_mysubmenu button { border:0; background:transparent; }
#anylab_mysubmenu .anylab_sub_inner { display:flex; align-items:center; justify-content:space-between; gap:clamp(20px, 4vw, 70px); width:100%; max-width:1230px; height:100%; margin:0 auto; padding:0 15px; }

/* 현재 위치 */
#anylab_mysubmenu .sub_breadcrumb { display:flex; align-items:center; min-width:0; color:#777; }
#anylab_mysubmenu .sub_breadcrumb li { display:flex; align-items:center; min-width:0; font-size:clamp(11px, 0.8vw, 14px); white-space:nowrap; }
#anylab_mysubmenu .sub_breadcrumb li + li::before { content:'\e93f'; margin:0 clamp(8px, 0.8vw, 14px); font-family:'xeicon'; font-size:10px; color:#aaa; }
#anylab_mysubmenu .sub_breadcrumb a, #anylab_mysubmenu .sub_breadcrumb span { display:block; max-width:clamp(90px, 10vw, 170px); color:#777; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#anylab_mysubmenu .sub_breadcrumb a:hover { color:var(--point-color); }
#anylab_mysubmenu .sub_breadcrumb [aria-current="page"] span { font-weight:600; color:#222; }
#anylab_mysubmenu .breadcrumb_home a { display:flex; align-items:center; justify-content:center; max-width:none; font-size:clamp(14px, 1vw, 17px); color:#888; }
#anylab_mysubmenu .breadcrumb_home svg { display:block; width:1em; height:1em; }

/* 드롭다운 내비게이션 */
#anylab_mysubmenu .sub_navigation { display:flex; align-items:stretch; flex:0 0 auto; height:100%; }
#anylab_mysubmenu .sub_dropdown { width:clamp(190px, 21vw, 230px); height:100%; position:relative; }
#anylab_mysubmenu .sub_toggle { display:flex; align-items:center; justify-content:space-between; gap:15px; width:100%; height:100%; padding:0 clamp(14px, 1.5vw, 24px); border-left:1px solid #eee; font-size:clamp(13px, 1.5vw, 16px); font-weight:600; color:#222; text-align:left; cursor:pointer; }
#anylab_mysubmenu .sub_toggle span { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#anylab_mysubmenu .sub_toggle i { flex:0 0 auto; font-size:clamp(13px, 1vw, 17px); transition:transform 0.2s ease; }
#anylab_mysubmenu .sub_dropdown.on .sub_toggle { color:var(--point-color); }
#anylab_mysubmenu .sub_dropdown.on .sub_toggle i { transform:rotate(180deg); }
#anylab_mysubmenu .sub_list { visibility:hidden; opacity:0; width:100%; padding:5px !important; border:1px solid #e7e7e7; background:#fff; box-shadow:0 10px 25px rgba(20,35,55,0.12); position:absolute; top:100%; left:0; transform:translateY(-6px); transition:opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease; }
#anylab_mysubmenu .sub_dropdown.on .sub_list { visibility:visible; opacity:1; transform:translateY(0); }
#anylab_mysubmenu .sub_list a { display:flex; align-items:center; min-height:clamp(45px, 4vw, 52px); padding-left:15px; font-size:clamp(13px, 1.4vw, 15px); font-weight:500; color:#aaa; text-align:left; transition:background-color 0.2s ease, color 0.2s ease; }
#anylab_mysubmenu .sub_list a:hover { color:var(--point-color); }
#anylab_mysubmenu .sub_list a.active { background:#f2f6fc; color:var(--point-color); font-weight:600; }

/* fixed */
#anylab_mysubmenu.fixed { width:100%; position:fixed; top:0; left:0; }

@media (max-width:760px) {
	#anylab_mysubmenu { height:auto; }
	#anylab_mysubmenu .anylab_sub_inner { display:block; padding:0; }
	#anylab_mysubmenu .sub_breadcrumb { height:44px; padding:0 15px; border-bottom:1px solid #eee; }
	#anylab_mysubmenu .sub_navigation { width:100%; height:52px; }
	#anylab_mysubmenu .sub_dropdown { flex:1; width:50%; }
	#anylab_mysubmenu .sub_toggle { padding:0 15px; }
	#anylab_mysubmenu .sub_depth2 .sub_list { left:-1px; }
}

@media (max-width:430px) {
	#anylab_mysubmenu .sub_breadcrumb li { font-size:11px; }
	#anylab_mysubmenu .sub_breadcrumb li + li::before { margin:0 7px; }
	#anylab_mysubmenu .sub_breadcrumb a, #anylab_mysubmenu .sub_breadcrumb span { max-width:100px; }
	#anylab_mysubmenu .sub_toggle { padding:0 12px; }
}