/* ==========================================================================
 Header - 헤더
 ========================================================================== */
#header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: transparent; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } 

#header.scr { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 

#header.scr.on { background: var(--white-color); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 

#header h1 { font-size: 3.2rem; font-weight: 800; white-space: nowrap; user-select: none; } 

#header h1 a { display: block; width: 210px; height: 40px; background-image: url(../images/logo_w.svg), url(../images/logo_w.png); background-repeat: no-repeat; background-position: left center; background-size: contain; } 

#header.scr h1 a { background-image: url(../images/logo.svg), url(../images/logo.png); } 

#header.scr.on h1 a { background-image: url(../images/logo.svg), url(../images/logo.png); } 

#header .hd_wrap { display: flex; align-items: center; height: 9.6rem; } 

#header .adm { position: relative; display: flex; align-items: center; align-self: flex-start; height: 9.6rem; gap: 2.4rem; margin-left: 12rem; } 

#header .adm > * ~ * { position: relative; } 

#header .adm > * ~ *::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: -1.2rem; height: 0.5em; width: 1px; background: var(--white-color); } 

#header.on .adm > * ~ *::after { background: var(--white-color); } 

#header.scr .adm > * ~ *::after { background: var(--text-color); } 

#header .adm a { white-space: nowrap; color: var(--white-color); font-size: 1.4rem; } 
#header.scr .adm a { color: var(--text-color); } 
#header.scr.on .adm a { color: var(--text-color); } 

#header .adm .icon { width: 1.6rem; height: 1.6rem; stroke: var(--white-color); stroke-width: 2; vertical-align: -2px; margin-right: 4px; } 

#header.scr .adm .icon { stroke: var(--text-color); } 
#header.scr.on .adm .icon { stroke: var(--text-color); } 

#header .gnb_container { display: flex; align-items: flex-start; align-self: flex-start; margin-left: auto; } 

#header .gnb { flex: 1; display: flex; align-items: center; margin-left: auto; } 

#header .gnb > ul { display: flex; } 

#header .gnb > ul > li > a { position: relative; display: block; padding: 0 3.2rem; font-size: 1.8rem; font-weight: 400; line-height: 9.6rem; text-transform: uppercase; color: var(--white-color); white-space: nowrap; } 
#header.scr .gnb > ul > li > a { color: var(--text-color); } 
#header.scr.on .gnb > ul > li > a { color: var(--text-color); } 

#header .gnb > ul > li { position: relative; } 

#header .gnb > ul > li { position: relative; border-left: 1px solid rgba(0, 0, 0, 0); } 
#header .gnb > ul > li:last-child { border-right: 1px solid rgba(0, 0, 0, 0); } 
#header.scr .gnb > ul:hover > li { position: relative; border-left: 1px solid rgba(0, 0, 0, 0.05); } 
#header.scr .gnb > ul:hover > li:last-child { border-right: 1px solid rgba(0, 0, 0, 0.05); } 

#header .gnb > ul > li ul { height: 0; overflow: hidden; transition: 0.2s; } 

#header .gnb > ul:hover > li ul { padding-top: 1.6rem; height: 28rem; } 

#header .gnb > ul > li:focus-within ul { padding-top: 1.6rem; height: 28rem; } 

#header .gnb > ul::before { content: ""; position: absolute; top: 0; left: 0; right: 0; z-index: -1; height: 0; background: rgba(0, 0, 0, 0); height: calc(9.6rem); transition: 0.2s; } 
#header.scr .gnb > ul::before { background: var(--white-color); } 
#header .gnb > ul:hover::before { background: rgba(0, 0, 0, 0.25); height: calc(28rem + 9.6rem); border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 

#header.scr .gnb > ul:hover::before { background: var(--white-color); } 

#header .gnb > ul > li ul li a { display: block; line-height: 4rem; white-space: nowrap; color: var(--white-color); text-align: center; font-size: 1.4rem; font-weight: 200; white-space: nowrap; } 
#header.scr .gnb > ul > li ul li a { color: var(--text-color); font-weight: 400; } 

