@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:clamp(250px, calc( 550 / var(--inner) * 100vw ), 550px) !important;}
.root_daum_roughmap .wrap_map {height:clamp(250px, calc( 550 / var(--inner) * 100vw ), 550px) !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"경기도 화성시 동탄대로 636-1"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:15px; margin-top:10px; line-height:1.3;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height: 3px; background:var(--color-primary); border-radius: 50%;}
.bullet-item .bullet-list.none {padding-left: 0;}
.bullet-item .bullet-list.none::before {display: none;}
.bulletitem2 { padding-left: 0.6em; text-indent: -0.6em;}

.blocker {z-index: 100;}
.modal {max-width:980px; width: 100%;}

.bg-gray {background:#fafafa;}
.overhidden {overflow: hidden;}
.subsec-pd {padding: clamp(50px, calc( 150 / var(--inner) * 100vw ), 150px) 0;}

.radiobx {display: flex; flex-wrap: wrap;}
.radiobx .item {display: flex;align-items: center; min-height: clamp(38px, calc( 44 / var(--inner) * 100vw ), 44px);gap:8px;}
.radiobx .item:not(:last-child) {margin-right: clamp(15px, calc( 40 / var(--inner) * 100vw ), 40px);}
.radiobx .item .etcinput {height: clamp(30px, calc( 36 / var(--inner) * 100vw ), 36px);max-width:clamp(100px, calc( 140 / var(--inner) * 100vw ), 140px);}

.section-cont {display: flex;flex-direction: column;gap: var(--padding-120);}
.subsec-titbx {margin-bottom: var(--padding-50);}
.subsec-titbx .subsec-cate {display: inline-block; padding-bottom: 15px;  color: var(--color-primary); line-height: 1.2; font-weight: 600;}
.subsec-titbx .subsec-tit {font-size:var(--font-size-40); font-weight: bold;}
.subsec-titbx .subsec-dec {margin-top:20px; font-size: var(--font-size-18); color: var(--color-body); }

.greet_1 .flxWrap {align-items: center; gap: var(--padding-100);}
.greet_1 .imgbx {width:clamp(300px, calc( 550 / var(--inner) * 100vw ), 550px);}
.greet_1 .textbx {display: flex;flex-direction: column;gap:var(--padding-55); flex: 1; letter-spacing: -0.5px;}
.greet_1 .title {font-size:var(--font-size-40); font-weight: bold; line-height: 1.35;}
.greet_1 .decbx {display: flex;flex-direction: column;gap:var(--padding-30);}
.greet_1 .dec {font-size: var(--font-size-18); color: var(--color-body); line-height: 1.66;}

.greet_2 .visions { padding:var(--padding-20); border:1px solid #ddd; border-radius:clamp(48px, calc(160 / var(--inner) * 100vw), 160px); background:var(--color-white);}
.greet_2 .visions .wrap { display:flex; align-items:stretch; width:100%; flex-wrap: wrap;}
.greet_2 .visions .cell { flex:1 1 50%; min-width:0; display:flex; align-items:center; justify-content:center; min-height:clamp(160px, calc(210 / var(--inner) * 100vw), 210px); padding: 30px 15px; margin-right:clamp(-40px, calc(-59 / var(--inner) * 100vw), -59px); border-radius:clamp(48px, calc(160 / var(--inner) * 100vw), 160px); text-align:center; }
.greet_2 .visions .cell:last-child { margin-right:0; }
.greet_2 .visions .cell.pale { background:#f9f1f2; }
.greet_2 .visions .cell.deep { background:#af4a4c; }
.greet_2 .visions .cell .txt { font-size:var(--font-size-22); font-weight:600; line-height:1.45; letter-spacing:-0.03em; }
.greet_2 .visions .cell.pale .txt {color:var(--color-primary); }
.greet_2 .visions .cell.deep .txt {color:var(--color-white); }

.greet_3 .itembox .list { display:flex; flex-wrap:wrap; gap:var(--padding-30); }
.greet_3 .itembox .item { flex:1 1 280px; display:flex; flex-direction:column; align-items:center; gap:var(--padding-30);padding:var(--padding-80) clamp(24px, calc(50 / var(--inner) * 100vw), 50px); border:1px solid #ddd; background:var(--color-white); }
.greet_3 .itembox .img { position:relative; width:clamp(35px, calc(50 / var(--inner) * 100vw), 50px); height:clamp(35px, calc(50 / var(--inner) * 100vw), 50px); overflow:hidden; flex-shrink:0; }
.greet_3 .itembox .img img { display:block; width:100%; height:100%; object-fit:contain; }
.greet_3 .itembox .cont { display:flex; flex-direction:column; align-items:center; gap:var(--padding-30); width:100%; text-align:center; }
.greet_3 .itembox .num { font-size:var(--font-size-18); font-weight:350; line-height:1; letter-spacing:-0.03em; color:#878787; }
.greet_3 .itembox .txt { font-size:var(--font-size-22); line-height:1.45; letter-spacing:-0.03em; color:var(--color-dark); }

.greet_4 .bg-inner {padding: var(--padding-120) 0; background:url('/images/sub/greet_4-bg.jpg') no-repeat center center  / cover; }
.greet_4 .textbx {display: flex;flex-direction: column;gap: var(--padding-15);}
.greet_4 .textbx .txt {font-size:var(--font-size-22); line-height: 1.54; color: var(--color-body);}

.qualgrid .list { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:clamp(24px, calc(50 / var(--inner) * 100vw), 50px); }
.qualgrid .item { display:flex; flex-direction:column; align-items:flex-start; padding:clamp(24px, calc(50 / var(--inner) * 100vw), 50px); background:var(--color-white); box-shadow:6px 6px 30px rgba(0,0,0,0.1); }
.qualgrid .num { font-size:var(--font-size-64); font-weight:700; line-height:1; letter-spacing:-0.03em; color:#f5e8e9; }
.qualgrid .cont { display:flex; flex-direction:column; gap:var(--padding-40); width:100%; margin-top: clamp(-15px, calc(-15 / var(--inner) * 100vw), -5px);}
.qualgrid .tit { font-size:var(--font-size-28); font-weight:600; line-height:1; color:var(--color-dark); }
.qualgrid .dec { font-size: var(--font-size-18); line-height:1.67; color:var(--color-body); }

.location-area .loctxt { display:flex; flex-direction:column; align-items:center; gap:clamp(40px, calc(60 / var(--inner) * 100vw), 60px); width:100%; padding-top:var(--padding-80) ; }
.location-area .loctxt .addrline { display:flex; align-items:center; justify-content:center; gap:var(--padding-12); }

.location-area .loctxt .addrline .icn img { display:block; width:clamp(16px, calc(24 / var(--inner) * 100vw), 24px); aspect-ratio:1; object-fit:contain; }
.location-area .loctxt .addrline .addr { font-size:var(--font-size-22); font-weight:600; line-height:1.36; letter-spacing:-0.03em; color:#222; }
.location-area .loctxt .infogrid { display:grid; grid-template-columns:minmax(0, 1.35fr) repeat(3, minmax(0, 1fr)); width:100%; }
.location-area .loctxt .infogrid .col { position:relative; display:flex; flex-direction:column; justify-content: center; gap:var(--padding-10); padding: 0 var(--padding-40);}
.location-area .loctxt .infogrid .col.wide { padding-left:0; }
.location-area .loctxt .infogrid .col:not(:first-child)::before { content:''; position:absolute; left:0; top:50%; transform:translateY(-50%); width:1px; height:clamp(50px, calc(100 / var(--inner) * 100vw), 100px); background:#ddd; }
.location-area .loctxt .infogrid .wide .tit { font-size:var(--font-size-18); font-weight:600; line-height:1.5; letter-spacing:-0.03em; color:#222; }
.location-area .loctxt .infogrid .wide .dec { font-size:var(--font-size-18); line-height:1.5; letter-spacing:-0.03em; color:var(--color-body); }
.location-area .loctxt .infogrid .lbl { font-size:var(--font-size-18); font-weight:600; line-height:1.5; letter-spacing:-0.03em; color:#222; }
.location-area .loctxt .infogrid .val { font-size:var(--font-size-18); line-height:1.5; letter-spacing:-0.03em; color:var(--color-body); }
.location-area .loctxt .infogrid .val a { color:inherit; text-decoration:none; }

.process_1 .flowbx { display:flex; flex-direction:column; gap:var(--padding-100); width:100%; }
.process_1 .flowbx .fline { position:relative; width:100%; overflow-x: auto;}
.process_1 .flowbx .fline .list { position:relative; z-index:1; display:flex; flex-wrap:nowrap; justify-content:space-between; align-items:flex-start; width:100%; }
.process_1 .flowbx .fline.top .list::before { content:''; position:absolute; left:0; right:0; top:6px; height:1px; background:#ddd; z-index:0; pointer-events:none; }
.process_1 .flowbx .fline.btm .rowbx::before { content:''; position:absolute; left:0; right:0; top:6px; height:1px; background:#ddd; z-index:0; pointer-events:none; }
.process_1 .flowbx .fline .item { display:flex; flex-direction:column; align-items:center; gap:var(--padding-20); flex:1 1 0; min-width:0; text-align:center; }
.process_1 .flowbx .fline .mark { display:block; width:12px; aspect-ratio:1; flex-shrink:0; border:2px solid var(--color-primary); border-radius:50%; background:var(--color-white); position:relative; z-index:1; }
.process_1 .flowbx .fline .desc { display:flex; flex-direction:column; align-items:center; gap:10px; width:100%; }
.process_1 .flowbx .fline .num { font-size:var(--font-size-18); font-weight:700; line-height:1.5; letter-spacing:-0.03em; color:#878787; }
.process_1 .flowbx .fline .tit { font-size:var(--font-size-24); font-weight:600; line-height:1.2; letter-spacing:-0.03em; color:#222; }
.process_1 .flowbx .fline.btm .rowbx { position:relative; display:flex; flex-wrap:nowrap; align-items:flex-start; justify-content:space-between; width:100%; gap:var(--padding-20); }
.process_1 .flowbx .fline.btm .list { flex:1 1 auto; min-width:0; justify-content:flex-start; gap:0; }
.process_1 .flowbx .fline.btm .list .item { flex:1 1 0; }
.process_1 .flowbx .fline.btm .cta { display:flex; align-items:center; justify-content:center; margin-top: 7px; width:clamp(200px, calc(288 / var(--inner) * 100vw), 288px); min-height:clamp(70px, calc(80 / var(--inner) * 100vw), 80px); padding:var(--padding-20) var(--padding-24); background:var(--color-primary); }
.process_1 .flowbx .fline.btm .cta .txt { font-size:var(--font-size-20); font-weight:600; line-height:1.2; letter-spacing:-0.03em; color:var(--color-white); text-align:center; }

.process_2 .gridbx { border-top:1px solid #222; border-bottom: 1px solid #ddd; display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); width:100%; }
.process_2 .gridbx .cell { border-right:1px solid #ddd; border-bottom:1px solid #ddd; min-width:0; }
.process_2 .gridbx .cell:nth-child(3n) { border-right:none; }
.process_2 .gridbx .cell:nth-child(n+7) { border-bottom:none; }
.process_2 .gridbx .cell .box { display:flex; flex-direction:column; align-items:flex-end; gap:var(--padding-40); width:100%; padding:var(--padding-30); }
.process_2 .gridbx .cell .txtbx { display:flex; flex-direction:column; align-items:flex-start; gap:var(--padding-30); width:100%; }
.process_2 .gridbx .cell .chip { display:inline-flex; align-items:center; justify-content:center; padding:5px var(--padding-16); border:1px solid var(--color-primary); border-radius:clamp(16px, calc(24 / var(--inner) * 100vw), 24px); background:#eededc; font-size:var(--font-size-16); font-weight:600; line-height:1.5; letter-spacing:-0.03em; color:var(--color-primary); }
.process_2 .gridbx .cell .titbx { display:flex; flex-direction:column; align-items:flex-start; gap:var(--padding-30); width:100%; }
.process_2 .gridbx .cell .tit { font-size:var(--font-size-24); font-weight:600; line-height:1.5; letter-spacing:-0.03em;}
.process_2 .gridbx .cell .dec { font-size:var(--font-size-18); line-height:1.5; letter-spacing:-0.03em; color:var(--color-body); }
.process_2 .gridbx .cell .img img { display:block; width:clamp(35px, calc(64 / var(--inner) * 100vw), 64px); aspect-ratio:1; object-fit:contain; }

.consult-bg {padding: var(--padding-150) 16px; background: url(../images/sub/consult-bg.jpg) no-repeat center center / cover;  text-align: center;}
.consult-bg .text {font-size: var(--font-size-28); font-weight: 400; line-height: 1.5; letter-spacing: -0.6px; color: #fff;}
.consult-bg .warnning {display: flex;align-items: center; justify-content: center; gap: 6px; margin-top: var(--padding-40); color: #fff;}


.consult-notice { padding: var(--padding-30); margin: var(--padding-100) 0;border: 1px solid #DDD; background: rgba(255, 255, 255, 0.80);}
.consult-notice .icn {margin-top: clamp(1px, calc(4 / var(--inner) * 100vw), 4px);}
.consult-notice .icn svg {width:clamp(14px, calc(18 / var(--inner) * 100vw), 18px);}
.consult-notice .text {flex: 1; display: flex;flex-direction: column;gap:var(--padding-18);}
.consult-notice .top {font-size: var(--font-size-20); font-weight: 600;}
.consult-notice .btm {font-size: var(--font-size-18); line-height: 1.66; letter-spacing:-0.03em; color:var(--color-body);}
.consult-notice .notice-list {display: flex;flex-direction: column;gap: var(--padding-20);}
.consult-notice .notice-list .item {display: flex; gap: var(--padding-20);}

.formtitbx {margin-bottom: var(--padding-30); padding-bottom: var(--padding-30); border-bottom: 1px solid #ddd;}
.formtitbx .form-tit {padding-left: clamp(15px, calc(20 / var(--inner) * 100vw), 20px); position: relative; font-size: var(--font-size-28); font-weight: bold; letter-spacing:-0.03em; }
.formtitbx .form-tit:after {position: absolute; content: ''; left: 0; top: clamp(9px, calc(11 / var(--inner) * 100vw), 11px); width: var(--padding-10); height: var(--padding-10); background: var(--color-primary);}
.form-grid {display: flex;flex-direction: column;gap: var(--padding-50);}
.form-grid .row {display: flex;flex-wrap: wrap;gap: var(--padding-60);}
.form-grid .cell {display: flex;flex-direction: column;gap:var(--padding-15); width: calc((100% - 2 * var(--padding-60)) / 3);}
.form-grid .cell.wid-50 {width: calc((100% - 1 * var(--padding-60)) / 2);}
.form-grid .cell.wid-100 {width: 100%;}
.form-grid .cell.wid-auto {flex: 1 0 auto; width: 1%;}
.form-grid .cell .name {font-size: var(--font-size-18); line-height: 1.66; letter-spacing: -0.5px;}
.form-grid .cell .small {display: block; margin-top: 5px; color: #999; font-size: var(--font-size-16);}
.form-grid .input {height: clamp(44px, calc(60 / var(--inner) * 100vw), 60px); }
.form-grid .input::placeholder { color:#999; letter-spacing: -0.5px;}
.form-grid .inputbx {position: relative;}
.form-grid .ui-datepicker-trigger {position: absolute; right: 0; top: 0; width: clamp(44px, calc(60 / var(--inner) * 100vw), 60px); height: clamp(44px, calc(60 / var(--inner) * 100vw), 60px); border: 0;}
.form-grid .checkwrap {padding: var(--padding-30); border: 1px solid #DDD; background: rgba(255, 255, 255, 0.80);}
.form-grid .radiobx {display: grid;grid-template-columns: repeat(3,1fr); gap: var(--padding-30);}
.form-grid .radiobx .item {min-height: auto;}
.consult-form .form-agree {margin:var(--padding-60) 0;}
.consult-form .form-agree .check + .check {margin-top: 12px;}
.form-grid .checkwrap2 {padding: var(--padding-30);border: 1px solid #DDD; background: rgba(255, 255, 255, 0.80);}
.form-grid .checkwrap2 .radiobx {display: flex; gap: 15px 0;}
.form-grid .checkwrap2 .radiobx .item:not(:last-child) {margin-right: var(--padding-30) !important;}
.form-grid .inrow {display: flex;flex-wrap: wrap; gap: var(--padding-60);}
.form-grid .inrow .inputbx {width: calc((100% - 1 * var(--padding-60)) / 2);}
.form-grid .incellflx {display: flex; flex-direction: column; gap: var(--padding-30);}
.form-grid .grid-notice {display: flex; flex-wrap: wrap; gap: var(--padding-30);}
.form-grid .grid-notice .item {display: flex; align-items: center; gap: 8px; padding: 10px; border-radius: 32px; background: #ededed;}
.form-grid .grid-notice .icn {flex-shrink: 0; width: clamp(14px, calc(18 / var(--inner) * 100vw), 18px); height: clamp(14px, calc(18 / var(--inner) * 100vw), 18px);}
.form-grid .grid-notice .icn img {display: block; width: 100%; height: 100%; object-fit: contain;}
.form-grid .grid-notice .txt {font-size: var(--font-size-16); line-height: 1; letter-spacing: -0.48px; color: #454545;}
.form-grid .textwrap {padding: var(--padding-20); border: 1px solid #DDD; background: rgba(255, 255, 255, 0.80);}
.form-grid .textwrap .input {width: 100%; height: clamp(150px, calc(250 / var(--inner) * 100vw), 250px); padding: 0; border: 0; background: transparent; resize: vertical; line-height: 1.875; letter-spacing: -0.48px;}
.form-grid .textwrap .input::placeholder {line-height: 1.875; color: #999;}
.form-grid .checkradiowrap {width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd;}
.form-grid .concept-grid {width: 100%;}
.form-grid .concept-row {display: flex; width: 100%; flex-wrap: wrap;}
.form-grid .concept-item {flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.form-grid .concept-head {display: flex; align-items: center; min-height: clamp(44px, calc(60 / var(--inner) * 100vw), 60px); padding: 16px 20px;  background: rgba(255, 255, 255, 0.80);}
.form-grid .concept-head:has(input:checked) {background: rgba(153, 23, 26, 0.05); border: 1px solid var(--color-primary); position: relative; z-index: 1;}
.form-grid .concept-head .checkbox label {font-size: var(--font-size-18); letter-spacing: -0.54px; color: #454545;}
.form-grid .concept-body {padding: var(--padding-30); background: rgba(255, 255, 255, 0.80); flex: 1; border-top: 1px solid #ddd;}
.form-grid .concept-body .desc {margin-bottom: 25px; font-size: var(--font-size-16); line-height: 1.5; letter-spacing: -0.48px; color: #454545;}
.form-grid .concept-detail {display: flex; gap: var(--padding-50); align-items: flex-start;}
.form-grid .concept-detail .lbl {flex-shrink: 0; width: 61px; font-size: var(--font-size-16); font-weight: 600; letter-spacing: -0.48px; color: #454545;}
.form-grid .concept-list {display: flex; flex-wrap: wrap; gap: 18px 20px; flex: 1; list-style: none; padding: 0; margin: 0;}
.form-grid .concept-list li {position: relative; padding-left: 13px; font-size: var(--font-size-16); line-height: 1; color: #454545;}
.form-grid .concept-list li::before {content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 5px; height: 5px; border-radius: 50%; background: #d9d9d9;}
.form-grid .concept-body--empty {padding: 0; min-height: 1px;}
.form-grid .budget-single .circle-check {display: inline-flex; align-items: center; position: relative;}
.form-grid .budget-single .circle-check input {position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;}
.form-grid .budget-single .circle-check label {display: inline-flex; align-items: center; gap: 8px; position: relative; font-size: var(--font-size-18); letter-spacing: -0.54px; color: #454545; cursor: pointer; line-height: normal;}
.form-grid .budget-single .circle-check label:before {content: ''; flex-shrink: 0; width: 20px; height: 20px; border: 1px solid #ddd; border-radius: 50%; background: #fff; box-sizing: border-box;}
.form-grid .budget-single .circle-check label:after {content: none;}
.form-grid .budget-single .circle-check input:checked + label:before {border-color: var(--color-primary); background: #fff;}
.form-grid .budget-single .circle-check input:checked + label:after {content: ''; position: absolute; left: 5px; top: 50%; width: 10px; height: 10px; margin-top: -5px; border-radius: 50%; background: var(--color-primary);}