@charset "utf-8";
/*========================================================================================================================================= */
/*================================================================ common ================================================================= */
/*========================================================================================================================================= */
#content{}

.stick ul.flex li h6{background: #2c4a68; color: #fff; padding: 10px;  font-weight: 700; transform: skew(-0.1deg);}
.stick ul.flex li:nth-child(2n) h6{background: #006a65;}


/* 미들 타이틀 (작은 타이틀) */
.middle-title {text-align: center; margin-bottom: 40px;} 
.middle-title p { font-weight: 400; white-space: pre-line; margin-top: 20px;} 
.middle-title.white h3{color: #fff;}
.middle-title.white p{color: #fff;}
.middle-title h4 {line-height: 1.4; transform: skew(-0.1deg); white-space: pre-line;} 
.middle-title h5 {white-space: pre-line;}
.middle-title h6 {white-space: pre-line; color: #093e52;}
.middle-title > span.num::before {transform: skew(-0.1deg); margin: 0 auto 20px; border-radius: 50%; background: #00a99e;} 
.middle-title .en-sub{color: #0e3c8a;letter-spacing: 0.5px;margin-bottom: 10px;font-weight: 700;font-size: 1.1em;}

/* 둥그런 타이틀 */
.border-title {text-align: center; margin-bottom: 40px;} 
.border-title h5{display: inline-block;padding: 10px 50px;-webkit-border-radius: 30px;-moz-border-radius: 30px;border-radius:30px ;font-weight: 900;background: #f3f3f3;}


/* 테이블 스타일 */
.table-wrap {text-align: center;}
.table-wrap .middle-title h4 {display: inline-block; padding: 12px 20px 8px; background-color: #2c4a68; color: #fff;}
.table-wrap table {width: 100%; white-space: pre-line;}
.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 18px; padding: 15px 10px; border: 1px solid #eee; vertical-align: middle;}
.table-wrap table thead tr, .table-wrap table tbody tr th {background: #f5f5f5; font-weight: 600;}
.table-wrap .imp-icon img{max-width: 50px; margin-bottom: 10px;}


/* 사진 들어간 테이블 */
.photo-table table {text-align: center; width: 100%;}
.photo-table table tr, .photo-table table tr td {padding: 15px 10px; border: 1px solid #ccc; vertical-align: middle;color: #000;}
.photo-table table td {white-space: pre-line;}
.photo-table table thead tr:first-of-type td, .photo-table table thead tr {border: none;}
.photo-table table thead tr:first-of-type td {padding: 0;}
.photo-table table thead tr:last-of-type td {background: #0cb2fb; color: #fff; font-weight: 600; font-size: 20px;}
.photo-table table thead tr:first-of-type td:not(:first-child) {border: 1px solid #ccc; border-bottom: none;}
.photo-table table tbody{background: #fff;}

/* 숫자 리스트 */
.num-list .num {position: relative; margin-bottom: 30px; padding-left: 50px; text-align: left; /* display: flex; align-items: center; */}
.num-list .num:last-child {margin-bottom: 0;}
.num-list .num::before {position: absolute; display: flex; align-items: center; justify-content: center; left: 0; top: 0px; width: 35px; height: 35px; font-size: 20px;}
.num-list .num:nth-child(2n)::before {background-color: #00635e;}
.num-list.middle .num::before {top: 50%; transform: translateY(-50%);}


/* 이미지 테두리 리스트 */
.line-list img {border: 1px solid #ccc;}


/* 원형 이미지 테두리 리스트 */
.circle-list img {border-radius: 50%; border: 1px solid #ccc;}


/* 파란 선 들어간 네모 박스 */
.line-box li > div {position: relative; padding: 30px 20px 30px 30px; border: 1px solid #eee;}
.line-box li > div::after {content: ''; display: block; width: 10px; height: 100%; position: absolute; left: 0; top: 0; background-color: #2c4a68;}
.line-box h5 {margin-bottom: 15px; padding-bottom: 10px; border-bottom: 1px solid #eee; font-weight: 500;}
.line-box p {white-space: pre-line;}


/* 사진+텍스트 들어간 기본 스타일 */
.basic-box {display: flex; align-items: center; justify-content: flex-start; margin-top: 40px;}
.basic-box:first-of-type {margin-top: 0;}
.basic-box li:first-child {flex: 1;}
.basic-box li:last-child {margin-left: 30px; flex: 1;}
.basic-box li h5 {margin: 0 0 15px; font-weight: 600; white-space: pre-line; font-family: 'GmarketSansMedium'; transform: skew(-0.1deg);}
.basic-box li.num h5 {margin: 20px 0 15px;}
.basic-box li p {white-space: pre-line;}
.basic-box.line li h5 {position: relative; padding-bottom: 10px;}
.basic-box.line li h5::before {position: absolute; content: ''; left: 0; bottom: 0; width: 50px; height: 2px; background: #274c8d;}


/* 원 안에 아이콘 없는 박스 */
.circle-box > div > div {border-radius: 50%; background-color: #f5f5f5;}
.circle-box:nth-child(2n-1) > div > div {background-color: #ebf4f2;}
.circle-box > div > div::after {content: ''; display: block; padding-bottom: 100%;}
.circle-box p {position: absolute; width: 100%; height: auto; bottom: 50%; transform: translate(0, 50%); text-align: center; white-space: pre-line;}
.circle-box h5 {position: absolute; white-space: pre-line; text-align: center; bottom: 50%; transform:translateY(50%); display: inline-block; width: 100%;	}
/* .circle-box span{font-size: 24px; font-weight: bold;} */


/* 원 안에 아이콘 들어간 리스트 */
.circle-icon > li > div > div {border-radius: 50%; border: 2px solid #f5f5f5; width: 100%; height: 100%;}
.circle-icon > li:nth-child(2n-1) > div > div {border: 2px solid #d9dfee;}
.circle-icon > li > div > div::after {content: ''; display: block; padding-bottom: 100%;}
.circle-icon > li > div > div > div {position: absolute; display: flex; flex-direction: column; justify-content: center; align-items: center; top: 50%; transform: translate(-50%, -50%); left: 50%; height: 50%; width: 100%;}
.circle-icon p {margin-top: 15px; line-height: 1.4;}


/* 배경색 타이틀 */
.bg-tit {display: inline-block; padding: 6px 32px; margin: 0 auto 40px; border-radius: 40px; background: #00a99e; color: #fff; font-family: 'Noto Sans KR','Noto Sans KR'; font-weight: 700;}


/* 둥근 모서리를 가진 배경색 타이틀 */
.radius-tit {display: inline-block; padding: 8px 42px; margin: 0 auto; border-radius: 40px; background: linear-gradient(to right, #1f3d74, #4067aa); color: #fff;}


/* 자세히 보기 버튼 */
.detail-btn a {position: relative; display: inline-block; margin-top: 20px; padding: 12px 30px; border: 1px solid #333; font-size: 15px; font-weight: 700; transition: 0.4s ease-in-out;}
.detail-btn a::before {content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #327cbd; transition: 0.4s ease-in-out; z-index: -1;}
.detail-btn a:hover::before {width: 100%;}
.detail-btn a:hover {color: #fff; border: 1px solid #327cbd;}

/*================================================================ 1500px 이하 ================================================================= */
@media screen and (max-width:1500px) {

}

/*================================================================ 1200px 이하 ================================================================= */
@media screen and (max-width:1200px) {
/* #wrapper {margin-top: 69px;} */

}

/*================================================================ 1025px 이하 ================================================================= */
@media screen and (max-width:1025px) {

}

/*================================================================ 900px 이하 ================================================================= */
@media screen and (max-width:900px) {
.middle-title .en-sub{font-size: 1.1em;}


/* 테이블 스타일 */
.table-wrap .table-scroll {overflow-x: scroll; overflow-y: hidden; max-width: 100%;}
.table-scroll::-webkit-scrollbar {width: 12px;}
.table-scroll::-webkit-scrollbar-track {-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); border-radius: 5px; background-color: rgba(220, 220, 220, 0.3);}
.table-scroll::-webkit-scrollbar-thumb {background-clip: padding-box; border-radius: 5px; background-color: #516371; border: 2px solid transparent;}
.table-wrap table {min-width: 900px;}
.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 15px;}
}

/*================================================================ 769px 이하 ================================================================= */
@media screen and (max-width:769px) {

.res-bg{padding: 80px 0 !important;}

/* 숫자 스타일 */
.num::before {margin: 10px auto 0;}
.num-list .num::before {margin: 0 10px 0 0;}


/* 사진 들어간 테이블 */
.photo-table table td {font-size: 15px;}
.photo-table table thead tr:last-of-type td {font-size: 18px;}


/* 사진+텍스트 들어간 기본 스타일 */
.basic-box {display: block; text-align: center;}
.basic-box:not(:first-of-type) {margin-top: 40px;}
.basic-box li:last-child {margin-left: 0; margin-top: 20px;}
.basic-box li h5 {margin: 20px 0 10px !important;}
.basic-box li img {border-radius: 20px; max-width: 500px; width: 100%;}
.basic-box.line li h5::before {left: 50%; transform: translateX(-50%);}


/* 파란 선 들어간 네모 박스 */
.line-box li::after {width: 8px;}
.line-box li > div {height: auto !important;}
}

/*================================================================ 600px 이하 ================================================================= */
@media screen and (max-width:600px) {

}

/*================================================================ 425px 이하 ================================================================= */
@media screen and (max-width:425px) {

.link {top: -60px;}
.res-bg{padding: 50px 0 !important;}
.stick .flex > li > div.m10{margin: 5px;}
.title-num{font-size: 20px; width: 45px; height: 45px;}


/* 숫자 스타일 */
.num::before {width: 40px; height: 40px; font-size: 17px; margin: 0 auto;}
.num-list .num {display: flex; align-items: center; margin-bottom: 0; padding-left: 40px;}
.num-list .num:not(:first-child) {margin-top: 20px;}
.num-list .num::before {width: 30px; height: 30px; margin: 0 auto; font-size: 16px;}


/* 미들 타이틀 (작은 타이틀) */
.middle-title{margin-bottom: 20px;}
.middle-title p{line-height: 1.7;}
.middle-title > span.num::before {margin: 0 auto 10px;}


/* 사진+텍스트 들어간 기본 스타일 */
.basic-box li img {border-radius: 10px; max-width: 70%;}
.basic-box li h5 {margin: 15px 0 10px !important; line-height: 1.4;}


/* 원 안에 아이콘 없는 박스 */
.circle-box > div {margin: 5px !important;}
.circle-box h5 {font-size: 15px;}


/* 파란 선 들어간 네모 박스 */
.line-box li::after {width: 5px;}
.line-box li > div {padding: 25px 20px 30px 25px;}
.line-box li h5 {padding-bottom: 5px; margin-bottom: 10px;}


/* 테이블 스타일 */
.table-wrap table {min-width: 700px;}
.table-wrap table tr, .table-wrap table th, .table-wrap table td {font-size: 12px;}
.table-wrap .imp-icon img{max-width: 30px; margin-bottom: 5px;}


/* 사진 들어간 테이블 */
.photo-table table td {font-size: 12px;}
.photo-table table tr, .photo-table table tr td {padding: 10px 5px;}
.photo-table table thead tr:last-of-type td {font-size: 15px;}


/* 배경색 타이틀 */
.bg-tit {padding: 3px 24px; margin: 0 auto 20px;}


/* 둥근 모서리를 가진 배경색 타이틀 */
.radius-tit {padding: 6px 32px;}
}


/*========================================================================================================================================= */
/*================================================================ common ================================================================= */
/*========================================================================================================================================= */

/* =================================================================================================================================== */
/* =========================================================== main-visual =========================================================== */
/* =================================================================================================================================== */

.main-visual { position: relative; width: 100%; min-height: 900px; display: flex; align-items: center; overflow: hidden; background-color: #0d1117;}
.mv-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 1;}
.mv-bg-img { width: 100%; height: 100%; object-fit: cover; object-position: center;}
.main-visual .inner { position: relative; z-index: 2;}
.mv-text {text-align: center;}
.mv-kr { font-weight: 700; color: #fff; margin-bottom: 20px;}
.mv-title { font-weight: 800; line-height: 1.3; color: #fff; margin-bottom: 25px;}
.point-color-b { color: #6ea8ff;}
.mv-en { font-weight: 700; letter-spacing: 0.2em; color: #b0b0b0; margin-bottom: 40px;}
.mv-desc { font-weight: 700; line-height: 1.6; color: #fff; margin-bottom: 45px;}

.mv-btn-group { display: flex; gap: 16px; justify-content: center;}
.mv-btn { position: relative; display: inline-block; line-height: 1;padding: 20px 45px; font-weight: 700; color: #fff; background-color: transparent; border: 1px solid #417bbf; border-radius: 50px; text-align: center; overflow: hidden; z-index: 1; transition: color 0.4s ease; cursor: pointer;}
.mv-btn span { position: relative; z-index: 2;}
.mv-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #417bbf; transition: width 0.4s ease; z-index: 0;}
.mv-btn:hover::before { width: 100%;}
.mv-btn-outline { border-color: rgba(255,255,255,0.7);}
.mv-btn-outline::before { background-color: #fff;}
.mv-btn-outline:hover { color: #111;}

@media screen and (max-width: 1024px) {
  .main-visual { min-height: 700px;}
  .mv-btn { padding: 16px 36px;}
}

@media screen and (max-width: 769px) {
  .main-visual { min-height: 600px;}
  .mv-kr { margin-bottom: 12px;}
  .mv-title { margin-bottom: 16px;}
  .mv-en { margin-bottom: 25px;}
  .mv-desc { margin-bottom: 30px;}
  .mv-btn-group { flex-direction: column; gap: 12px; width: 100%; padding: 0 20px;}
  .mv-btn { padding: 14px 0; width: 100%;}
}

@media screen and (max-width: 425px) {
  .main-visual { min-height: 560px;}
  .mv-desc br { display: none;}
}

/* =================================================================================================================================== */
/* =========================================================== main-visual =========================================================== */
/* =================================================================================================================================== */


/* =================================================================================================================================== */
/* =========================================================== contact-modal =========================================================== */
/* =================================================================================================================================== */

.contact-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 99990; display: none; align-items: center; justify-content: center;}
.contact-modal.show { display: flex;}
.cm-dim { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.55);}
.cm-box { position: relative; z-index: 2; width: 440px; max-width: 90%; padding: 50px 40px; background-color: #fff; border-radius: 16px; text-align: center; transform: translateY(20px); opacity: 0; transition: transform 0.3s ease, opacity 0.3s ease;}
.contact-modal.show .cm-box { transform: translateY(0); opacity: 1;}
.cm-close { position: absolute; top: 20px; right: 20px; width: 28px; height: 28px; cursor: pointer;}
.cm-close svg { width: 100%; height: 100%;}
.cm-eyebrow { font-weight: 700; letter-spacing: 0.3em; color: #417bbf; margin-bottom: 10px;}
.cm-title { font-weight: 800; color: #111; margin-bottom: 12px;}
.cm-desc { font-weight: 400; color: #666; margin-bottom: 30px;}

.cm-info { display: flex; flex-direction: column; gap: 12px;}
.cm-item { display: flex; align-items: center; gap: 14px; padding: 18px 20px; background-color: #f7f7f8; border-radius: 10px; text-align: left; transition: background-color 0.3s ease;}
.cm-item:hover { background-color: #eaf1fa;}
.cm-icon { width: 24px; height: 24px; flex-shrink: 0;}
.cm-icon svg { width: 100%; height: 100%;}
.cm-text { display: flex; flex-direction: column; gap: 4px;}
.cm-text em { font-style: normal; font-weight: 500; color: #888;}
.cm-text b { font-weight: 800; color: #111;}

@media screen and (max-width: 425px) {
  .cm-box { padding: 40px 25px;}
  .cm-item { padding: 16px;}
}

/* =================================================================================================================================== */
/* =========================================================== contact-modal =========================================================== */
/* =================================================================================================================================== */
/* =================================================================================================================================== */
/* =========================================================== business =========================================================== */
/* =================================================================================================================================== */

.business { padding: 150px 0;}
.biz-title { text-align: center; margin-bottom: 60px;}
.biz-eyebrow { font-weight: 700; letter-spacing: 0.3em; color: #417bbf; margin-bottom: 15px;}
.biz-heading { font-weight: 800; color: #111; margin-bottom: 20px;}
.biz-desc { font-weight: 400; color: #666;}

.biz-list { display: flex; flex-wrap: wrap; gap: 20px; list-style: none;}
.biz-card { position: relative; width: calc((100% - 60px) / 4); aspect-ratio: 1 / 1.2; border-radius: 12px; overflow: hidden; cursor: pointer;}
.bc-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: opacity 0.5s ease;}
.bc-bg img { width: 100%; height: 100%; object-fit: cover;}
.bc-bg-hover { opacity: 0;}
.biz-card:hover .bc-bg-default { opacity: 0;}
.biz-card:hover .bc-bg-hover { opacity: 1;}

.bc-content { position: absolute; left: 0; bottom: 0; width: 100%; padding: 35px 30px; z-index: 2; text-align: center; transition: transform 0.5s ease;}
.bc-title { font-weight: 800; color: #fff; margin-bottom: 12px;}
.bc-desc-default { font-weight: 700; line-height: 1.6; color: #fff; transition: opacity 0.4s ease, max-height 0.4s ease; max-height: 100px; opacity: 1;}
.bc-desc-hover { font-weight: 400; line-height: 1.7; color: #fff; max-height: 0; opacity: 0; overflow: hidden; transition: opacity 0.4s ease 0.1s, max-height 0.4s ease;}
.biz-card:hover .bc-content { transform: translateY(-10px);}
.biz-card:hover .bc-desc-default { max-height: 0; opacity: 0;}
.biz-card:hover .bc-desc-hover { max-height: 200px; opacity: 1;}

.biz-btn-wrap { text-align: center; margin-top: 30px;}
.biz-btn { position: relative; display: inline-block; padding: 18px 40px; font-size: 18px; font-weight: 700; color: #111; background-color: transparent; border: 1px solid #111; border-radius: 50px; overflow: hidden; z-index: 1; transition: color 0.4s ease;}
.biz-btn span { position: relative; z-index: 2;}
.biz-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #111; transition: width 0.4s ease; z-index: 0;}
.biz-btn:hover { color: #fff;}
.biz-btn:hover::before { width: 100%;}

@media screen and (max-width: 1024px) {
  .business { padding: 90px 0;}
  .biz-title { margin-bottom: 40px;}
  .biz-list { gap: 15px;}
  .biz-card { width: calc((100% - 30px) / 3);}
}

@media screen and (max-width: 769px) {
  .business { padding: 60px 0;}
  .biz-btn{font-size: 15px;padding: 10px 25px;}
  .biz-btn-wrap{margin-top: 20px;}
  .biz-card { width: 100%; aspect-ratio: 4 / 3;}
  .biz-card:active .bc-bg-default { opacity: 0;}
  .biz-card:active .bc-bg-hover { opacity: 1;}
}

@media screen and (max-width: 425px) {
	.biz-btn{font-size: 13px;}
  .biz-card { aspect-ratio: 1 / 1;}
  .bc-content { padding: 25px 20px;}
}

/* =================================================================================================================================== */
/* =========================================================== business =========================================================== */
/* =================================================================================================================================== */

/* =================================================================================================================================== */
/* =========================================================== member =========================================================== */
/* =================================================================================================================================== */

.member { padding: 150px 0;}
.mem-title { text-align: center; margin-bottom: 60px;}
.mem-eyebrow { font-weight: 700; letter-spacing: 0.3em; color: #417bbf; margin-bottom: 15px;}
.mem-heading { font-weight: 800; color: #111; margin-bottom: 20px;}
.mem-desc { font-weight: 400; color: #666;}

.mem-slider-wrap { position: relative; display: flex; align-items: center; gap: 20px;}
.mem-swiper { flex: 1; overflow: hidden; cursor: grab;}
.mem-swiper:active { cursor: grabbing;}
.mem-card { width: 100%;}
.mem-photo { width: 100%; aspect-ratio: 1 / 1.3;overflow: hidden; margin-bottom: 20px; border: 1px solid #ccc; background: #f2f2f2;}
.mem-photo img { width: 100%; height: 100%; object-fit: cover;}
.mem-name { font-weight: 800; color: #111; text-align: center; margin-bottom: 6px;}
.mem-position { font-weight: 700; color: #417bbf; text-align: center;}

.mem-arrow { flex-shrink: 0; width: 50px; height: 50px; border-radius: 100%; border: 1px solid #ddd; background: #fff; cursor: pointer; position: relative; transition: background 0.3s ease, border-color 0.3s ease;}
.mem-arrow::before { content: ""; position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; border-top: 2px solid #333; border-right: 2px solid #333; transition: border-color 0.3s ease;}
.mem-prev::before { transform: translate(-30%, -50%) rotate(-135deg);}
.mem-next::before { transform: translate(-70%, -50%) rotate(45deg);}
.mem-arrow:hover { background: #417bbf; border-color: #417bbf;}
.mem-arrow:hover::before { border-color: #fff;}

.mem-btn-wrap { text-align: center; margin-top: 60px;}
.mem-btn { position: relative; display: inline-block; padding: 18px 40px; font-size: 18px; font-weight: 700; color: #111; background-color: transparent; border: 1px solid #111; border-radius: 50px; overflow: hidden; z-index: 1; transition: color 0.4s ease;}
.mem-btn span { position: relative; z-index: 2;}
.mem-btn::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #111; transition: width 0.4s ease; z-index: 0;}
.mem-btn:hover { color: #fff;}
.mem-btn:hover::before { width: 100%;}

@media screen and (max-width: 1024px) {
  .member { padding: 90px 0;}
  .mem-title { margin-bottom: 40px;}
  .mem-arrow { width: 40px; height: 40px;}
}

@media screen and (max-width: 769px) {
  .member { padding: 60px 0;}
  .mem-slider-wrap { gap: 10px;}
  .mem-arrow { width: 34px; height: 34px;}
}

/* =================================================================================================================================== */
/* =========================================================== member =========================================================== */
/* =================================================================================================================================== */

/* =================================================================================================================================== */
/* =========================================================== latest-board =========================================================== */
/* =================================================================================================================================== */

.latest-board { padding: 150px 0;}
.lb-block { margin-bottom: 100px;}
.lb-block:last-child { margin-bottom: 0;}
.lb-title { text-align: center; margin-bottom: 50px;}
.lb-eyebrow { font-weight: 700; letter-spacing: 0.3em; color: #417bbf; margin-bottom: 15px;}
.lb-heading { font-weight: 800; color: #111;}

.lb-grid { display: flex; gap: 25px; list-style: none;}
.lb-card { width: calc((100% - 50px) / 3);}
.lb-link { display: block;}
.lb-thumb { position: relative; width: 100%; aspect-ratio: 3 / 2; border-radius: 12px; overflow: hidden; margin-bottom: 18px; background-color: #f2f2f2;}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease;}
.lb-link:hover .lb-thumb img { transform: scale(1.05);}

.badge-new { position: absolute; top: 12px; right: 12px; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: rgba(10,10,10,0.85); color: #fff; font-weight: 700; border-radius: 100%;}
.lb-yt-icon { position: absolute; top: 12px; left: 12px; width: 32px; height: 32px;}
.lb-yt-icon svg { width: 100%; height: 100%;}

.lb-card-title { font-weight: 500; line-height: 1.5; color: #222; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;}

.lb-more-wrap { text-align: center; margin-top: 40px;}
.lb-more { position: relative; display: inline-block; padding: 14px 40px; font-weight: 700; color: #111; background-color: transparent; border: 1px solid #ccc; border-radius: 50px; overflow: hidden; z-index: 1; transition: color 0.4s ease;}
.lb-more span { position: relative; z-index: 2;}
.lb-more::before { content: ""; position: absolute; top: 0; left: 0; width: 0; height: 100%; background-color: #417bbf; transition: width 0.4s ease; z-index: 0;}
.lb-more:hover { color: #fff; border-color: #417bbf;}
.lb-more:hover::before { width: 100%;}

@media screen and (max-width: 1024px) {
  .latest-board { padding: 90px 0;}
  .lb-block { margin-bottom: 70px;}
  .lb-title { margin-bottom: 35px;}
  .lb-grid { gap: 15px;}
  .lb-card { width: calc((100% - 30px) / 3);}
}

@media screen and (max-width: 769px) {
  .latest-board { padding: 60px 0;}
  .lb-block { margin-bottom: 50px;}
  .lb-grid { flex-direction: column; gap: 20px;}
  .lb-card { width: 100%;}
  .badge-new { width: 40px; height: 40px;}
}

/* =================================================================================================================================== */
/* =========================================================== latest-board =========================================================== */
/* =================================================================================================================================== */

/* =================================================================================================================================== */
/* =========================================================== location =========================================================== */
/* =================================================================================================================================== */

.location { padding: 150px 0; background-color: #fafafa;}
.loc-title { margin-bottom: 60px;text-align: center;}
.loc-eyebrow { font-weight: 700; letter-spacing: 0.3em; color: #417bbf; margin-bottom: 15px;}
.loc-heading { font-weight: 800; color: #111;}

.loc-content { display: flex; gap: 60px;}
.loc-map { flex: 1; min-width: 0; border-radius: 12px; overflow: hidden;}
.loc-map .root_daum_roughmap { width: 100% !important;}

.loc-info { width: 480px; flex-shrink: 0;}
.loc-item { padding-bottom: 13px; margin-bottom: 13px; border-bottom: 1px solid #e5e5e5;}
.loc-label { font-weight: 800; color: #417bbf; margin-bottom: 10px;}
.loc-text { font-weight: 400; color: #333;}

.loc-btn-wrap { display: flex; gap: 12px; margin-top: 35px;}
.loc-btn { display: flex; align-items: center; justify-content: center; gap: 8px; flex: 1; padding: 16px 0; font-size: 17px; font-weight: 700; border-radius: 8px; transition: opacity 0.3s ease;}
.loc-btn img { width: 22px; height: auto;}
.loc-btn-naver { background-color: #03c75a; color: #fff;}
.loc-btn-kakao { background-color: #fee500; color: #111;}
.loc-btn:hover { opacity: 0.85;}

@media screen and (max-width: 1024px) {
  .location { padding: 90px 0;}
  .loc-title { margin-bottom: 40px;}
  .loc-content { flex-direction: column; gap: 40px;}
  .loc-info { width: 100%;}
}

@media screen and (max-width: 769px) {
  .location { padding: 60px 0;}
  .loc-content { gap: 30px;}
  .loc-item { padding-bottom: 18px; margin-bottom: 18px;}
  .loc-btn-wrap { flex-direction: column;}
  .loc-map {height: 300px;}
}

/* =================================================================================================================================== */
/* =========================================================== location =========================================================== */
/* =================================================================================================================================== */