#header .gnb > ul > li > a::after { content: ""; position: absolute; bottom: 0; left: 50%; z-index: 4; transform: translate(-50%, 1px); width: 0; height: 1px; background: var(--point-color); transition: 0.4s; } 

#header .gnb > ul > li:hover > a::after { width: calc(100% - 4.8rem); } 
#header .gnb > ul > li:hover { background: rgba(0, 0, 0, 0.25); } 

#header .gnb > ul > li:hover ul { background: rgba(0, 0, 0, 0.25); } 
#header.scr .gnb > ul > li:hover { background: #f9f9f9; } 

#header.scr .gnb > ul > li:hover ul { background: #f9f9f9; } 
/* ==========================================================================
 Mobile Menu Button - 모바일 메뉴 버튼
 ========================================================================== */
.mbtn { display: none; } 

@media (max-width: 1024px) { /* *,
 *::before,
 *::after { outline: 1px solid rgba(255, 0, 0, 0.5); } */
 #top_bar { display: none; } 

 .mbtn { display: flex; align-items: center; position: fixed; top: 3.2rem; right: 2.4rem; z-index: 999; width: 32px; height: 32px; background: var(--lightgray-color); border: 1px solid var(--line-color); border-radius: 4px; /* background: rgba(255, 255, 255, 0.25); */
 font-size: 0; } 

 .mbtn::before { content: ""; position: absolute; top: 7px; left: 4px; right: 4px; height: 2px; background: var(--body-color); } 

 .mbtn.on::before { display: none; } 

 .mbtn::after { content: ""; position: absolute; bottom: 7px; left: 4px; right: 4px; height: 2px; background: var(--body-color); } 

 .mbtn.on::after { display: none; } 

 .mbtn span::before { content: ""; position: absolute; top: 14px; left: 4px; right: 4px; height: 2px; background: var(--body-color); } 

 .mbtn.on span::before { transform: rotate(45deg); } 

 .mbtn span::after { content: ""; position: absolute; top: 14px; left: 4px; right: 4px; height: 2px; background: var(--body-color); } 

 .mbtn.on span::after { transform: rotate(-45deg); } 

 #header { position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: transparent; } 

 #header.scr { background: var(--white-color); } 

 #header.scr.on { background: var(--white-color); } 
 #header h1 { position: relative; z-index: 1001; } 

 #header h1 a { background-image: url(../images/logo_w.svg), url(../images/logo_w.png); } 

 #header h1.on a { background-image: url(../images/logo.svg), url(../images/logo.png); } 

 #header.scr h1 a { background-image: url(../images/logo.svg), url(../images/logo.png); } 

 #header .hd_wrap { position: relative; z-index: 999; height: 12rem; } 
 #header.on .hd_wrap { height: 12rem; } 

 #header .gnb_container { position: fixed; top: 0; left: -200%; z-index: 1000; width: 100%; height: 200vh; background: var(--white-color); margin-left: 0; background: rgba(0, 0, 0, 0.75); } 

 #header .gnb_container.on { left: 0; } 

 #header .gnb { display: flex; align-items: stretch; flex-direction: column; gap: 0; padding: 12rem 2.4rem 0 2.4rem; width: calc(100vw); height: 200vh; background: var(--white-color); } 

 #header .gnb > ul { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--primary-color); } 

 #header .gnb > ul > li > a { line-height: 5.6rem; border-bottom: 1px solid var(--line-color); color: var(--body-color); font-weight: 500; font-size: 2.5rem; padding: 5px 0 5px 2rem; } 

 #header.on .gnb > ul > li > a { line-height: 5.6rem; padding: 0 0 0 1.6rem; color: var(--body-color); } 

 #header .gnb > ul > li { position: relative; } 

 #header .gnb > ul > li ul { position: static; top: 12rem; left: 50%; z-index: 3; transform: translate(0, 0); background: var(--white-color); border: 0 solid var(--lightgray-color); opacity: 1; visibility: visible; padding-top: 0; height: auto; transition: none; display: none; } 

 #header .gnb > ul:hover > li ul { transform: translate(0, 0); opacity: 1; visibility: visible; padding-top: 0; height: auto; display: none; } 

 #header .gnb > ul > li:focus-within ul { transform: translate(0, 0); opacity: 1; visibility: visible; padding-top: 0; height: auto; display: none; } 

 #header .gnb > ul::before { display: none; } 

 #header .gnb > ul > li ul li a { display: block; padding: 0 0 0 1.6rem; line-height: 4rem; white-space: nowrap; color: var(--body-color); background: var(--lightgray-color); font-size: 1.6rem; font-weight: 400; text-align: left; } 

 #header .gnb > ul > li ul li ~ li a { border-top: 0px solid var(--line-color); } 

 #header .gnb > ul > li ul li a { border-bottom: 1px solid var(--line-color); } 
 #header .gnb > ul > li:hover { background: var(--white-color); } 

 #header .gnb > ul > li:hover ul { background: var(--white-color); } 

 #header.scr .gnb > ul > li:hover { background: var(--white-color); } 

 #header.scr .gnb > ul > li:hover ul { background: var(--white-color); } 

 #header .gnb > ul:hover > li { position: relative; border-left: 1px solid rgba(0, 0, 0, 0); } 
 #header.scr .gnb > ul:hover > li { position: relative; border-left: 1px solid rgba(0, 0, 0, 0); } 
 #header .gnb > ul:hover > li:last-child { border-right: 1px solid rgba(0, 0, 0, 0); } 

 #header .gnb > ul > li > a::after { display: none; } 
 #header .adm { order: -1; position: relative; display: flex; justify-content: flex-end; align-self: flex-end; gap: 2.4rem; margin-left: 0; color: var(--body-color); padding: 2.4rem 0; font-size: 1.2rem; } 

 #header.on .adm { color: var(--body-color); } 

 #header .adm a { font-size: 1.6rem; color: var(--body-color); } 

 #header .adm .icon { width: 1.6rem; height: 1.6rem; stroke: var(--body-color); stroke-width: 2; } 

 #header .adm > * ~ *::after { background: var(--body-color); } 
 }

