@charset "utf-8";
/* 서브공통 */
.sub-section {margin-bottom: var(--space-100);}
.sub-section:last-child {margin-bottom: 0;}
.sub-section.bg-grey {background: #FBFBFB; padding: var(--space-100) 0;}
.sub-section .cont-tit {margin-bottom: var(--space-40);}
.sub-section .cont-tit h2 {display: flex; align-items: center; gap: var(--space-16); font-size: var(--font-size-28); font-weight: 600; line-height: 1.5em; letter-spacing: -0.03em; color: var(--color-sub);}
.sub-section .cont-tit h2::before {content: ""; display: block; width: 12px; height: 12px; background: var(--color-primary); flex-shrink: 0;}
.sub-com-num {display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 32px; height: 32px; background: var(--color-primary); color: #fff; font-size: var(--font-size-16); font-weight: 700;}
/********************* 텍스메일 *********************/

/* 텍스메일 이란? */
/* 경영정보 Taxmail */
.about-taxmail .list {display: flex; flex-wrap: wrap; gap: 16px;}
.about-taxmail .list li {display: flex; flex-direction: column; flex: 1}
.about-taxmail .list li .txt-wrap {flex: 1; display: flex; flex-direction: column; padding: var(--space-40) var(--space-32); border: 1px solid #DDDDDD;}
.about-taxmail .list .tit {font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; color: var(--color-sub); margin-bottom: var(--space-20);}
.about-taxmail .list .txt {font-size: var(--font-size-16); font-weight: 400; line-height: 1.875em;}

/* Taxmail 주요내용 */
.about-main {background: #FBFBFB; padding: var(--space-100) 0;}
.about-main .list {display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-16);}
.about-main .list li {display: flex; align-items: center; gap: var(--space-32); padding: var(--space-40) var(--space-32); box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04); background: #fff;}
.about-main .list .icon {flex-shrink: 0; width: 96px;}
.about-main .list .txt {font-size: var(--font-size-16); line-height: 1.875em;}

/* Taxmail 가입 방법 & 금액 */
.join-price .steps {display: flex; flex-direction: column; gap:4px; margin-bottom: var(--space-50); list-style: none; padding: 0; margin-left: 0;}
.join-price .steps li {display: flex; align-items: center; gap: var(--space-16); padding: var(--space-32); border: 1px solid #DDDDDD;}

.join-price .steps .txt {font-size: var(--font-size-16); font-weight: 400; line-height: 1.875em; letter-spacing: -0.03em; color: #484848; margin: 0;}

.join-price .price-tit {width: fit-content; padding: var(--space-16) var(--space-24); background: #FFFCF3; font-size: var(--font-size-18); font-weight: 600; color: var(--color-primary); line-height: 1.777em; margin-bottom: var(--space-24);}
.join-price .tbl-wrap {overflow-x: auto; margin-bottom: var(--space-24);}
.join-price .price-tbl {width: 100%; table-layout: fixed; border-collapse: collapse; border-top: 2px solid #686868;}
.join-price .price-tbl th,
.join-price .price-tbl td {width: 1%; padding: var(--space-20); border: 1px solid #DDDDDD; text-align: center; font-size: var(--font-size-16); font-weight: 400; line-height: 1.5em; color: #484848;}
.join-price .price-tbl th {font-weight: 600; color: var(--color-sub); background: #fafafa;}
.join-price .price-tbl th:first-child {border-left: none;}
.join-price .price-tbl th:last-child {border-right: none;}
.join-price .price-tbl td:first-child {border-left: none;}
.join-price .price-tbl td:last-child {border-right: none;}
.join-price .note {font-size: var(--font-size-16); line-height: 1.875em;}

/* 텍스메일 활용 */
.use-list .contain {display: flex; flex-direction: column; gap: 0;}
.use-list .item {display: flex; align-items: stretch; gap: var(--space-80); margin-bottom: var(--space-32);}
.use-list .item:last-child {margin-bottom: 0;}
.use-list .img {max-width: clamp(400px,calc(640 / var(--inner) * 100vw), 640px);}
.use-list .cell {flex: 1; display: flex; flex-direction: column; justify-content: center;}
.use-list .tit {display: flex; align-items: center; gap: var(--space-16); font-size: var(--font-size-24); font-weight: 600; line-height: 1.25em; letter-spacing: -0.03em; color: var(--color-sub); padding-bottom: var(--space-32); border-bottom: 1px solid #DDDDDD; margin-bottom: var(--space-40);}
.use-list .txt {font-size: var(--font-size-16); font-weight: 400; line-height: 1.875em; letter-spacing: -0.03em; color: #484848;}

/* 이용 및 문의 안내 */
.use-info .list {list-style: none; padding: 0; margin: 0;}
.use-info .list li {position: relative; padding: var(--space-10) var(--space-28); margin-bottom: var(--space-16); background: #FBFBFB;}
.use-info .list li:last-child {margin-bottom: 0;}
.use-info .list li p {position: relative; padding-left: 16px; font-size: 18px; font-weight: 400; line-height: 1.777em; color: #484848;}
.use-info .list li p::before {content: ""; position: absolute; top: 9px; left: 0; background: url(../images/sub/use-arrow.png) no-repeat center / contain; width: 8px; height: 12px;}
.use-info .list a {color: #484848; font-weight: 600;}

/* 회사소개 */
/* 비전 */
.vision-section .vision-wrap {display: flex; align-items: stretch; gap: var(--space-80);}
.vision-section .img {max-width: clamp(400px,calc(640 / var(--inner) * 100vw), 640px);}
.vision-section .cell {flex: 1; display: flex; flex-direction: column; justify-content: center;}
.vision-section .tit {font-size: var(--font-size-40); font-weight: 700; line-height: 1.4em; letter-spacing: -0.03em; color: var(--color-sub); margin-bottom: var(--space-60);}
.vision-section .highlight {color: var(--color-primary);}
.vision-section .cell .txt {font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; letter-spacing: -0.03em; color: #484848; margin-bottom: var(--space-20);}
.vision-section .cell .txt:last-child {margin-bottom: 0;}

/* 찾아오시는 길 */
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 450px !important;}
.root_daum_roughmap .wrap_controllers {display: none !important;}

.location-wrap {display: flex; align-items: stretch;}
.location-wrap .map {margin-bottom: 0; flex:1 1 50%;}
.lct-info {display: flex; flex-direction: column; justify-content: center; padding: 0 var(--space-60); flex:1 1 50%; max-height: 450px; border: 1px solid #DDDDDD;}
.lct-info .company-name {font-size: var(--font-size-24); font-weight: 600; color: var(--color-sub); padding-bottom: var(--space-30); border-bottom: 1px solid #DDDDDD; margin-bottom: var(--space-40); line-height: 1.58em;}
.lct-info .list dl {display: flex; align-items: flex-start; gap: var(--space-20); margin-bottom: var(--space-20);}
.lct-info .list dl:last-child {margin-bottom: 0;}
.lct-info .list .icon {flex-shrink: 0; width: 24px;}
.lct-info .list .icon img {vertical-align: middle;}
.lct-info .list .txt {flex: 1; font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; color: #484848;}

/* 연혁 */
.history-section .timeline {border-top: 2px solid var(--color-primary);}
.history-section .group {display: flex; gap: var(--space-160); padding: 38px 0; border-bottom: 1px solid #DDDDDD;}
.history-section .group:last-child {border-bottom: none;}
.history-section .year {width: 80px; font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; letter-spacing: -0.03em; color: var(--color-sub);}
.history-section .list li {display: flex; align-items: flex-start; gap: var(--space-16); margin-bottom: var(--space-16); font-size: var(--font-size-18); font-weight: 400; line-height: 1.777em; letter-spacing: -0.03em; color: #484848;}
.history-section .list li:last-child {margin-bottom: 0;}
.history-section .list .month {flex-shrink: 0; font-weight: 600; color: var(--color-primary);}
.history-section .list .txt span {display: block; margin-bottom: 4px;}
.history-section .list .txt span:last-child {margin-bottom: 0;}

/********************* 고객 홈페이지 *********************/
/* 고객 홈페이지 구축 서비스 개요 */
.overview-wrap {background: url(../images/sub/overview-bg.jpg) no-repeat center / cover; padding: var(--space-20); min-height: 360px;}
.overview-wrap p {font-size: var(--font-size-24); font-weight: 600; line-height: 1.583em; letter-spacing: -0.03em; color: #fff; text-align: center;}

/* 홈페이지 구축 내용 */
.overview-content.bg-grey {padding-bottom: var(--space-120);}
.overview-content .list {display: flex; flex-wrap: wrap; gap: 16px;}
.overview-content .list li {display: flex; gap: var(--space-32); flex: 0 1 calc(100% /2 - 16px);padding: var(--space-40) var(--space-28); background: #fff; box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.04)}

.overview-content .list .icon {flex-shrink: 0; width: 108px;}
.overview-content .list .tit {font-size: var(--font-size-20); font-weight: 600; line-height: 1.7em; letter-spacing: -0.03em; color: var(--color-sub); margin-bottom: var(--space-12);}
.overview-content .list .txt {flex: 1; font-size: var(--font-size-16); font-weight: 400; line-height: 1.875em; letter-spacing: -0.03em; color: #484848;}

/* 홈페이지 샘플보기 */
.sample-item { border: 1px solid #DDDDDD;}
.sample-btn-wrap {gap: 8px;}
.btn-sample { width: 86px; height: 43px; background: #FFFCF3; border: 1px solid var(--color-primary); color: var(--color-primary); font-size: var(--font-size-16); font-weight: 700; text-align: center;padding:0 10px; line-height: 41px;}
.btn-sample:hover {background: var(--color-primary); color: #fff;}
.btn-apply { width: 60px; height: 43px; background: var(--color-primary); border: 1px solid var(--color-primary); color: #fff; font-size: var(--font-size-16); font-weight: 700; text-align: center;padding:0 10px; line-height: 41px;}
.btn-apply:hover {background: #fff; color: var(--color-primary);}