@charset "utf-8";
/* About 페이지 키워드 섹션 */
.page-about section:not(:last-child) {margin-bottom: clamp(40px, calc(120 / var(--inner) * 100vw), 120px);}
.page-about section h2 {margin-bottom: clamp(20px, calc(60 / var(--inner) * 100vw), 60px);}
.keyword-section { width: 100%;}
.keyword-title { left: 868px; top: 0px; text-align: center; color: #fff; font-size: var(--font-size-40); font-weight: 700; word-wrap: break-word; }
.keyword-grid { display: flex; gap: 0; left: 0px; top: 108px; width: 100%;}
.keyword-card { width: calc(100% / 4); height: 620px; position: relative; overflow: hidden; }
.card-bg { width: 100%; height: 100%; position: relative; }
.card-bg img { width: 100%; height: 100%; object-fit: cover; }
.card-overlay {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%); display: flex; align-items: center; justify-content: center; transition: .6s;}
.card-overlay:before {content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 100%;background: var(--primary-color); opacity: .88;}
.card-txt {display: flex; flex-direction: column; position: absolute; z-index :1; top: 0; right: 0; bottom: 0; left: 0; padding: var(--space-90) 15px; text-align: center; color:#fff;}
.card-txt h3 {font-size: var(--font-size-30); font-weight: 600; word-wrap: break-word;}
.card-txt .flex1 {pb:28px}
.card-txt p {font-size: var(--font-size-32); font-weight:600; line-height: 1.4375em; word-wrap: break-word;}
.card-on-txt {position: absolute; width: 100%; height: 100%; left: 0; top: 50%; z-index: 1; padding: clamp(20px, calc(90 / var(--inner) * 100vw), 90px) 10px 10px; text-align: center; color: white; background: rgba(184, 157, 77, 0.88); opacity: 0; transition: .6s;}
.keyword-card:nth-child(even) .card-on-txt {background: rgba(22, 32, 42, 0.88);}
.card-on-txt p {position: absolute; top: 50%; left: 0; width: 100%; transform: translateY(-50%); padding: 0 clamp(15px, calc(20 / var(--inner) * 100vw), 20px); font-size: clamp(15px, calc(20 / var(--inner) * 100vw), 20px); line-height: 1.2em; font-weight: 600;}
.keyword-card:hover .card-on-txt {top: 0; opacity: 1;}
.keyword-card:hover .card-overlay {top: -100%;}

/* About 메인 섹션 */
.about-main { width: 100%;position: relative; }
.about-title {text-align: center; color: #fff; font-size: var(--font-size-40); font-weight: 700; word-wrap: break-word; }
.about-quote {margin-bottom: clamp(25px, calc(80 / var(--inner) * 100vw), 80px); text-align: center; color: #B89D4D; font-size: var(--font-size-32); font-weight: 600; word-wrap: break-word; }

/* 프로세스 플로우 */
.process-flow {display: flex; justify-content: center; gap: 22px; max-width: 1460px; margin: 0 auto; padding-left: var(--container-space); padding-right: var(--container-space);}
.process-card {width: 300px; padding: var(--space-40) 20px; background: #fff; color: #484848;}
.process-title {margin-bottom: var(--space-30); text-align: center; color: #B89D4D; font-size: var(--font-size-24); font-weight: 600; word-wrap: break-word; }
.process-arrow {display: flex; align-items: center; text-align: center; color: #B89D4D; font-size: var(--font-size-40); font-weight: 600; word-wrap: break-word; }

/* 히어로 섹션 */
.group-about-info {margin-top: clamp(40px, calc(120 / var(--inner) * 100vw), 120px);padding: clamp(40px, calc(120 / var(--inner) * 100vw), 120px) 0; background: url('/images/sub/about-info-bg.jpg') no-repeat center center; background-size: cover;}
.about-hero { position: relative; width: 100%;}
.hero-bg { width: 100%; height: 100%; position: relative; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; background: linear-gradient(0deg, rgba(0, 0, 0, 0.40) 0%, rgba(0, 0, 0, 0.40) 100%); }
.hero-content {margin-bottom: clamp(25px, calc(80 / var(--inner) * 100vw), 80px);text-align: center; color: white; }
.hero-title { font-size: var(--font-size-32); font-weight: 600; word-wrap: break-word; margin-bottom: 30px; }
.hero-desc { font-size: var(--font-size-20); font-weight: 500; word-wrap: break-word; }

/* 서비스 카드 */
.service-cards { display: flex; gap: 20px; flex-wrap: wrap; }
.service-card {flex: 1 1 auto; width: calc((100% - 20px) / 2); height: 200px; background: rgba(255, 255, 255, 0.88); padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.service-title { color: #B89D4D; font-size: var(--font-size-24); font-weight: 700; word-wrap: break-word; margin-bottom: 20px; }
.service-desc { color: #484848; font-weight: 400; word-wrap: break-word; }

/* 비즈니스 타입 */
.business-types {margin-top: clamp(15px, calc(40 / var(--inner) * 100vw), 40px);background: rgba(255, 255, 255, 0.88); padding: 60px; display: flex; flex-direction: column; justify-content: center; }
.type-row { display: flex; align-items: center; flex-wrap: wrap; max-width: 800px; margin: 0 auto; gap: 10px; justify-content: center; margin-bottom: 20px; }
.type-item { text-align: center; color: #484848; font-size: var(--font-size-20); font-weight: 500; word-wrap: break-word; }
.type-divider { width: 1px; height: 14px; background: #DDDDDD; }
.type-summary {margin-top: 10px; text-align: center; color: #B89D4D; font-size: var(--font-size-28); font-weight: 600; word-wrap: break-word; }

/* WHY CHOOSE US 섹션 */
.why-choose-section {width: 100%; position: relative; margin: 0 auto; padding: clamp(40px, calc(120 / var(--inner) * 100vw), 120px) 0; background: url('/images/sub/why-choose-bg.jpg') no-repeat center center; background-size: cover;}
.why-choose-title {margin-bottom: clamp(20px, calc(60 / var(--inner) * 100vw), 60px); text-align: center; color: #fff; font-size: var(--font-size-40); font-weight: 700; word-wrap: break-word; }
.why-choose-list { width: 100%; display: flex; flex-direction: column; gap: 40px; padding: 0 var(--container-space);}
.why-choose-item {gap: 20px; align-self: stretch; height: 210px; position: relative; padding: 0 clamp(20px, calc(100 / var(--inner) * 100vw), 100px) 0; background: #fff; overflow: hidden; display: flex; align-items: center; flex-direction: row-reverse;}
.item-content {flex:1;}
.item-title { color: #B89D4D; font-size: var(--font-size-28); font-weight: 600; word-wrap: break-word; margin-bottom: var(--space-25); }
.item-desc { color: #484848; font-weight: 400; word-wrap: break-word; line-height: 1.5; }

/* Business 페이지 메뉴 */
.business-menu {position: relative; margin: 0 auto; margin-bottom: clamp(40px, calc(120 / var(--inner) * 100vw), 120px); }
.menu-grid { display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(1, 1fr); gap: 20px; width: 100%; height: 100%; }
.menu-item { width: 100%; height: 100px; background: #F5F5F5; overflow: hidden; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s ease; }
.active .menu-item { background: #16202A; }
.menu-text { text-align: center; color: #999999; font-size: var(--font-size-20); font-weight: 600; word-wrap: break-word; }
.active .menu-item .menu-text { color: white; }

/* Business 탭 콘텐츠 */
.business-cnt { width: 100%; max-width: 1400px; margin: 0 auto; }
.tab-content { display: none; }
.tab-content.active { display: block; }
.tab-content-item { padding: 40px 0; }
.tab-content-title { color: #fff; font-size: var(--font-size-40); font-weight: 700; word-wrap: break-word; margin-bottom: 30px; }

/* 발렛 서비스 섹션 */
.business-service { width: 100%; position: relative; }
.business-service .service-title { color: #fff; font-size: var(--font-size-40); line-height: 1em; font-weight: 700; word-wrap: break-word; margin-bottom: var(--space-80); }
.service-description { margin-bottom: clamp(20px, calc(60 / var(--inner) * 100vw), 60px); }
.service-description p { color: #484848; font-weight: 400; word-wrap: break-word; line-height: 30px; margin-bottom: 15px; }
.service-description strong { font-weight: 600; }
.service-features {display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.feature-card { width: calc((100% - 20px) / 2); background: rgba(184, 157, 77, 0.08); border: 1px var(--primary-color) solid; padding: var(--space-40); }
.service-features.type2 .feature-card {width: calc((100% - 40px) / 3);}
.feature-title { color: #B89D4D; font-size: var(--font-size-24); font-weight: 600; word-wrap: break-word; margin: var(--space-35) 0; }
.feature-desc { color: #fff; font-weight: 400; word-wrap: break-word; line-height: 30px; }



/* 견적문의 */
#contArea.inquiry {background: url('/images/sub/inquiry-bg.jpg') no-repeat center center; background-size: cover;}
.page-contact-inner {padding: clamp(40px, calc(120 / var(--inner) * 100vw), 120px) clamp(20px, calc(120 / var(--inner) * 100vw), 120px); background: linear-gradient(180deg, rgba(255, 255, 255, 0.64) 0%, #FFF 70.72%);}
.page-contact h2 {margin-bottom: clamp(20px, calc(60 / var(--inner) * 100vw), 60px); font-size: var(--font-size-40); font-weight: 700; word-wrap: break-word; text-align: center;}
.service-options {display: flex; flex-wrap: wrap; gap: clamp(10px, calc(20 / var(--inner) * 100vw), 20px) clamp(20px, calc(30 / var(--inner) * 100vw), 30px); max-width: 1014px;}
.service-options .radiobox {width: auto; min-width: max-content;}
.page-contact .board-form table th, .page-contact .board-form table td {border: 0; background: 0;}