/* ==========================================================================
 Sub Title - 서브페이지 타이틀
 ========================================================================== */
.sub_title { position: relative; background-color: var(--primary-color); background-repeat: no-repeat; background-position: center center; background-size: cover; /* border-left: 4px solid var(--point-color); */
 /* border-top: 4px solid var(--point-color); */
 text-transform: uppercase; color: var(--white-color); /* border-radius: 4rem 0 0 0; */
 overflow: hidden; min-height: 48rem; /* clip-path: polygon(2.4rem 0, 100% 0, 100% 100%, 0 100%, 0 2.4rem); */ } 

.sub_title::before { content: ""; position: absolute; inset: 0 0 0 0; z-index: 2; background: linear-gradient(to left, rgba(0, 0, 0, 0.64) 40%, transparent); backdrop-filter: blur(16px); animation: blur 1.2s both; } 

@keyframes blur { 
 0% { backdrop-filter: blur(16px); } 
 100% { backdrop-filter: blur(0); } 
 }

.sub_title::after { content: ""; position: absolute; inset: 0 0 0 0; z-index: 3; background: url(../images/pt-bg01.png); } 

.sub_title .title { position: absolute; top: 50%; left: 50%; z-index: 4; transform: translate(-50%, calc(-50% + 1.6rem)); width: calc(100% - 3.2rem); padding: 0 1.6rem; max-width: 141rem; text-align: right; margin: 0 0; margin-bottom: 0; } 

.sub_title .title h2 { font-size: 5.6rem; font-weight: 800; text-shadow: 0 0 4px rgba(0, 0, 0, 0.25); } 

