@charset "UTF-8";

@import url(board.css);
@import url(search.css);
@import url(table.css);
@import url(sub-guide.css);

/* 레이아웃 */
.sub-content-wrap{padding:13.7rem 0 0;}
.sub-inner-wrap{display:flex;gap:3.5%;margin:0 auto 8rem;padding:0 2rem;max-width:164rem;box-sizing:border-box;}
.sub-inner-wrap .lnb-wrap{width:16.25%;}
.sub-inner-wrap .content-wrap{width:80.25%;}
.sub-inner-wrap.no-lnb .content-wrap{width:100%;}

/* lnb */
.lnb-box .lnb-title{padding:1rem 0 4rem 1.2rem;font-size:2.8rem;font-weight:700;line-height:1.5;}
.lnb-box .lnb-menu{display:flex;flex-direction:column;gap:0.8rem;width:100%;}
.lnb-box .lnb-menu > li > a{display:flex;justify-content:space-between;align-items:center;gap:1rem;position:relative;padding:2.2rem 2rem;border:0.1rem solid var(--color06);border-radius:1.2rem;font-size:1.8rem;font-weight:500;line-height:1.5;color:var(--color02);transition:color, background-color, border-color 0.3s ease;box-sizing:border-box;}
.lnb-box .lnb-menu > li > a.active{border-color:var(--color-primary);background:var(--color-primary);font-weight:700;color:var(--white100);}
.lnb-box .lnb-menu > li > a.active::after{content:'';display:inline-block;flex-shrink:0;width:2.4rem;height:2.4rem;background:url(/_res/h2hubtc/h2hubtc/etc/ico-lnb-arrow.svg) no-repeat center/100%;}
.lnb-box .lnb-menu > li > a:hover{border-color:var(--color-primary);background:var(--color-primary);font-weight:700;color:var(--white100);}
.lnb-box .lnb-menu > li > a:hover::after{content:'';display:inline-block;flex-shrink:0;width:2.4rem;height:2.4rem;background:url(/_res/h2hubtc/h2hubtc/etc/ico-lnb-arrow.svg) no-repeat center/100%;}

/* 3뎁스가 있는 항목: CMS 출력의 lnb-depth02가 실제 메뉴의 3뎁스 */
.lnb-box .lnb-menu > li:has(> .lnb-depth02){border:0.1rem solid var(--color06);border-radius:1.2rem;background:var(--white100);}
.lnb-box .lnb-menu > li:has(> .lnb-depth02) > a{min-height:7.2rem;padding:2.2rem 1.9rem;border:0;color:var(--color-text-default);}
.lnb-box .lnb-menu > li:has(> .lnb-depth02) > a:is(.active, :hover){color:var(--white100);}
.lnb-box .lnb-menu > li > .lnb-depth02{margin:0 0.3rem 0.3rem;padding:1.2rem 0;border-radius:0.8rem;background:var(--color01);}
.lnb-box .lnb-menu > li:has(> a.active):has(> .lnb-depth02){border-color:var(--color-primary);background:var(--color-primary);}
.lnb-box .lnb-menu > li > a.active + .lnb-depth02{background:var(--white100);}
.lnb-box .lnb-menu > li > .lnb-depth02 > li > a{display:block;position:relative;min-height:4.2rem;padding:0.9rem 2rem 0.9rem 3.1rem;font-size:1.6rem;font-weight:400;line-height:1.5;color:var(--color-text-default);box-sizing:border-box;}
.lnb-box .lnb-menu > li > .lnb-depth02 > li > a::before{content:'';position:absolute;top:1.95rem;left:2rem;width:0.3rem;height:0.3rem;background:url(/_res/h2hubtc/h2hubtc/etc/ico-lnb-dot.svg) no-repeat center;}
.lnb-box .lnb-menu > li > .lnb-depth02 > li > a:is(.active, :hover, :focus-visible){font-weight:500;text-decoration:underline;text-underline-position:under;}

/*타이틀*/
.title-wrap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:0 0 3.2rem;}
.page-title-wrap .page-title{font-size:4rem;font-weight:700;line-height:1.5;color:var(--color-text-default);}

/* 브레드크럼 */
.path-box .path > ul{display:flex;flex-wrap:wrap;align-items:center;gap:0.4rem;}
.path-box .path > ul > li{position:relative;padding:0 2rem 0 0;}
.path-box .path > ul > li::after{content:'';position:absolute;top:calc(50% - 0.8rem);right:0;width:1.6rem;height:1.6rem;background:url(/_res/h2hubtc/h2hubtc/etc/ico-breadcumb-arrow.svg) no-repeat center/100%;}
.path-box .path > ul > li:last-of-type{padding:0;}
.path-box .path > ul > li:last-of-type::after{display:none;}
.path-box .path > ul > li > a{display:inline-block;padding:0.4rem 0.2rem;font-size:1.5rem;line-height:1.6;color:var(--black03);}
.path-box .path > ul > li > a.path-home{display:flex;width:2.4rem;height:2.4rem;background:url(/_res/h2hubtc/h2hubtc/etc/ico-breadcumb-home.svg) no-repeat center/100%;}
.path-box .path > ul > li:last-of-type a{font-weight:500;color:var(--color-text-default);}
.path-box .path-depth{display:none;}

@media screen and (max-width:1024.98px){
	/* 레이아웃 */
	.sub-content-wrap{padding:9.8rem 0 0;}
	.sub-inner-wrap{display:block;margin:0 auto 4.8rem;padding:0 1.2rem;}
	.lnb-wrap{display:none;}
	.sub-inner-wrap .content-wrap{width:100%;}

	/*타이틀*/
	.title-wrap{flex-direction:column;align-items:flex-start;gap:0.4rem;}
	.page-title-wrap .page-title{font-size:3.2rem}

	/* 브레드크럼 */
	.path-box .path > ul > li > a{font-size:1.3rem;}
	.path-box .path > ul > li > a.path-home{width:2rem;height:2rem;}
}