@charset "utf-8";
@import url('font/fs_font.css');

/* ========================= 공통 ========================= */
a {transition: all 400ms cubic-bezier(0.770, 0.000, 0.175, 1.000);transition-timing-function: cubic-bezier(0.770, 0.000, 0.175, 1.000);}
img {max-width:100%;}
.main_wrap {width:clamp(0px, 96%, 1760px);margin:0 auto;}
.wrap {width:clamp(0px, 96%, 1500px);margin:0 auto;}


/* ========================= 헤더영역 ========================= */
#fs_header {
	position:fixed;left:0;top:0;z-index:100;width:100%;height:10rem;border-bottom:1px solid transparent;transition:all 0.3s ease;
	/* 헤더 상태 관리용 CSS 변수 선언 (기본 상태는 첫번째 및 네번째 슬라이드 기준) */
	--hd-logo-flt: brightness(0) invert(1); /* 로고 흰색 */
	--hd-1dep-c: #fff; /* 1뎁스 색상 */
	--hd-gnb-icon-bg: #fff; /* gnb 아이콘 배경색 */
	--hd-gnb-icon-c: var(--primary); /* gnb 아이콘 글자색 */
	--hd-gnb-text-c: #fff; /* gnb 텍스트 색상 */
}
.fs_head {display:flex;justify-content:space-between;align-items:center; height:100%;}

/* 헤더 상태별 색상 변경: 두번째, 세번째 슬라이드 (배경 투명, 내부 요소 어둡게) */
#fs_header.header_dark {
	--hd-logo-flt: none; /* 로고 원본 */
	--hd-1dep-c: var(--black);
	--hd-gnb-icon-bg: var(--primary);
	--hd-gnb-icon-c: #fff;
	--hd-gnb-text-c: #878787;
}

/* 모바일 메뉴 오픈 시 스크롤 방지 */
body.menu_open_body {overflow:hidden;}

/* 헤더 상태별 색상 변경: 다섯번째 슬라이드(푸터) 및 헤더 오버 시, 모바일 메뉴 오픈 시 (배경 흰색, 내부 요소 어둡게) */
#fs_header:hover, #fs_header.header_white, #fs_header.menu_open_style {
	background:#fff;
	--hd-logo-flt: none; /* 로고 원본 */
	--hd-1dep-c: var(--black);
	--hd-gnb-icon-bg: var(--primary);
	--hd-gnb-icon-c: #fff;
	--hd-gnb-text-c: #878787;
}
#fs_header:hover, #fs_header.menu_open_style {border-color:var(--border);}

/* 로고 제어 */
#fs_header .logo img {filter:var(--hd-logo-flt);transition:all 0.3s ease;}