.sub_title .title h2::after { content: ""; display: block; margin: 1.6rem 0 1.6rem auto; width: 8rem; height: 1px; background: var(--point-color); } 
.sub_title .title p { font-size: 1.4rem; font-weight: 300; opacity: 1; } 
@media (max-width: 768px){
 .sub_title { min-height: 40rem; margin: 0 0; } 

 .sub_title::before { background: linear-gradient(315deg, rgba(0, 0, 0, 0.4) 40%, transparent); } 
 .sub_title .title { margin: 0 0; padding: 0 0; transform: translate(-50%, calc(-50% + 4rem)); } 

 .sub_title .title h2 { font-size: 4.8rem; font-weight: 800; text-shadow: 0 0 4px rgba(0, 0, 0, 0.5); } 
 }

/* ==========================================================================
 Sub Navigation - 서브 네비게이션 (LNB)
 ========================================================================== */

#sub_nav { position: relative; margin-top: -2rem; margin-bottom: 8rem; } 

/* Sub Navigation (nb) - 네비게이션 바 스타일 */
.sub_nav { position: relative; z-index: 5; margin-bottom: 8rem; border-bottom: 1px solid var(--line-color); background: var(--white-color); line-height: 6.4rem; text-align: right; line-height: 5.6rem; padding-right: 2.4rem; display: flex; justify-content: space-between; } 

.sub_nav .lnb { display: flex; } 

.sub_nav .h { position: relative; z-index: 4; flex: 0 0 5.6rem; display: flex; align-items: center; justify-content: center; background: var(--point-color); } 

.sub_nav .h .icon { width: 1.6rem; height: 1.6rem; stroke: var(--white-color); stroke-width: 2; } 

#subBar { position: relative; z-index: 4; display: flex; white-space: nowrap; } 

#subBar > * { position: relative; flex: 1; min-width: 24rem; text-align: left; } 

#subBar > * { border-right: 1px solid var(--line-color); } 

#subBar > div > a { display: flex; justify-content: space-between; align-items: center; } 

#subBar > div > a::after { content: ""; width: 14px; height: 14px; background: url(../lib/icon/chevron-down.svg) no-repeat center center/14px; } 

#subBar > div > a.on::after { content: ""; width: 14px; height: 14px; background: url(../lib/icon/chevron-up.svg) no-repeat center center/14px; } 

#subBar a { display: block; line-height: 5.6rem; background: var(--white-color); padding: 0 2.4rem; } 

#subBar a:hover { background: var(--background-color); } 

#subBar .d1 ul { position: absolute; top: auto; left: -1px; right: -1px; border: 1px solid var(--line-color); border-top: 1px solid transparent; transform: translate(0, -1px); overflow: hidden; display: none; } 

#subBar .d2 ul { position: absolute; top: auto; left: -1px; right: -1px; border: 1px solid var(--line-color); border-top: 1px solid transparent; transform: translate(0, -1px); overflow: hidden; display: none; } 

#subBar ul a { border-top: 1px solid var(--line-color); } 

.sub_nav .lnb ul { display: flex; justify-content: flex-end; gap: 0; } 

.sub_nav .lnb ul a { display: block; background: var(--white-color); white-space: nowrap; padding: 0 4rem; } 

.sub_nav .lnb ul li.on a { border-top: 4px solid var(--point-color); margin-top: -4px; } 

.sub_nav .navigation { font-size: 1.4rem; padding-left: 1.6rem; } 

.sub_nav .navigation .icon { width: 1.2rem; height: 1.2rem; stroke: var(--body-color); stroke-width: 2; vertical-align: -1px; margin: 0 0.4rem; } 

@media (max-width: 768px){
 .sub_nav { padding-right: 0; } 
 .sub_nav .lnb { flex: 1; } 
 #subBar { flex: 1; } 
 #subBar .d1 { display: none; } 

 .sub_nav .navigation { display: none; } 
 }

/* ==========================================================================
 Sub Content - 서브 콘텐츠 영역
 ========================================================================== */
.sub_content { margin-top: 8rem; margin-bottom: 12rem; background: var(--white-color); } 

