@charset "utf-8";
.dot-list li {text-indent: -1em; padding-left: 1em;}
.dot-list li:not(:last-child) {margin-bottom: var(--space-15);}
.dot-list li:before {content: '•'; font-weight: 700; margin-right: 10px;}

.sec-greeting-head {position: relative; padding: var(--space-150) 0; margin-bottom: var(--space-150); background: url('/images/sub/bg-greeting.jpg') no-repeat center center; background-size: cover; font-size: var(--font-size-40); line-height: 1.5em; font-weight: 400;}
.sec-greeting-head:before {content: 'JBD'; position: absolute; left: 0; top: 0; font-size: clamp(120px, calc(360 / var(--inner) * 100vw), 360px); font-weight: 800; line-height: 1; color: rgba(255, 255, 255, 0.04);}

.sec-greeting-items {display: flex; flex-direction: column; gap: var(--space-80); font-size: var(--font-size-18); line-height: 1.5556em;}
.sec-greeting-items .contain {display: flex; gap: 15px clamp(35px, calc(50 / var(--inner) * 100vw), 100px);}
.sec-greeting-items .group {position: relative;}
.sec-greeting-items .group:before {content: ''; z-index: -1; position: absolute; left: 0; bottom: 0; width: 40.8333%; height: calc(100% + var(--space-50)); border-radius: 0 var(--radius-16) 0 0; background: var(--primary-color); opacity: 0.1;}
.sec-greeting-items .group:nth-child(even):before {left: auto; right: 0; border-radius: var(--radius-16) 0 0 0;}
.sec-greeting-items .group:nth-child(even) .contain {flex-direction: row-reverse; text-align: right;}
.sec-greeting-items .txt {display: flex; flex-direction: column; justify-content: center; flex: 1; min-width: 0;}
.sec-greeting-items .img {width: 50%; border-radius: var(--radius-16); overflow: hidden;}
.sec-greeting-items .num {margin-bottom: var(--space-20); font-weight: 600; color: var(--primary-color); letter-spacing: .03em;}
.sec-greeting-items h3 {margin-bottom: var(--space-15); font-size: var(--font-size-32); line-height: 1.75em; color: var(--primary-color);}

.page-agent {padding-bottom: var(--space-150); background: url('/images/sub/bg-agent.jpg') no-repeat center center; background-size: cover;}
.page-agent .contain {display: flex; gap: 25px var(--space-60)}
.agent-photo, .agent-txt {border-radius: var(--radius-16); overflow: hidden;}
.agent-photo {max-width: 550px; width: 46%; height: fit-content;}
.agent-photo img {width: 100%; aspect-ratio: 59/62;}
.agent-txt {display: flex; flex-direction: column; justify-content: center; flex: 1; padding: var(--space-50); background: #fff; font-size: var(--font-size-18); line-height: 1.6667em;}
.agent-header h3 {font-size: var(--font-size-40); line-height: 1.3em; color: var(--dark-color);}
.agent-header p {margin-top: var(--space-15); font-size: var(--font-size-24); line-height: 1.1667em;}
.agent-header {margin-bottom: clamp(15px, calc(60 / var(--inner) * 100vw), 60px); padding-bottom:  clamp(15px, calc(60 / var(--inner) * 100vw), 60px); border-bottom: 1px solid #ddd;}

.page-direction {display: flex; gap: 25px var(--space-60)}
.direction-map, .direction-txt {flex: 1; min-width: 1%;}
.direction-map {height: clamp(270px, calc(400 / var(--inner) * 100vw), 400px);}
.root_daum_roughmap .wrap_map, .root_daum_roughmap {width: 100% !important; height: 100% !important;}
.direction-txt {display: flex; flex-direction:column; justify-content: space-between; gap: 20px; padding: var(--space-30) 0 ;}
.direction-txt .addr {display: flex; align-items: center; gap: 10px; font-size: var(--font-size-24); line-height: 1.25em; font-weight: 600; color: var(--dark-color);}
.direction-txt dl {display: flex; align-items: center; gap: 10px; padding: var(--space-30) 0; border-bottom: 1px solid #ddd; font-size: var(--font-size-18); line-height: 1.4444em;}
.direction-txt dt {font-weight: 600;}

.business-banner {position: relative; padding: var(--space-120) 0; margin-bottom: var(--space-120); overflow: hidden; color: #fff; font-size: var(--font-size-18); line-height: 1.5556em;}
.business-banner:before {content: ''; z-index: 1; position: absolute; left: 0; top: 0; bottom: 0; width: 50%; background: rgba(33, 95, 154, 0.90);}
.business-banner .bg img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;}
.business-banner .contain {position: relative; z-index: 1;}
.business-banner h3 {margin-bottom: var(--space-20); font-size: var(--font-size-32); font-weight: 700; line-height: 1.4375em;}

.sec-invest h3 {font-size: var(--font-size-32); font-weight: 700; line-height: 1.3125em; margin-bottom: var(--space-40); color: var(--dark-color);}
.invest-cards {display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-20);}
.invest-card {display: flex; flex-direction: column; gap: var(--space-40); padding: var(--space-40); border: 1px solid #ddd; border-radius: var(--radius-16);}
.invest-card .txt {display: flex; flex-direction: column; gap: 10px;}
.invest-card .num {font-size: clamp(14px, calc(16 / var(--inner) * 100vw), 16px); line-height: 1.625em; color: #505050; letter-spacing: -.03em;}
.invest-card h4 {margin-top: 10px; font-size: var(--font-size-20); font-weight: 600; color: var(--dark-color); line-height: 1.5em;}
.invest-card .txt h4 {margin-top: 0;}

.input-list {display: flex; flex-wrap: wrap; gap: 8px var(--space-40);}