@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard-dynamic-subset.min.css");


/* 전체 정리 ctrl+A, ctrl+I */
* { margin: 0; padding: 0; font-size: 10px; font-family: 'Pretendard', 'paperlogy'} /* 앞에 있는 폰트가 우선순위 높음. */
html { overflow-x: hidden;}
/* html {overflow-x: hidden; font-family: 'Pretendard-Regular'; } */
ul li { list-style: none; }
a { color: #75797B; text-decoration: none; }

/* @charset="UTF-8" */
/* css 리셋파일 안에 들어가는 내용임 */






/* 배경색 FAFAFA */
/* 1440px */
.wrap {background: #fff;}
/* 상단메뉴 */
header {width: 100%; height: 110px; background: #fff; backdrop-filter: blur(24px); position: fixed; top: 0; z-index: 9999999999;}
.head {width: 100%; height: 100%; padding: 0 40px; box-sizing: border-box; display: flex; justify-content: space-between; align-items: center;}

.logo {display: block;}
.logo a {/* width: 350px; height: 60px; */ display: flex; justify-content: center; align-items: center; border-radius: 50px; background: #fff;}

.gnb {padding: 20px 30px; border-radius: 50px; display: flex; align-items: center; gap: 40px; background: #fff;}
.gnb ul {display: flex; align-items: center; gap: 30px;}
.gnb a {font-size: 2.5rem; line-height: 3rem; font-weight: 600; color: #000;}

.util ul {display: flex; align-items: center; gap: 10px;}
.util a {width: 44px; height: 44px; padding: 10px 15px; border-radius: 50px; border: 2px solid #75797B; font-size: 2rem; line-height: 2.9rem; font-weight: 600; text-align: center; background: #fff; box-sizing: border-box; }
.nav_search {width: 44px; height: 44px; padding: 0; box-sizing: border-box; display: inline-block;}
.util li:nth-child(3) a {background: #FFA300; color: #fff;}
.util li:nth-child(4) a {background:#FF4D4D; color: #fff;}
.util li:last-child a {background: #006BAD url('../images/util_search.png') no-repeat center center; border: none;}
.util li:nth-child(3) a, .util li:nth-child(4) a, .util li:last-child a {border-color: transparent;}



/* 푸터 */
footer {width: 100%;background: #EFEFEF;}
.footer {width: 1440px; margin: 0 auto;}
.address {display: flex; padding: 50px 0; justify-content: space-between;}
.ft_mark {display: flex; gap: 20px;}

.bottom_menu {display: flex; padding: 30px 0; border-bottom: 3px solid #fff;}
.bottom_menu li {margin-right: 40px;}
.bottom_menu li:last-child {margin-right: 0px;}
.bottom_menu a {font-size: 1.6rem; line-height: 2rem; font-weight: 500; color: #75797B;}
.bottom_menu li:first-child a {color: #000;}

.ft_mark a img {width: 110px; height: 80px;}
address {width: 825px; height: auto; font-style: normal; color: #75797B; font-size: 1.4rem; line-height: 2rem; font-weight: 400;}
address p {font-style: normal; color: #3C3C3C; font-size: 1.5rem; line-height: 2rem; font-weight: 400; margin-top: 20px;}
.ft_mark span {width: 80px; height: 80px; display: inline-block;}

/* :first-child 대신 :first-of-type을 사용하여 span 중 첫 번째 요소를 선택합니다. */
.ft_mark > span:first-of-type { background: url('../images/ft_mark01.jpg') no-repeat center center; background-size: contain; background-color: #EFEFEF; background-blend-mode: multiply; }
.ft_mark > span:last-of-type { background: url('../images/ft_mark02.jpg') no-repeat center center; background-size: contain; background-color: #EFEFEF; background-blend-mode: multiply; }





/* === subpage === */
.sub_visual { width: 100%; height: 300px; background: url('../images/sub_visual.jpg') center center/cover no-repeat; display: flex; justify-content: center; align-items: center; }
.sub_visual > div {width: 1440px; height: 300px; position: relative; }
.sub_visual_content {width:100%; height: auto; display: flex; justify-content: right; align-items: end; text-align: center; color: #fff; position: absolute; bottom: 76px;}
.sub_visual_content h2 { font-size: 2.4rem; line-height: 2.9rem; font-weight: 500; margin-right: 20px; text-shadow: 0 2px 8px rgba(0,0,0,0.2); }
/* Subpage Layout */
.container { width: 1440px; margin: 0 auto; display: flex; padding: 80px 0 160px 0; gap: 50px; }

/* LNB (Left Navigation Bar) */
.lnb { width: 300px; flex-shrink: 0; }
.lnb_title { width: 100%; height: 180px; background: url('../images/lnb_title_bg.png') no-repeat center center/cover; border-radius: 30px; display: flex; align-items: center; justify-content: center; font-size: 4rem; line-height: 4.4rem; font-weight: 700; color: #fff; font-family: 'paperlogy'; }

/* LNB 메뉴에 그라데이션 테두리 적용 */
.lnb_menu {background: #fff; border-radius: 30px; padding: 30px 35px; /* border: 2px solid transparent; */ /* 레이아웃 유지를 위한 투명 테두리 */ position: relative; /* 가상 요소의 기준점 */ z-index: 1; overflow: hidden; }
.lnb_menu::before { content: ""; position: absolute; inset: 0; /* top, right, bottom, left를 0으로 설정 */border-radius: 30px; /* 부모 요소와 동일한 값 */ padding: 2px; /* 테두리 두께 */ background: linear-gradient(0deg, #20265B, #E83278); /* 원하는 그라데이션 색상 */ -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; z-index: -1; /* 내용 뒤에 위치하도록 설정 */ }
.lnb_menu li a { display: flex; justify-content: space-between; align-items: center; padding: 15px 0; font-size: 2rem; font-weight: 500; line-height: 2.4rem; color: #000; border-bottom: 1px solid #DFDFDF; }
.lnb_menu > li:first-child > a { padding-top: 0; }
.lnb_menu > li:last-child > a { padding-bottom: 0; border-bottom: none; }
/* 활성화된 메인 메뉴 스타일 */
.lnb_menu li.active > a { color: #E83278; font-weight: 700; border-bottom: 3px solid #E83278; /* 활성 밑줄 */}
.lnb_menu li a i { font-size: 1.8rem; color: #999; }
.lnb_menu li.active > a i { color: #E83278; }
/* 기본적으로 서브메뉴는 숨김 처리 */
.sub_menu { display: none; padding: 20px 0 20px 10px; /* 패딩 조정 */ background: #fff; /* 배경색 흰색으로 변경 */ border-bottom: 1px solid #DFDFDF; }
/* 서브메뉴 항목 스타일 */
.sub_menu li { position: relative; padding-left: 15px; /* 점을 위한 공간 확보 */}
.sub_menu li::before { content: '•'; position: absolute; left: 0; top: 45%; transform: translateY(-45%); font-size: 2rem; color: #75797B; }
.sub_menu li:first-child:before { content: '•'; position: absolute; left: 0; top: 50%; transform: translateY(-75%); font-size: 2rem; color: #75797B; }
.sub_menu li:last-child:before { content: '•'; position: absolute; left: 0; top: 50%; transform: translateY(-35%); font-size: 2rem; color: #75797B; }
.sub_menu li a { font-size: 1.8rem; /* 폰트 크기 조정 */ font-weight: 500; line-height: 2.2rem; color: #75797B; border-bottom: none; padding: 10px 0; }
.sub_menu > li:first-child > a { padding-top: 0; }
.sub_menu > li:last-child > a { padding-bottom: 0; }
/* 활성화된 서브메뉴 스타일 */
.sub_menu li.sub_active a { color: #111; font-weight: 700; }
.sub_menu li.sub_active::before { color: #000; }

/* Content Area */
.content { flex-grow: 1; position: relative; }
.breadcrumb { display: flex; align-items: center; gap: 14px; font-size: 1.6rem; margin-bottom: 80px; }
.breadcrumb i { font-size: 1.8rem; color: #6D6D6D; }
.breadcrumb > a { position: relative; padding-right: 24px; /* 점을 위한 공간 확보 */ font-size: 1.8rem; line-height: 2.2rem; font-weight: 500; color: #6D6D6D; }
.breadcrumb > a::after { content: '•'; position: absolute; right: 0; top: 45%; transform: translateY(-50%); font-size: 2.4rem; color: #D9D9D9; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb strong {font-size: 1.8rem; line-height: 2.2rem; font-weight: 700; color: #333; }

.content_title { font-size: 4.4rem; font-weight: 700; line-height: 4.8rem; font-family: 'paperlogy'; color: #000; margin-bottom: 15px; }
.content_body { font-size: 1.8rem; line-height: 1.8; color: #333; }
.content_body > p { margin-bottom: 2em; font-size: 1.6rem; line-height: 150%; color: #2C2C2C; }
.sub1_bg{width: 643px; height: 461px; display: block; background: url('../images/content_body_bg.png') no-repeat center center; background-size: cover; position: absolute; bottom: 7px; right: 0; }