.sub_content .page_title { margin-bottom: 2.4rem; } 

.sub_content .page_title h3 { position: relative; padding: 1.6rem 0; /* border-bottom: 1px solid var(--line-color); */
 white-space: nowrap; display: flex; align-items: center; gap: 8rem; } 

.sub_content .page_title h3::after { content: ""; flex: 1; height: 1px; background: var(--primary-color); opacity: 0.25; } 

.sub_content .page_title h3 strong { font-size: 4rem; font-weight: 700; } 

@media (max-width: 1440px) { } 

.sub_content .content p { font-size: 1.7rem; line-height: 2.4rem; opacity: 0.9; } 

.sub_content .content .sub_title_desc { line-height: 1.5; margin-bottom: 5.6rem; } 

/* ==========================================================================
 Footer - 푸터
 ========================================================================== */
#footer { padding: 5.6rem 0 5.6rem 0; background: var(--footerbg-color); color: var(--text-color); font-size: 1.4rem; } 

#footer .f_logo { margin-bottom: 4rem; } 

@media (max-width: 1024px){
 #footer .f_logo { display: none; } 
 }

#footer .lnk { margin-bottom: 5.6rem; padding: 5.6rem 0; border-bottom: 1px solid rgba(0, 0, 0, 0.1); } 

#footer .lnk > ul { display: flex; gap: 8rem; } 

#footer .lnk > ul > li > a { display: block; font-size: 1.8rem; font-weight: 800; margin-bottom: 1.6rem; } 

#footer .lnk > ul ul a { display: block; line-height: 1.5; } 

#footer .customer_list { display: flex; gap: 1.6rem; margin-bottom: 1.6rem; } 

@media (max-width: 768px){
 #footer .lnk { display: none; } 

 #footer .customer_list { display: flex; flex-direction: column; gap: 0; font-size: 1.8rem; } 
 }

#footer .inner { display: flex; flex-direction: column; /* justify-content: center; align-items: center; */
 gap: 8px; } 

#footer .info { display: flex; gap: 2.4rem; } 

#footer .info li { position: relative; /* text-align: center; */
 white-space: nowrap; } 

#footer .info li ~ li::before { content: ""; position: absolute; top: 50%; left: -12px; transform: translate(0, -50%); width: 1px; height: 0.5em; background: #ccc; } 

@media (max-width: 768px){
 #footer .info { flex-direction: column; gap: 0; } 

 #footer .info li ~ li::before { display: none; } 
 }

/* Family Link - 패밀리 사이트 */
#footer .ft_info { position: relative; display: flex; justify-content: space-between; align-items: center; } 

#footer .ft_info #family_link { position: relative; z-index: 5; } 

#footer .ft_info #family_link .f_link { position: relative; display: block; width: 16rem; height: 4rem; padding: 0 2.4rem; font-size: 1.4rem; text-align: left; color: var(--line-color); text-transform: uppercase; background: var(--primary-color); border: 1px solid rgba(255, 255, 255, 0.25); white-space: nowrap; } 

#footer .ft_info #family_link .f_link .icon { position: absolute; right: 0.8rem; top: 1rem; width: 1.8rem; height: 1.8rem; stroke: var(--white-color); stroke-width: 1; } 

#footer .ft_info #family_link .f_link.on .icon { transform: rotate(180deg); } 

#footer .ft_info #family_link ul { display: none; position: absolute; bottom: 4rem; width: 100%; margin-top: -1px; z-index: 2; border: 1px solid rgba(255, 255, 255, 0.25); background: var(--body-color); overflow: hidden; } 

#footer .ft_info #family_link ul > li > a { display: block; padding: 0 2.4rem; font-size: 1.4rem; line-height: 3.9rem; color: var(--line-color); } 

#footer .ft_info #family_link ul > li ~ li > a { border-top: 1px solid rgba(255, 255, 255, 0.1); } 

#footer .ft_info #family_link ul > li > a:hover { background: var(--primary-color); } 

