@charset "utf-8";

/********************* about *********************/
/* 인사말 */
.greeting-content {display:flex; gap:var(--space-60); align-items:center;}
.greeting-image {flex:0 0 auto; width:clamp(420px, calc(560 / var(--inner) * 100vw), 560px); overflow:hidden;}
.greeting-image img {width:100%; height:auto; display:block; object-fit:cover;}
.greeting-text {display: flex; flex-direction: column; gap: var(--space-40);}
.greeting-text p {line-height: 1.2em;}
.greeting-text .greeting-title {color:#747474; font-size:var(--font-size-22); font-weight:700; line-height: 1.4em;}
.greeting-desc {display: flex; flex-direction: column; gap:var(--space-20);}
.greeting-desc .desc-box > p{color:#747474; font-size:var(--font-size-16);  line-height:1.5em;}
.greeting-desc .desc-tit {font-weight: 600; margin-bottom: var(--space-10);}
.about-info-wrap .info {font-size: var(--font-size-16); line-height: 1.5em;}
.about-info-wrap .info dl {display: flex; gap: 20px; margin-bottom: 14px;}
.about-info-wrap .info dl:last-child {margin-bottom: 0;}
.about-info-wrap .info dl dt {width: 66px; font-size: var(--font-size-18); font-weight: 600; flex-shrink: 0;}
.about-btns {gap: 10px;}
.about-btns > a{display: flex; align-items: center; justify-content: center; width: 141px; height: 40px; background: #747474; color: #fff; font-size: var(--font-size-16); font-weight: 600; line-height: 1em; border-radius: 30px; padding: 10px ;}
.about-btns > a:hover {background: #454545;}



/********************* process *********************/
.process-sec {margin-bottom: var(--space-100);}
.process-sec:last-child {margin-bottom: 0;}
.process-items {display:flex; flex-direction:column; gap:var(--space-60); align-items:center; width:100%;}
.process-row {display:flex; align-items:center; justify-content:flex-start; gap: 40px 0; flex-wrap: wrap; align-items:center; width:100%;}
.process-item {position:relative; display: flex; align-items:center; justify-content:center; width: clamp(140px, calc(200 / var(--inner) * 100vw), 198px); height: clamp(140px, calc(200 / var(--inner) * 100vw), 198px);  border: 1px solid var(--color-sub); border-radius: 100%;}
.process-content {display:flex; flex-direction:column; gap:4px; align-items:center;width: 100%; padding: 0 10px;}
.process-step {display:flex; font-size:var(--font-size-14); color:var(--color-sub); line-height:1.5em; text-align:center; white-space: nowrap;}
.process-icon {position:relative; width:clamp(46px, calc(56 / var(--inner) * 100vw),56px); height:clamp(546x, calc(656/ var(--inner) * 100vw), 56px); flex-shrink:0;}
.process-text {font-weight:500; font-size:var(--font-size-20); color:var(--color-hd); line-height:1.2em; text-align:center;}
.process-arrow { width: clamp(40px, calc(81 / var(--inner) * 100vw), 81px); height: clamp(10px, calc(19 / var(--inner) * 100vw), 19px); background: url(../images/sub/process-arrow.png) no-repeat center center / contain; }


/* section2 */
.process-sec.section2 {width:100%;}
.process-detail-list {display:flex; flex-direction:column; gap:var(--space-80); align-items:flex-start; width:100%; position: relative;}
.process-detail-list:before {content:''; position: absolute; left: calc(clamp(50px, calc(64 / var(--inner) * 100vw), 64px) / 2); top: 0; width: 1px; background: var(--color-sub);}
.process-detail-item:last-child {position: relative; background: #fff; overflow: hidden; }
.process-detail-list:before {height: calc(100% - clamp(25px, calc(32 / var(--inner) * 100vw), 32px));}

.process-detail-item {position:relative; display: flex; gap:var(--space-20); align-items:flex-start; width:100%;}
.process-detail-icon {position: relative; width:clamp(50px, calc(64 / var(--inner) * 100vw), 64px); height:clamp(50px, calc(64 / var(--inner) * 100vw), 64px); flex-shrink:0; display: flex; align-items: center; justify-content: center; border: 1px solid var(--color-sub); border-radius: 50%; background: #fff; z-index: 1;}
.process-detail-icon img {width:clamp(30px, calc(40 / var(--inner) * 100vw), 40px); height:clamp(30px, calc(40 / var(--inner) * 100vw), 40px); object-fit: contain;}

.process-detail-content {flex:1; display: flex; flex-direction: column; margin-top: 10px;}
.process-detail-title {font-size:var(--font-size-28); font-weight:500; color:#242424; line-height:1.5em;}
.process-detail-step {font-size:var(--font-size-14); color:#747474; line-height:1.5em; margin-bottom: 10px;}
.process-detail-desc {font-size:var(--font-size-16); color:#747474; font-weight: 500; line-height:1.25em;}

/********************* portfolio *********************/
.portfolio-list ul li a {position: relative;}
.portfolio-list ul li .thumb:after {background:rgba(0,0,0,0.80); opacity: 0; transition: opacity 0.3s ease-in-out;}
.portfolio-list ul li .thumb:hover:after {opacity: 1;}
.gallery-list.portfolio-list ul li .tit {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: var(--font-size-26); color:var(--color-primary); font-weight: 700; opacity: 0; transition: opacity 0.3s ease-in-out; z-index: 1;}
.portfolio-list ul li .thumb:hover .tit {opacity: 1;}
.portfolio-list ul li .thumb:hover img {transform: translateY(-50%) scale(1.05);}

/* 상세페이지 */
.view_wrap {gap: 40px;}
.view_wrap .img {width: clamp(300px, calc(680 / var(--inner) * 100vw), 680px); max-width: 680px;}
.view_wrap .img > div {position: relative; padding-bottom: 79%; overflow: hidden;}
.view_wrap .img > div img {position: absolute; top: 50%; left: 0; transition: .4s ease-in-out; transform: translateY(-50%); -ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%; height: auto !important; max-width: 100%; min-height: 100%; object-fit: cover;}
.view-tit {margin-bottom: var(--space-60);} 
.view-tit h3 {font-weight: 500; color: #454545; font-size: var(--font-size-24); line-height: 1.5em;}
.view-txt {padding-left: 10px;}
.view-txt dl {display: flex; gap: 40px; color: #454545; margin-bottom: 15px;}
.view-txt dl dt {position: relative; width: 70px; padding-left: 13px;  font-weight: 500;}
.view-txt dl dt:before {content: ''; position: absolute; top: 11px; left: 0; width: 3px; height: 3px; background: #454545; border-radius: 50%;}
.view-content-txt {width: 100%; margin: var(--space-120) 0; background: url(../images/sub/view-bg.png) no-repeat center center / cover; aspect-ratio: 48 / 5; font-size: var(--font-size-24); font-weight: 500; line-height: 1.5em; color: #242424; text-align: center; min-height: 120px;}
.view-img-list .img {width: 100%; position: relative;
margin-bottom: 40px; }

/********************* contact *********************/ 
.contact-section .contain {padding: var(--space-100) var(--space-container);}
.contact-section3 {padding-bottom: 0;}
/* section1 */
.contact-section1 .contain {display:flex; flex-direction:column; gap:var(--space-40); align-items:center; justify-content: center; width:100%; padding-top: 0;}
.contact-section1 .info {display:flex; gap:var(--space-60); align-items:stretch; justify-content: center; width:100%; padding: 0 var(--space-container) var(--space-40);}
.contact-section1 .info-item {display:flex; flex-direction:column;  align-items:center; justify-content: center; width:100%; height:100%;}
.contact-section1 .info-item .icon {width:clamp(30px, calc(34 / var(--inner) * 100vw), 34px); height:clamp(30px, calc(34 / var(--inner) * 100vw), 34px); flex-shrink:0; display: flex; align-items: center; justify-content: center; border-radius: 50%; margin-bottom: 6px;}
.contact-section1 .info-item .icon img {width:clamp(30px, calc(40 / var(--inner) * 100vw), 40px); height:clamp(30px, calc(40 / var(--inner) * 100vw), 40px); object-fit: contain;}
.contact-section1 .info-item span {font-size: var(--font-size-16); color:#747474; font-weight: 500; line-height:1.2em; text-align: center;}
.contact-section1 .info-item span.tit {font-size: var(--font-size-18); color:var(--color-hd); font-weight: 500; line-height:1.5em; margin-bottom: 2px;}

/* 지도*/
.map {width:100%;}
.lct {gap: clamp(40px, calc(175 / var(--inner) * 100vw), 175px);}
.root_daum_roughmap {width: 100% !important;}
.root_daum_roughmap .wrap_map {height: 540px !important;}

/* Status of Inquiry */
.contact-section2 {background: #f5f5f5;}
.contact-title {font-size: var(--font-size-24); font-weight: 700; line-height: 1.5em; color:var(--color-hd); margin-bottom: var(--space-40);}
.inquiry-form-tit {font-size: var(--font-size-18); font-weight: 500;  color:#000;}
.inquiry-form .input {height: 40px; border-radius: 5px;}
.inquiry-group {display:flex; flex-direction: column; gap:30px; margin-bottom: var(--space-60);}
.inquiry-group .box-wrap {display:flex; flex-wrap: wrap; gap: var(--space-20);}
.inquiry-group .item1 .box {width: 100%;}
.inquiry-group .item3 .box {width: calc(33.333% - 14px);}
.inquiry-group .box.flex {gap: var(--space-20);}
.inquiry-group .box dt {color: #000; font-size: var(--font-size-18); font-weight: 500; margin-bottom: 14px;}
.radio-wrap {display:flex; flex-wrap: wrap; gap:10px 40px;}
.inquiry-group .box .bar {display:inline-block; width:1px; height:20px; background:#ddd; margin:0 10px; vertical-align: middle;}
.ui-datepicker-trigger {display: none !important;}
.inquiry-group .input.datepicker2 {background: rgba(255, 255, 255, 0.5) url(/images/sub/calendar.png) right 10px center no-repeat;}
.inquiry-group .box.wide {width: 100%;}
.inquiry-group .tel-bar {display:inline-block; vertical-align: middle; width: 9px; height: 1px; background: #ddd; margin: 0 5px;}
.inquiry-form-view .inquiry-group .tel-bar {margin: 0 var(--space-20);}

.file-upload {display:flex; gap: var(--space-10); width: 100%; height:40px; margin-bottom:10px;}
.file-button {display:flex; justify-content:center; align-items:center; width: 74px; height:100%; padding:0 10px; border:0; border-radius: 5px;  background:#ddd; color:#454545; font-size: 15px; cursor:pointer; white-space: nowrap;}
.file-button:hover {background:#2c2c2c; color:#fff;}
.file-name {flex:1 1 auto; min-width:0; width:1%; display:flex; align-items:center; height:100%; padding:0 14px; border:1px solid #ddd; color: #999; border-radius: 5px;}
.captcha-wrap {height: 40px !important;}
.alert-box p {display: flex; align-items: center; font-size: var(--font-size-15); color:#999; line-height:1.5em; font-weight: 400; margin-bottom: 8px;}
.alert-box p:last-child {margin-bottom: 0;}
.alert-box p:before {content: ''; display: inline-block; width: 20px; height: 20px; background: url(../images/sub/alert.png) no-repeat center center / contain; margin-right: 4px;}
.alert-box p .highlight {color: #747474; font-weight: 600;}

/* 상세페이지 */
.inquiry-form-view .inquiry-form-tit {padding-bottom: 20px; border-bottom: 1px solid #ddd; color: var(--color-hd); font-size: var(--font-size-22); font-weight: 700; line-height: 1.5em;}
.inquiry-form-view .inquiry-group {display: flex; flex-direction: row; gap: var(--space-20) var(--space-80); flex-wrap: wrap; margin-top: var(--space-20); margin-bottom: var(--space-60);}
.inquiry-form-view .inquiry-group .box dl {display:flex; gap:var(--space-20);}
.inquiry-form-view .inquiry-group .box dl dt {margin-bottom: 0;}
.inquiry-form-view .inquiry-group .box dl dd {font-size: var(--font-size-18); color: #454545; margin-bottom: 0;}
.inquiry-view-wrap {margin-bottom: 60px;}
.inquiry-view-wrap:last-child {margin-bottom: 0;}


/* btn */
.inquiry-form .btn-pack {min-width: 113px; height: 40px; background: #747474; color: #fff; line-height: 38px; border-radius: 5px;}
.btn-pack.submit.xlarge {min-width: 160px; border-radius: 5px;}

/* 관리자 전용 섹션 */
.admin-only-section {position:relative; padding: var(--space-40); background: #f8f9fa; border: 2px solid #28AC9A; border-radius: 8px; margin-bottom: var(--space-40);}
.admin-only-badge {position:absolute; top:-12px; left:20px; display:inline-block; padding:4px 16px; background:#28AC9A; color:#fff; font-size:14px; font-weight:600; border-radius:4px;}
.admin-only-section .inquiry-form-tit {color:#28AC9A; font-weight:600;}
.admin-only-section .inquiry-group {margin-bottom: 0;}