/* 헤더메뉴 */
.btn_menu {display:none;}
.fs_top_menu {height:100%;}
.fs_top_menu .lnb {display:flex; height:100%;}
.fs_top_menu .lnb > li {position:relative; height:100%;}
.fs_top_menu .lnb .lnb_title {position:relative; font-weight:600;font-size:2rem;color:var(--hd-1dep-c);padding:0 3.5rem; display:flex; align-items:center; height:100%; transition:all 0.3s ease;}
.fs_top_menu .lnb .lnb_title::after {content:""; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:0; height:4px; background:var(--primary); transition:all 0.3s ease;}
.fs_top_menu .lnb > li:hover .lnb_title, .fs_top_menu .lnb > li.active .lnb_title {color:var(--primary);}
.fs_top_menu .lnb > li:hover .lnb_title::after, .fs_top_menu .lnb > li.active .lnb_title::after {width:100%;}
    /* 2뎁스 */
	.fs_top_menu .lnb .lnb_layer01 {position:absolute; left:0; top:10rem; width:100%; text-align:center; padding:1.5rem 0;opacity:0; visibility:hidden; transition:all 0.3s ease; z-index:10;}
	.fs_top_menu .lnb .lnb_layer01 li a {display:block;color:#444; padding:1.2rem 0;}
	.fs_top_menu .lnb .lnb_layer01 li a:hover {color:var(--primary);font-weight:600;}

/* 하위메뉴 전체 배경 (가상요소) */
.fs_top_menu .lnb::before {
	content:''; position:fixed; left:0; top:10rem; width:100%; height:0;
	background:rgba(255,255,255,0.95); box-shadow:0 10px 20px rgba(0,0,0,0.05);	
	transition:all 0.3s ease; opacity:0; visibility:hidden; z-index:5; border-radius:0 0 2rem 2rem;
}

/* 마우스 오버 시 하위메뉴 전체 표출 */
.fs_top_menu .lnb:hover::before {height:20rem; opacity:1; visibility:visible;}
.fs_top_menu .lnb:hover .lnb_layer01 {opacity:1; visibility:visible; transform:translateY(0);}

/* 글로벌 */
.global_box {display:flex;align-items:center;gap:4rem;}
.global_box a {display:flex;justify-content:center;align-items:center;gap:1rem;}
.global_box .gnb_icon {display:inline-flex;justify-content:center;align-items:center;width:4.8rem;height:4.8rem;border-radius:50%;background:var(--hd-gnb-icon-bg);font-size:2.6rem;color:var(--hd-gnb-icon-c);transition:all 0.3s ease;}
.global_box .gnb_text {font-weight:600;color:var(--hd-gnb-text-c);transition:all 0.3s ease;}
	@media only screen and (max-width:1199px){
		/* 헤더메뉴 */
		.fs_top_menu .lnb .lnb_title {padding:0 2rem;}
		/* 글로벌 */
		.global_box {gap:2rem;}
	}
	@media only screen and (max-width:1099px){
		/* 헤더메뉴 */
		.fs_top_menu .lnb .lnb_title {padding:0 1.5rem;}
		/* 글로벌 */
		.global_box {gap:1rem;}
		.global_box .gnb_icon {width:4rem;height:4rem;font-size:2rem;}
	}
    @media only screen and (max-width:1023px){
		#fs_header:hover {border-color:transparent;}
		.fs_head {position:relative; justify-content:space-between;}
		
		/* 햄버거 버튼 (좌측) */
		.btn_menu {display:flex; align-items:center; gap:1.2rem; width:auto; height:4rem; background:transparent; border:none; z-index:100; cursor:pointer;}
		.btn_menu .burger_icon {display:flex; flex-direction:column; justify-content:center; gap:0.9rem; width:3.4rem; height:100%;}
		.btn_menu .burger_icon span {display:block; width:100%; height:2px; background:var(--hd-1dep-c); transition:all 0.3s ease;}
		.btn_menu .btn_text {font-weight:500; font-size:2rem; color:var(--hd-1dep-c); letter-spacing:-0.05em; transition:all 0.3s ease;}

		/* 로고 (중앙정렬) */
		#fs_header .logo {position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); z-index:10;}
		#fs_header .logo img {max-height:6rem; width:auto;}

		/* 햄버거 버튼 활성화(X자 변형) */
		.btn_menu.active .burger_icon span {background:var(--hd-1dep-c);}
		.btn_menu.active .burger_icon span:nth-child(1) {transform: translateY(1.1rem) rotate(45deg);}
		.btn_menu.active .burger_icon span:nth-child(2) {opacity:0;}
		.btn_menu.active .burger_icon span:nth-child(3) {transform: translateY(-1.1rem) rotate(-45deg);}

		/* 모바일 메뉴 스타일 (전체화면 슬라이드) */
		.fs_top_menu {display:block; position:fixed; top:0; left:-100%; width:100%; height:100vh; background:#fff; z-index:90; transition:left 0.4s cubic-bezier(0.770, 0.000, 0.175, 1.000); padding-top:10rem;}
		.fs_top_menu.open {left:0;}
		.fs_top_menu .lnb {display:block; height:calc(100vh - 10rem); overflow-y:auto; padding:0 2rem 5rem;}
		.fs_top_menu .lnb > li {height:auto;}
		.fs_top_menu .lnb .lnb_title {display:flex; justify-content:space-between; align-items:center; height:6.5rem; color:var(--black); font-size:2rem; padding:0 1rem; border-bottom:1px solid #eee;}
		.fs_top_menu .lnb .lnb_title::after {display:none;} 
		
		/* 하위 메뉴 토글 기본 화살표 */
		.fs_top_menu .lnb .lnb_title::before {content:""; width:0.8rem; height:0.8rem; border-bottom:2px solid #555; border-right:2px solid #555; transform:rotate(45deg); display:inline-block; margin-top:-0.4rem; order:1; transition:all 0.3s ease;}
		/* 하위 메뉴 펼쳐졌을 때 화살표 */
		.fs_top_menu .lnb > li.active .lnb_title::before {transform:rotate(-135deg); margin-top:0.4rem;}
		
		/* 2뎁스 */
		.fs_top_menu .lnb .lnb_layer01 {position:static; opacity:1; visibility:visible; display:none; transition:none; background:#f9f9f9; padding:1.5rem 0;}
		.fs_top_menu .lnb .lnb_layer01 li a {padding:1.2rem 3rem; color:#666; font-size:1.6rem; text-align:left;}

		/* 메뉴 백그라운드 가상요소 제거 (PC용 투명판) */
		.fs_top_menu .lnb::before {display:none;}
		
		/* GNB버튼 (글로벌 우측정렬) */
		.global_box {gap:1rem;}
		.global_box .gnb_text {display:none;} /* 공간 확보를 위해 텍스트 숨김 */
    }


/* ========================= 서브 ========================= */
@keyframes sub_title_bg {
	0% { transform: scale(1.2); }
	100% { transform: scale(1); }
}
/* 서브비주얼 */
.fs_sub_visual {display:flex;height:30rem;position:relative;border-radius:3rem;overflow:hidden;background-size:0 !important;}
.fs_sub_visual::before {content:"";position:absolute;top:0;left:0;width:100%;height:100%;z-index:-1;background:no-repeat center/cover;background-image:inherit;animation:sub_title_bg 3s both;}
.fs_sub_visual > * {position:relative; z-index:1;}
.fs_sub_visual .fs_snb_box {position:absolute;top:calc(50% + 5rem);left:8rem;transform:translate(0, -50%);z-index:1;}
.fs_sub_visual .fs_snb_box span {display:inline-block;font-size:1.6rem;color:rgba(255,255,255,.6);font-weight:300;background:var(--primary);padding:.5rem 1rem;border-radius:1rem .5rem 1rem .5rem;animation:sub_title_logo 2s both;}
@keyframes sub_title_logo {0%{transform:translateY(-100px);opacity:0;}}
.fs_sub_visual .fs_snb_box h3 {font-weight:800;font-size:7rem;color:#fff;margin-top:0.5rem;}
	@media only screen and (max-width:1023px){
		.fs_sub_visual	{height:25rem;}
		.fs_sub_visual .fs_snb_box {top:calc(50% + 5.5rem);left:5rem;}
		.fs_sub_visual .fs_snb_box span {font-size:1.5rem;}
		.fs_sub_visual .fs_snb_box h3 {font-size:5rem;}
	}
	@media only screen and (max-width:767px){
		.fs_sub_visual .fs_snb_box {top:calc(50% + 4.5rem);left:4.5rem;}
		.fs_sub_visual .fs_snb_box h3 {font-size:4rem;}
	}

/* 페이지별 비주얼 */
.fs_sub_visual.sub1_1::before {background-image:url(../../images/fs/layout/svis_img0101.jpg);}
.fs_sub_visual.sub1_2::before {background-image:url(../../images/fs/layout/svis_img0102.jpg);}
.fs_sub_visual.sub1_3::before {background-image:url(../../images/fs/layout/svis_img0103.jpg);}
.fs_sub_visual.sub2_1::before {background-image:url(../../images/fs/layout/svis_img0201.jpg);}
.fs_sub_visual.sub2_2::before {background-image:url(../../images/fs/layout/svis_img0202.jpg);}
.fs_sub_visual.sub2_3::before {background-image:url(../../images/fs/layout/svis_img0203.jpg);}
.fs_sub_visual.sub3_1::before {background-image:url(../../images/fs/layout/svis_img0301.jpg);}
.fs_sub_visual.sub3_2::before {background-image:url(../../images/fs/layout/svis_img0302.jpg);}
.fs_sub_visual.sub3_3::before {background-image:url(../../images/fs/layout/svis_img0303.jpg);}

/* 서브메뉴 */
.snb_menu {margin-top:3rem;}
.snb_menu ul {display:flex;flex-wrap:wrap;justify-content:center;align-items:center;width:100%;position:relative;}
.snb_menu ul:before {content:"";position:absolute;width:100%;height:2px;background:#ddd;bottom:0;left:0;z-index:-1;}
.snb_menu ul li {width:auto;}
.snb_menu ul li a {height:6.5rem;display:flex;justify-content:center;align-items:center;font-size:2rem;padding:0 6rem;} 
.snb_menu ul li.on a {color:var(--primary);font-weight:600;border-bottom:2px solid var(--primary);}
	@media only screen and (max-width:1399px){
		.snb_menu {margin-top:2rem;}
		.snb_menu ul li a {font-size:1.8rem;}
	}
	@media only screen and (max-width:767px){
		.snb_menu ul li {flex:1 1 0;}
		.snb_menu ul li a {padding:0 1rem;}
	}

/* 실컨텐츠영역 */
.con_header {color:var(--black);font-size:4.5rem;text-align:center;margin-top:10rem;position:relative;padding-bottom:3rem;margin-bottom:6rem;}
.con_header h3 {font-weight:700;}
.con_header:before {content:"";position:absolute;width:30px;height:3px;background:#ccc;bottom:0;left:0;right:0;margin:0 auto;}
.con_body {padding-bottom:10rem;overflow:hidden;}
	@media only screen and (max-width:1023px){
		.con_header {font-size:3.8rem;margin-top:8rem;margin-bottom:5rem;padding-bottom:2.5rem;}
		.con_body {padding-bottom:8rem;}
	}
	@media only screen and (max-width:767px){
		.con_header {font-size:3.2rem;margin-top:6rem;margin-bottom:4rem;padding-bottom:2rem;}
		.con_body {padding-bottom:6rem;}
	}


/* ========================= 푸터 ========================= */
/* 푸터영역 */
#fs_footer {background:#545454;padding:7rem 0;}
.fs_footer_box {display:flex;justify-content:space-between;align-items:flex-end;}
.fs_footer_box .foot_text {color:rgba(255,255,255,0.6);}
.fs_footer_box .foot_text .contact_tel {color:#fff;}
.fs_footer_box .foot_text .contact_tel em {font-weight:700;font-size:4rem;color:var(--yellow);margin-left:1rem;}
.fs_footer_box .foot_text .contact_time {font-family:600;}
.fs_footer_box .foot_text .address {display:flex;align-items:center;gap:3.1rem;font-size:1.6rem;line-height:1.8;margin-top:2rem;}
.fs_footer_box .foot_text .address li {position:relative;}
.fs_footer_box .foot_text .address li:not(:last-child)::after {content:"";position:absolute;right:-1.5rem;top:50%;transform:translateY(-50%);width:1px;height:.9rem;background:rgba(255,255,255,.2);}
.fs_footer_box .foot_text span.copyright {font-size:1.6rem;}
	@media only screen and (max-width:1023px){
		#fs_footer {padding:5rem 0;position:relative;}
	}
	@media only screen and (max-width:767px){
		.fs_footer_box {flex-direction:column;align-items:flex-start;gap:3rem;position:relative;}
		.fs_footer_box .foot_text {width:100%;}
		.fs_footer_box .foot_text .contact_tel em {font-size:3.2rem;}
		.fs_footer_box .foot_text .contact_tel .contact_tit {margin-right:.5rem;}
		.fs_footer_box .foot_text .address {flex-direction:column;align-items:flex-start;gap:.5rem;line-height:1.5;margin-bottom:2rem;margin-top:1.5rem;}
		.fs_footer_box .foot_text .address li::after {display:none;}
		.fs_footer_box .foot_text span.copyright {display:block;margin-top:1rem;}
	}
	@media only screen and (max-width:575px){
		.fs_footer_box .foot_text .contact_time {display:block;width:100%;margin-top:0.5rem;}
		.fs_footer_box .foot_text .contact_tel em {display:inline-block;}
	}

/*맨위로*/
#fs_footer .btn_top {display:flex;justify-content:center;align-items:center;width:7rem;height:7rem;border-radius:3rem 1rem 3rem 1rem;background:var(--primary2);color:#fff;font-size:4rem;flex-shrink:0;}
#fs_footer .btn_top:is(:hover,:focus,:active) {background:var(--primary);transform:translateY(-1rem);}
	@media only screen and (max-width:1023px){
		#fs_footer .btn_top {width:6rem;height:6rem;font-size:3rem;}
	}
	@media only screen and (max-width:767px){
		#fs_footer .btn_top {position:absolute;right:0;top:0;width:5rem;height:5rem;font-size:2.5rem;border-radius:2rem 0.5rem 2rem 0.5rem;}
	}