@media (max-width: 1024px){
 #footer .ft_info { display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 4rem; } 
 }

/* ==========================================================================
 Kakao Map - 카카오 지도
 ========================================================================== */
.root_daum_roughmap { width: 100% !important; } 

.root_daum_roughmap .cont { display: none; } 

.root_daum_roughmap .wrap_controllers { display: none; } 

.root_daum_roughmap .border2 { display: block !important; } 
@media (max-width: 768px){
 .root_daum_roughmap .wrap_map { height: 240px !important; } 
 }

/* ==========================================================================
 Side Link - 사이드 플로팅 링크
 ========================================================================== */
#side_lnk { position: fixed; bottom: 4rem; right: 1.6rem; z-index: 100; display: flex; flex-direction: column; align-items: flex-end; opacity: 0; visibility: hidden; transition: 0.8s; } 

#side_lnk.on { right: 1.6rem; bottom: 12rem; opacity: 1; visibility: visible; } 

#side_lnk .lnk_wrap { background: var(--white-color); /* border-radius: 0.8em; */
 border: 1px solid var(--line-color); border-top: 2px solid var(--primary-color); /* box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.1); */
 padding: 0.8rem 0.8rem; margin-bottom: 4rem; } 

#side_lnk .lnk_wrap > a { display: block; text-align: center; padding: 1.6rem 0.8rem; white-space: nowrap; } 

#side_lnk .lnk_wrap > a .icon { width: 2.4rem; height: 2.4rem; stroke: var(--body-color); stroke-width: 1; } 

#side_lnk .lnk_wrap > a ~ a { border-top: 1px solid var(--line-color); } 

#side_lnk .lnk_wrap > a span { display: block; margin-top: 0.8rem; font-size: 1.2rem; } 

#side_lnk .d_btn { position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 8px); display: block; width: 6.4rem; height: 6.4rem; background: var(--point-color); border-radius: 3.2em; box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.1); text-align: center; } 

#side_lnk .d_btn .icon { width: 3.2rem; height: 3.2rem; stroke: var(--white-color); stroke-width: 1; } 

#side_lnk .lnk_wrap > a.d_tel { position: relative; display: block; width: 6.4rem; height: 6.4rem; background: var(--point-color); border-radius: 3.2em; box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.1); text-align: center; display: flex; align-items: center; justify-content: center; margin: 4rem 0 0.8rem 0; display: none; } 

#side_lnk .lnk_wrap > a.d_tel .icon { width: 2.4rem; height: 2.4rem; stroke: var(--white-color); stroke-width: 2; } 

@media (max-width: 768px){
 #side_lnk .d_btn { position: static; transform: translate(0, 0); } 
 #side_lnk .lnk_wrap { background: transparent; border-radius: 0.8em; border: 1px solid transparent; /* box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.1); */
 padding: 0 0; margin-bottom: 0; } 

 #side_lnk .d_btn { background: var(--text-color); } 
 #side_lnk .lnk_wrap > a:not(.d_tel) { display: none; } 

 #side_lnk .lnk_wrap > a.d_tel { display: flex; } 

 #side_lnk .lnk_wrap > a ~ a { border-top: 0px solid var(--line-color); } 
 }

/* SNS Links - SNS 링크 (네이버/카카오) */
#side_lnk a.naver,
#side_lnk a.kakao { position: relative; display: flex; justify-content: space-between; align-items: center; width: 6.4rem; height: 6.4rem; margin-bottom: 1.6rem; background: var(--white-color); border-radius: 3.2em; box-shadow: 0 0 1.6rem rgba(0, 0, 0, 0.1); line-height: 6.4rem; color: var(--white-color); font-size: 1.2rem; overflow: hidden; transition: all 0.3s; } 

#side_lnk a.naver::after,
#side_lnk a.kakao::after { content: ""; position: absolute; top: 0; right: 0; width: 6.4rem; height: 6.4rem; } 

#side_lnk a.naver::after { background: url(../lib/images/sns_naver.png) no-repeat center center/3.2rem; } 

#side_lnk a.kakao::after { background: url(../lib/images/sns_kakao.png) no-repeat center center/3.2rem; } 

#side_lnk a.naver:hover::after { background: url(../lib/images/sns_naver_w.png) no-repeat center center/3.2rem; } 

#side_lnk a.kakao:hover::after { background: url(../lib/images/sns_kakao.png) no-repeat center center/3.2rem; } 

#side_lnk a.naver:hover,
#side_lnk a.kakao:hover { width: 22rem; } 

#side_lnk .kakao:hover { background: #fee500; color: #3c1e1e; } 

#side_lnk .naver:hover { background: #03c75a; color: #ffffff; } 

#side_lnk a.naver span,
#side_lnk a.kakao span { margin-left: 3.2rem; width: 0; font-size: 1.4rem; white-space: nowrap; overflow: hidden; transition: all 0.3s; } 

@media (max-width: 768px){
 #side_lnk.on { bottom: 4rem; } 
 }

#side_lnk a.naver:hover span,
#side_lnk a.kakao:hover span { width: 16rem; } 

.s_lnk img { padding: 0.8rem; width: 2.8rem; height: auto; background: var(--primary-color); box-sizing: content-box; border-radius: 0.8rem; } 

.s_lnk { margin-bottom: 3.2rem; } 

#sns_link { margin-bottom: 4rem; } 

@media (max-width: 768px){
 #sns_link { text-align: left; } 
 }

#sns_link a { display: inline-flex; justify-content: center; align-items: center; margin-right: 4px; width: 4.8rem; height: 4.8rem; border-radius: 50%; background: var(--background-color); color: var(--primary-color); font-size: 1.8rem; border: 1px solid rgba(0, 0, 0, 0.1); } 

#sns_link a img { filter: invert(1); } 

#sns_link a:hover { background: var(--point-color); } 

#sns_link a:hover img { filter: invert(0); } 

/* ==========================================================================
 To Top Button - 상단 이동 버튼
 ========================================================================== */
.to_top { position: fixed; left: 50%; bottom: 18rem; z-index: 998; transform: translate(-50%, 0); max-width: calc(1610px + 160px); width: 100%; opacity: 0; visibility: hidden; transition: 0.5s; } 

.to_top button { position: absolute; right: 0; width: 4rem; height: 4rem; background: var(--point-color); border-radius: 50%; } 

.to_top button svg { margin-top: 2px; } 

.to_top.on { opacity: 1; visibility: visible; } 

@media (max-width: 768px){
 .to_top { position: fixed; left: auto; right: -1.6rem; bottom: 14rem; width: auto; } 

 .to_top.on { right: 1.6rem; } 
 }

.sub_title2 { font-size:23px; font-weight: bold; border:1px solid #ccc; padding:10px 20px; background:#f5f5f5;border-top:2px solid #000; } 
.sub_title2 svg { vertical-align: -4px; } 
.tab_menu { } 
 .tab_menu ul { display:grid; grid-template-columns: 1fr 1fr 1fr; gap:20px; } 
 .tab_menu ul li { } 
 .tab_menu ul li a { display:block; color:#a5a5a5; height:100%; border:1px solid #ccc; text-align:center; padding:20px; font-size:2.5rem; transition:all .3s; } 
 .tab_menu ul li a:hover { background:#000; color:#fff; } 
 .tab_menu ul li.on a { background-color: #000; color:#fff; font-weight: bold; border-top:5px solid var(--tab-point-color); } 
 .tab_menu ul li a svg { vertical-align: -3px; margin-right:10px; } 
.txt_center { text-align:center; }
.bg_con { background: #f5f5f5; }

 @media (max-width:900px){
 .tab_menu ul li a { padding:10px; font-size:2.2rem; } 
 }

 @media (max-width:767px){
 .tab_menu ul { grid-template-columns: 1fr; gap:10px; } 
 .tab_menu ul li a { text-align:left; padding-left:30px; } 
 }