/*************************************************************************************************************

				NOVASPACE-DESIGN- USER CSS Ver 0.16

				- Last Update : 2026. 07. 14
				- Author : KERRY

**************************************************************************************************************/

/*---------------------------------------------------------------
	IMPORT FONTS
---------------------------------------------------------------*/
@import url(font-awesome.min.6.5.2.css);
@import url(pretendardvariable.css);
/*@import url(TmoneyRoundWind.css);*/
/*@import url(JalnanGothic.css);*/
/*@import url(nanumsquareround.css);*/
		
/*--------------------------------------------------------------
	RESET
--------------------------------------------------------------*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}

ol, ul {
	margin: 0px;
	padding: 0px;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

textarea {
	resize:none;
}

		
/*--------------------------------------------------------------
	VARIABLES
--------------------------------------------------------------*/
:root {
  --accent-color:						#717171;
  --white-color:						#fff;
  --black-color:						#000;
  --gray-color:							#F3F3F3;
  --gray-color-300:					#D8D8D8;
  --gray-color-500:					#AEAEAE;
  --gray-color-800:					#3A3A3A;
  --light-gray-color:				#D7DDDF;
  --primary-color:					#C77747;
  --bs-primary-rgb:					114,174,200;
  --light-color:						#F8F9FA;
  --dark-color:							#212529;
  --light-blue-color:				#EDF1F3;
  --navbar-color-color:			#131814;
  --swiper-theme-color:			#4A4A4A;
  --swiper-pagination-color:#4A4A4A;
	--brand-dark:							#1A1A1A;
	--brand-accent:						#C5A880;
	--brand-bg:								#F5F2EC;
	--brand-muted:						#7A7A7A;
	--brand-dark2:						#0F172A;
	--brand-card:							#1E293B;
	--brand-accent2:					#D97706;
	--brand-accent-hover:			#B45309;
	--brand-selected-bg:			#FFFBEB;
	--brand-selected-border:	#D97706;
	--blue-color-300:					#B8D9F1;
	--blue-color-500:					#3191D7;
	
  /* Fonts 추가 변수 정의 */
  --body-font:		'Pretendard Variable';
  --heading-font: 'TmoneyRoundWindB';
  --nsr-font:			'NanumSquareRound';
  --ptd-font:			'Pretendard Variable';
  --jng-font:			'JalnanGothic';
  --aws6-font:		'Font Awesome 6 Pro';
}

/* 모바일 전용 헤더 높이 변수 정의 */
@media screen and (max-width: 600px) {
    :root {
       --header-height : 100px;
       --header-height-min   : 80px;
    }
}


/*--------------------------------------------------------------
	GENERAL TYPOGRAPHY
--------------------------------------------------------------*/
*, *::before, *::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

::-moz-selection { color: #FFFFFF; background: var(--primary-color)}
::selection { color: #FFFFFF; background: var(--primary-color)}

html {
  box-sizing: border-box;
}

body {
  font-family: var(--body-font) !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.6;
  margin: 0;
  -webkit-text-size-adjust: none;
  -webkit-touch-callout: none;
  /*user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -webkit-user-select: none;*/
}

p {
  font-size: 1.2em;
  color: var(--gray-color-500);
}

ul.inner-list li {
   font-size: 1.2em;
}

a {
  color: var(--dark-color);
  text-decoration: none;
  transition: 0.3s color ease-out;
}

a.light {
  color: var(--light-color);
}

a:hover {
  text-decoration: none;
  color: var(--primary-color);
}

/* Scrollbar Custom */
body::-webkit-scrollbar {
	width: 6px;
}
body::-webkit-scrollbar-track {
	background-color: transparent;
}
body::-webkit-scrollbar-thumb {
	border-radius: 3px;
	background-color: #444;
}
body::-webkit-scrollbar-button {
	width: 0;
	height: 0;
}

/* Background Color */
.bg-gray { background: var(--gray-color); }
.bg-dark { background: var(--dark-color); }
.bg-light { background: var(--light-color); }
.bg-light-blue { background: var(--light-blue-color); }
.bg-blue300 { background: var(--blue-color-300); }

/* Section Padding */
.padding-xsmall { padding-top: 0.5em; padding-bottom: 0.5em; }
.padding-small { padding-top: 2em; padding-bottom: 2em; }
.padding-medium { padding-top: 4em; padding-bottom: 4em; }
.padding-large { padding-top: 7em; padding-bottom: 7em; }
.padding-xlarge { padding-top: 9.5em; padding-bottom: 9.5em; }

/* Utility Padding / Margin */
.no-padding-top { padding-top: 0 !important; }
.no-padding-right { padding-right: 0 !important; }
.no-padding-bottom { padding-bottom: 0 !important; }
.no-padding-left { padding-left: 0 !important; }
.no-padding-tb { padding-top: 0 !important; padding-bottom: 0 !important; }
.no-padding-lr { padding-left: 0 !important; padding-right: 0 !important; }
.no-gutter { padding: 0 !important; }
.no-padding { padding: 0 !important; }
.no-margin { margin: 0 !important; }

/* Section margin */
.margin-small { margin-top: 3em; margin-bottom: 3em; }
.margin-medium { margin-top: 5em; margin-bottom: 5em; }
.margin-large { margin-top: 7em; margin-bottom: 7em; }
.margin-xlarge { margin-top: 9em; margin-bottom: 9em; }

@media only screen and (max-width: 768px) {
  .margin-small, .margin-medium, .margin-large {
    margin-top: 1em;
    margin-bottom: 1em;
  }
}

/* Align */
.tac { text-align: center !important }
.tal { text-align: left !important }
.tar { text-align: right !important }

/* Helper Classes */
.gray500 { color:var(--gray-color-500) }
.m-auto { margin:auto !important }
.pointer { cursor:pointer }

/* Font Style */
.b { font-weight: bold !important }

/* Font Size */
.fs11px { font-size: 11px !important }
.fs12px { font-size: 12px !important }
.fs13px { font-size: 13px !important }
.fs14px { font-size: 14px !important }
.fs15px { font-size: 15px !important }
.fs16px { font-size: 16px !important }

.fs1em { font-size: 1em !important }
.fs0dot95em { font-size: 0.95em !important }
.fs0dot9em { font-size: 0.9em !important }
.fs0dot85em { font-size: 0.85em !important }
.fs0dot8em { font-size: 0.8em !important }

/* Font Color */
.darkblue { color: #1A64AE !important}

/* Letter Spacing */
.ls1px { letter-spacing: 1px !important }
.ls2px { letter-spacing: 2px !important }
.ls3px { letter-spacing: 3px !important }
.ls-1px { letter-spacing: -1px !important }
.ls-2px { letter-spacing: -2px !important }

/* Width */
.w40px { width: 40px !important}
.w45px { width: 45px !important}
.w50px { width: 50px !important}
.w60px { width: 60px !important}
.w65px { width: 65px !important}
.w70px { width: 70px !important}
.w75px { width: 75px !important}
.w80px { width: 80px !important}
.w85px { width: 85px !important}
.w90px { width: 90px !important}
.w95px { width: 95px !important}
.w100px { width: 100px !important}
.w110px { width: 110px !important}
.w120px { width: 120px !important}


/* Padding */
.pd-y-5rem {
	padding-top: 5rem !important;
	padding-bottom: 5rem !important;
}

.pd-y-6rem {
	padding-top: 6rem !important;
	padding-bottom: 6rem !important;
}

.pdl-10px {
	padding-left: 10px;
}


/*--------------------------------------------------------------
	HEADER & NAVIGATION
--------------------------------------------------------------*/
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* 배너보다 위로 레이어 상향 */
  background: #ffffff; /* 모바일 배경 비침 방지 */
  transition: background 0.3s ease-out;
  box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}

.navbar-toggler svg.navbar-icon { 
  width: 36px; 
  height: 36px; 
  margin-right: 0; 
}

.navbar-nav .nav-item a.nav-link {
  font-family: var(--ptd-font);
	color: var(--accent-color);
	font-weight: 600;
	font-size: 18px;
	padding: 5px 20px;
}

.navbar-nav .nav-item a.nav-link.active, 
.navbar-nav .nav-item a.nav-link:focus, 
.navbar-nav .nav-item a.nav-link:hover {
  color: var(--primary-color);
}

.navbar-nav .nav-item .menu_on {
	background: var(--primary-color);
	border-radius : 25px;
	color: #fff;
}

.navbar-nav .nav-item a.menu_on,
.navbar-nav .nav-item a.menu_on:hover,
.navbar-nav .nav-item a.menu_on:active {
	color:#fff;
}

#header-nav { max-width: 1300px; margin: 0 auto; }
#header-nav .logo { width: 280px; }
#header-nav .navbar-toggler:focus { box-shadow: none; }

/* Offcanvas (Mobile Menu) */
#header-nav .offcanvas.show { z-index: 9999; background-color: var(--light-blue-color); }
#header-nav .offcanvas-end { width: 500px; }
.offcanvas.show .nav-item a.nav-link { font-size: 1.2em; }

/* Offcanvas Menu Icons (FontAwesome) */
.offcanvas.show .nav-item a.nav-link:before {
	font-family: var(--aws6-font);
	font-weight: bold;
	margin-right: 10px;
}
.offcanvas.show .nav-item:first-child a.nav-link:before { content: '\f1ad'; margin-left: 1px; font-size: 1.2em; }
.offcanvas.show .nav-item:nth-child(2) a.nav-link:before { content: '\e443'; }
.offcanvas.show .nav-item:nth-child(3) a.nav-link:before { content: '\e5df'; }
.offcanvas.show .nav-item:nth-child(4) a.nav-link:before { content: '\f733'; margin-left: 1px; font-size: 1em; }
.offcanvas.show .nav-item:nth-child(5) a.nav-link:before { content: '\e4e3'; margin-left: 1px; font-size: 1.2em; }
.offcanvas.show .nav-item:nth-child(6) a.nav-link:before { content: '\f865'; }
.offcanvas.show .nav-item:nth-child(7) a.nav-link:before { content: '\f0a1'; }

.offcanvas.show .offcanvas-body .navbar-nav { align-items: unset!important; padding: 0 !important; }

.offcanvas.show .offcanvas-header {
	height: 95px;
	background: #fff;
	box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
	-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}
.offcanvas.show .offcanvas-header .logo { margin-bottom: 15px; }
.offcanvas-body { padding: 5px 0 0 0 !important; }
.offcanvas.show .offcanvas-body .nav-item { border-bottom: dashed 1px #ccc !important; padding: 5px 20px 5px 20px; }
.offcanvas-header .btn-close { margin-top: -20px !important; }


/* QUICK ICON */
.header-quick-icons {
	display: flex;
	align-items: center;
	gap: 10px;
}
.header-quick-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
}
.header-quick-btn:hover {
	transform: translateY(-2px);
}

.header-quick-btn.btn-tel {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: #1e293b;
	color: #ffffff;
	box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}
.header-quick-btn.btn-tel:hover {
	background: #0f172a;
	color: #ffffff;
	box-shadow: 0 6px 14px rgba(0, 0, 0, 0.22);
}
.header-quick-btn.btn-tel i {
	font-size: 14px;
}

.header-quick-btn.btn-blog,
.header-quick-btn.btn-kakao {
	width: 36px;
	height: 36px;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
}
.header-quick-btn.btn-blog img,
.header-quick-btn.btn-kakao img {
	width: 36px;
	height: 36px;
	object-fit: contain;
	display: block;
	filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.14));
	transition: filter 0.25s ease;
}
.header-quick-btn.btn-blog:hover img,
.header-quick-btn.btn-kakao:hover img {
	filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.22));
}

@media (max-width: 991.98px) {
	.header-quick-icons {
		margin-top: 24px;
		padding-top: 20px;
		justify-content: center;
		gap: 16px;
	}
	.header-quick-btn.btn-tel,
	.header-quick-btn.btn-blog,
	.header-quick-btn.btn-kakao {
		width: 40px;
		height: 40px;
	}
	.header-quick-btn.btn-tel i {
		font-size: 16px;
	}
	.header-quick-btn.btn-blog img,
	.header-quick-btn.btn-kakao img {
		width: 40px;
		height: 40px;
	}
}


/*--------------------------------------------------------------
	MAIN SECTION
--------------------------------------------------------------*/
/* MAIN BANNER */
#mainBanner {
  margin-top: 80px; /* 배너 전체 상단 마진 부여 */
}
#mainBanner .item { 
  height: 80vh; 
  position: relative; 
  top: 0; /* 강제 top 밀림 제거 */
}

#mainBanner .item img { width: 100%; height: 100%; object-fit: cover; }
#mainBanner .item .cover {
	padding: 75px 0;
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
}
#mainBanner .item .cover .header-content { position: relative; padding: 40px 56px; top: -40px; overflow: hidden; }
#mainBanner .item .cover .header-content .line {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 0;
	position: absolute;
	border: 9px solid #fff;
	-webkit-clip-path: polygon(0 0, 50% 0, 30% 100%, 0 100%);
	clip-path: polygon(0 0, 50% 0, 30% 100%, 0 100%);
}

#mainBanner .item .cover .header-content h1,
#mainBanner .item .cover .header-content h2,
#mainBanner .item .cover .header-content h4 {
  color: #fff;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
#mainBanner .item .cover .header-content h2 { font-weight: 800; font-size: 30px; }
#mainBanner .item .cover .header-content h1 {
	font-size: 50px;
	font-weight: 600;
	margin: 5px 0 20px;
	word-spacing: 3px;
	line-height: 50px;
	letter-spacing:-0.04em;
}
#mainBanner .item .cover .header-content h4 { font-size: 18px; font-weight: 400; line-height: 28px; }

/* Owl Carousel Animations */
#mainBanner .owl-item.active h1,
#mainBanner .owl-item.active h2,
#mainBanner .owl-item.active h4,
#mainBanner .owl-item.active .line {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  animation-delay: 0.3s;
}
#mainBanner .owl-item.active h1, #mainBanner .owl-item.active h2 { animation-name: fadeInDown; }
#mainBanner .owl-item.active h4 { animation-name: fadeInUp; }
#mainBanner .owl-item.active .line { animation-name: fadeInLeft; }

/* Carousel Navigation Controls */
#mainBanner .owl-nav .owl-prev, #mainBanner .owl-nav .owl-next {
  position: absolute;
  top: 50%;
  opacity: 0;
  -webkit-transition: all 0.4s ease-out;
  transition: all 0.4s ease-out;
  background: rgba(0, 0, 0, 0.5) !important;
  width: 40px;
  height: 40px;
  display: block;
  z-index: 1000;
  border-radius: 0;
  cursor: pointer;
}
#mainBanner .owl-nav .owl-prev { left: 15px; }
#mainBanner .owl-nav .owl-next { right: 15px; }
#mainBanner .owl-nav .owl-prev span, #mainBanner .owl-nav .owl-next span { font-size: 1.6875rem; color: #fff; }
#mainBanner .owl-nav .owl-prev:focus, #mainBanner .owl-nav .owl-next:focus { outline: 0; }
#mainBanner .owl-nav .owl-prev:hover, #mainBanner .owl-nav .owl-next:hover { background: #000 !important; }
#mainBanner:hover .owl-prev { left: 0px; opacity: 1; }
#mainBanner:hover .owl-next { right: 0px; opacity: 1; }

#mainBanner > .owl-carousel > .owl-dots {
	margin: 0;
	position: absolute;
	bottom: 10px;
	left: 50%;
	transform: translateX(-50%);
	
	display: flex !important;
	align-items: center;
	justify-content: center;
	white-space: nowrap !important;
	z-index: 10;
}

#mainBanner > .owl-carousel > .owl-dots > .owl-dot {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	padding: 0 !important;
	margin: 0 !important;
	border: none;
	background: transparent;
}

#mainBanner > .owl-carousel > .owl-dots > .owl-dot > span {
	margin: 0 6px;
	padding: 0;
	width: 40px;
	height: 6px;
	display: block;
	position: relative;
	border-radius: 5px;
	background-color: rgba(255, 255, 255, 0.4);
	transition: background-color 0.3s ease;
}

#mainBanner > .owl-carousel > .owl-dots > .owl-dot > span::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 0;
	height: 100%;
	background-color: var(--primary-color);
	border-radius: 5px;
}

#mainBanner > .owl-carousel > .owl-dots > .owl-dot.active > span, 
.slider-1 > .owl-carousel > .owl-dots > .owl-dot:hover > span {
   background-color: #D6D6D6;
}

#mainBanner > .owl-carousel > .owl-dots > .owl-dot.active > span::after { 
	width: 100%; 
	transition: width 3s 0.2s; 
}


/* MAIN COMPONENT (INFO & PORTFOLIO) */
.icon-box-icon img { height: 80px; margin-top: 5px; }
.icon-box-content h3 { font-family: var(--body-font); font-size: 1.5em; font-weight: 800; letter-spacing: 0; }
.icon-box-content p { font-family: var(--body-font); font-size: 1em !important; font-weight: 400; letter-spacing: -0.07em; color: #999; }


/* PORTFOLIO */
.main-portfolio .portfolio-card {
    background-color: #FAF1EF !important;
    border: 1px solid rgba(0, 0, 0, 0.06) !important;
    
    border-radius: 1rem !important; 
    overflow: hidden;
    
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
                box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                border-color 0.35s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.main-portfolio .portfolio-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.2), 
                0 10px 15px -5px rgba(0, 0, 0, 0.04) !important;
    border-color: rgba(197, 168, 128, 0.4) !important;
}

.main-portfolio .portfolio-card .card-img-wrapper {
    position: relative;
    height: 260px;
    overflow: hidden;
    border-top-left-radius: 1rem;
    border-top-right-radius: 1rem;
}

.main-portfolio .portfolio-card .card-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-portfolio .portfolio-card:hover .card-img-wrapper img {
    transform: scale(1.2);
}

.main-portfolio .portfolio-card .card-img-wrapper::after {
    content: "";
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 65px;
    height: 35px;
    
    background-image: url('/images/ci_color.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    
    opacity: 0.35;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}

.main-portfolio .portfolio-card:hover .card-img-wrapper::after {
    opacity: 0.85;
    transform: translateY(-3px) scale(1.05);
}

.main-portfolio .portfolio-card .card-title {
    transition: color 0.3s ease;
}

.main-portfolio .portfolio-card:hover .card-title {
    color: var(--primary-color, #C77747) !important;
}

/* Floating Badge */
.main-portfolio .badge-category {
	position: absolute;
	top: 15px;
	left: 15px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(5px);
	color: #fff;
	font-size: 0.75rem;
	padding: 0.4em 0.8em;
	border-radius: 50rem;
}

.main-portfolio .btn-more-portfolio {
	border-color: var(--gray-color-300, #1A1A1A);
	color: var(--brand-dark, #1A1A1A);
	font-size: 0.95rem;
	letter-spacing: -0.2px;
	transition: all 0.3s ease;
}

.main-portfolio .btn-more-portfolio:hover {
	background-color: var(--brand-accent, #C5A880) !important;
	border-color: var(--brand-accent, #C5A880) !important;
	color: #ffffff !important;
	transform: translateY(-2px);
	box-shadow: 0 8px 20px rgba(197, 168, 128, 0.25);
}

.main-portfolio .btn-more-portfolio i {
  transition: transform 0.3s ease;
}

.main-portfolio .btn-more-portfolio:hover i {
  transform: translateX(5px);
}



/*--------------------------------------------------------------
	TOP SUB BANNER STYLES
--------------------------------------------------------------*/
#top-img-area1, #top-img-area2, #top-img-area3, #top-img-area4, 
#top-img-area5 {
	position: relative;
	top: 80px;
	height: 260px;
	background-size: cover !important;
	object-fit: cover !important;
}
#top-img-area1 { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('/images/top/top_img01.jpg') 50% 60%; }
#top-img-area2 { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('/images/top/top_img02.jpg') 50% 60%; }
#top-img-area3 { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('/images/top/top_img03.jpg') 50% 60%; }
#top-img-area4 { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('/images/top/top_img04.jpg') 50% 60%; }
#top-img-area5 { background: linear-gradient(0deg, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.6)), url('/images/top/top_img05.jpg') 50% 60%; }


.top-intro { margin: 0 auto; width: 100%; color: #fff; text-align:center; margin-top: 27px !important; }
.top-intro h5, .top-intro h3 {
  font-family: var(--ptd-font);
  -webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
  text-shadow: 0 0 8px rgba(0, 0, 0, 0.4);
}
.top-intro h5 { margin: 10px 0 0 0; font-weight:100; font-size: 1.7em; animation-name: fadeInUp; animation-delay: 0.4s; }
.top-intro h3 { font-weight:700; font-size: 2.5em; animation-name: fadeInDown; animation-delay: 0.2s; }

.top-intro div.bracketL, .top-intro div.bracketR {
	position: relative;
	display: inline-block;
	width: 50px;
	height: 50px;
	font-family: var(--ptd-font);
	font-weight: 400;
	border: 9px solid #fff;
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
}
.top-intro div.bracketL {
	left: -130px; top: 40px;
	-webkit-clip-path: polygon(0 0, 100% 0, 100% 15%, 15% 15%, 15% 100%, 0 100%);
	clip-path: polygon(0 0, 100% 0, 100% 15%, 15% 15%, 15% 100%, 0 100%);
	animation-name: fadeInLeft; animation-delay: 0.6s;
}
.top-intro div.bracketR {
	left: 130px; top: -35px;
	-webkit-clip-path: polygon(85% 85%, 85% 0, 100% 0, 100% 100%, 0 100%, 0 85%);
	clip-path: polygon(85% 85%, 85% 0, 100% 0, 100% 100%, 0 100%, 0 85%);
	animation-name: fadeInRight; animation-delay: 0.7s;
}


/*--------------------------------------------------------------
	 SUB NAVIGATION & CONTENTS COMMON
--------------------------------------------------------------*/
.navi-area {
	width: 100%;
	font-family: var(--body-font);
	margin-top: 80px;
}

.navi-area .breadcrumb-list {
	display: flex;
	align-items: center;
	list-style: none;
	padding: 0;
	margin: 0;
	font-size: 0.85rem;
	letter-spacing: 0.5px;
}

.navi-area .breadcrumb-item {
	color: #7A7A7A;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 6px;
	transition: color 0.25s ease;
}

.navi-area .breadcrumb-item i {
	font-size: 0.8rem;
	opacity: 0.8;
}

.navi-area .breadcrumb-separator {
	margin: 0 12px;
	color: #BBBBBB;
	font-family: var(--body-font) !important;
	font-size: 0.75rem;
	font-weight: 200 !important;
}

.navi-area .breadcrumb-item.active {
	color: #C5A880 !important;
	font-weight: 600;
}

.navi-area .breadcrumb-clean {
	background-color: #F5F2EC;
	padding: 14px 20px;
	border-radius: 10px;
	margin: 15px 0;
}



#content-area {
	position: relative;
	top: 0px;
	width:100%;
	max-width: 1300px !important;
	margin: 0 auto;
	margin-bottom: 50px !important;
}

.no-contents {
	width:100%;
	height:300px;
	text-align:center;
	padding-top:100px;
	color: #ccc;
}


/*--------------------------------------------------------------
	PAGING
--------------------------------------------------------------*/
.pagination-wrapper {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	margin-top: 48px;
}

.page-link-custom {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	color: #64748b;
	font-weight: 600;
	font-size: 0.9rem;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
	background-color: #ffffff;
	border: 1px solid #e2e8f0;
}

.page-link-custom:hover {
	background-color: #f1f5f9;
	color: #0f172a;
	border-color: #cbd5e1;
}

.page-link-custom.active {
	background-color: #0f172a;
	color: #ffffff;
	border-color: #0f172a;
	box-shadow: 0 4px 10px rgba(15, 23, 42, 0.15);
}

.page-link-custom.disabled {
	color: #cbd5e1;
	pointer-events: none;
	background-color: #f8fafc;
	border-color: #f1f5f9;
}


/*--------------------------------------------------------------
	COMPANY SECTION
--------------------------------------------------------------*/
.company, 
.company .container {
	max-width: 100% !important;
	overflow-x: hidden !important;
}

.company .company-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 3px;
	background-color: var(--primary-color);
}

	/* Story */
	.company .value-card {
		background-color: var(--brand-bg);
		border-radius: 1.25rem;
		padding: 2rem;
		height: 100%;
		transition: transform 0.3s ease, box-shadow 0.3s ease;
		border: 1px solid rgba(0, 0, 0, 0.04);
	}
	.company .value-card:hover {
		transform: translateY(-5px);
		box-shadow: 0 15px 30px rgba(0, 0, 0, 0.06);
	}
	.company .value-card .icon-box {
		width: 50px;
		height: 50px;
		background-color: #ffffff;
		color: var(--brand-accent);
		border-radius: 1rem;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.25rem;
		margin-bottom: 1.25rem;
		box-shadow: 0 4px 10px rgba(0,0,0,0.03);
	}

	/* Info */
	.company .info-side-card {
		background-color: var(--brand-bg);
		border-radius: 1.25rem;
		padding: 2.5rem;
		height: 100%;
	}
	.company .info-list-item {
		display: flex;
		align-items: flex-start;
		gap: 15px;
		max-width: 100%;
		box-sizing: border-box;
		margin-bottom: 1.25rem;
		padding-bottom: 1.25rem;
		border-bottom: 1px solid rgba(0, 0, 0, 0.06);
	}
	.company .info-list-item:last-child {
		border-bottom: none;
		margin-bottom: 0;
		padding-bottom: 0;
	}
	.company .info-list-item .icon {
		color: var(--brand-accent);
		font-size: 1.1rem;
		margin-top: 3px;
	}
	
	.company .company-story-img-wrapper {
		position: relative;
		width: 100%;
		height: 100%;
		min-height: 280px;
		overflow: hidden;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(0, 0, 0, 0.05);
		border-radius: 1.25rem;
	}

	.company .company-story-img-wrapper img {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s ease;
	}
		
	.company .company-story-img-wrapper:hover img {
		transform: scale(1.03);
	}

	.company .company-img-box1 {
		border-radius: 0 !important;
		overflow: hidden;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(0, 0, 0, 0.05);
		height: 100%;
		display: flex;
		align-items: center;
	}

	.company .company-img-box1 img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		transition: transform 0.5s ease;
	}

	.company .company-img-box2 {
		border-radius: 1.25rem;
		overflow: hidden;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
		border: 1px solid rgba(0, 0, 0, 0.05);
	}
	.company .company-img-box2 img {
		transition: transform 0.5s ease;
	}
	.company .company-img-box2:hover img {
		transform: scale(1.1);
	}
	
	.company .com-phone p {
		margin : 0 !important;
		padding: 0 10px;
		word-break: break-all;

	}
	
	.company .com-phone p:last-child {
		background : #03BC97 !important;
		border-radius: 10px;
	}
	
	.company .com-phone p:last-child a {
		color: #fff !important;
	}
	
	.company .com-phone p:last-child a::before {
		content: "\f3ce";
		font-family: var(--aws6-font);
		font-weight: bold;
		margin-right: 5px;
		color: #fff;
	}
	
	.company .bus-info {
		font-size: 0.85em !important;
	}

	#map {
		max-width: 100% !important;
		border-radius: 1.25rem;
		overflow: hidden;
		box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
		border: 1px solid rgba(0, 0, 0, 0.08);
	}
	

@media (max-width: 768px) {
	.company .info-side-card {
		background-color: var(--brand-bg);
		border-radius: 1.25rem;
		padding: 2rem;
		height: 100%;
	}
	
	.company .bus-info {
		display: block !important;
	}

}


/*--------------------------------------------------------------
	PORTFOLIO SECTION
--------------------------------------------------------------*/
/* PORTFOLIO LIST */
.portfolio .portfolio-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 3px;
	background-color: var(--primary-color);
}

.portfolio .portfolio-card {
	background-color: #FAF1EF !important;
	border: 1px solid rgba(0, 0, 0, 0.06) !important;
	
	border-radius: 1rem !important; 
	overflow: hidden;
	
	transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), 
							box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1),
							border-color 0.35s ease;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03);
}

.portfolio .portfolio-card:hover {
	transform: translateY(-8px);
	box-shadow: 0 15px 25px -10px rgba(0, 0, 0, 0.2), 
							0 10px 15px -5px rgba(0, 0, 0, 0.04) !important;
	border-color: rgba(197, 168, 128, 0.4) !important;
}

.portfolio .portfolio-card .card-img-wrapper {
	position: relative;
	height: 260px;
	overflow: hidden;
	border-top-left-radius: 1rem;
	border-top-right-radius: 1rem;
}

.portfolio .portfolio-card .card-img-wrapper img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.portfolio .portfolio-card:hover .card-img-wrapper img {
  transform: scale(1.2);
}

.portfolio .portfolio-card .card-img-wrapper::after {
    content: "";
    position: absolute;
    bottom: 12px;
    right: 12px;
    width: 65px;
    height: 35px;
    
    background-image: url('/images/ci_color.svg');
    background-repeat: no-repeat;
    background-position: center right;
    background-size: contain;
    
    opacity: 0.35;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 2;
    pointer-events: none;
    filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.4));
}

.portfolio .portfolio-card:hover .card-img-wrapper::after {
    opacity: 0.85;
    transform: translateY(-3px) scale(1.05);
}

.portfolio .portfolio-card .card-title {
  transition: color 0.3s ease;
}

.portfolio .portfolio-card:hover .card-title {
  color: var(--primary-color, #C77747) !important;
}



.portfolio .badge-category {
	position: absolute;
	top: 15px;
	left: 15px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(5px);
	color: #fff;
	font-size: 0.75rem;
	padding: 0.4em 0.8em;
	border-radius: 50rem;
}


/* PORTFOLIO VIEW */
.portfolio-view .portfolio-area {
	max-width: 1170px;
	margin: 0 auto;
}

.portfolio-view .portfolio-detail-wrapper {
	max-width: 1300px;
	margin: 0 auto;
	text-align: center;
}

.portfolio-view .img-watermark-container {
	position: relative;
	display: inline-block;
	max-width: 100%;
	height: auto !important;
	margin: 2rem auto;
	border-radius: 0 !important;
	overflow: hidden;
	text-align: center;
}

.portfolio-view .img-watermark-container > img:not(.watermark-overlay) {
	display: block;
	width: auto;
	height: auto !important;
	max-width: 100% !important;
	border-radius: 0 !important;
}

.portfolio-view .img-watermark-container .watermark-overlay {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 25%;
	max-width: 120px;
	min-width: 60px;
	height: auto !important;
	opacity: 0.25;
	pointer-events: none;
	user-select: none;
	z-index: 2;
}


.portfolio-view .project-title::before {
	content: '';
	position: absolute;
	margin-left: -15px;
	background: #000;
	width: 5px;
	height: 20px;
}




/*--------------------------------------------------------------
	PROCESS SECTION
--------------------------------------------------------------*/
.nova-process {
	background-color: #fcfcfc;
	margin-bottom: 90px !important;
}

.nova-process .nova-process-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 40px;
	height: 3px;
	background-color: var(--primary-color);
}

.nova-process .process-card {
	background: #ffffff;
	border: 1px solid #e9e9e9;
	border-top: 4px solid var(--primary-color);
	border-radius: 6px;
	padding: 30px 24px;
	box-shadow: 0 4px 15px rgba(0,0,0,0.02);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
	position: relative;
	overflow: hidden;
}

.nova-process .process-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 12px 24px rgba(0,0,0,0.06);
	border-top-color: #1a385c;
}

.nova-process .step-badge {
	display: inline-block;
	font-family: var(--ptd-font);
	font-size: 11px;
	font-weight: 700;
	color: var(--primary-color);
	background-color: rgba(199, 119, 71, 0.1);
	padding: 4px 10px;
	border-radius: 4px;
	letter-spacing: 1px;
	transition: all 0.3s ease;
}
.nova-process .process-card:hover .step-badge {
  background-color: #1a385c;
  color: #ffffff;
}

.nova-process .process-icon-wrap {
	width: 60px;
	height: 60px;
	background-color: #f5f5f5;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.nova-process .process-icon-wrap i {
	font-size: 28px;
	color: #777777;
	transition: all 0.3s ease;
}

.nova-process .process-card:hover .process-icon-wrap {
  background-color: rgba(199, 119, 71, 0.1);
}
.nova-process .process-card:hover .process-icon-wrap i {
  color: var(--primary-color);
  transform: scale(1.2);
}

.nova-process .process-step-title {
	font-size: 20px;
	font-weight: 700;
	color: #111111;
	margin-bottom: 14px;
	letter-spacing: -0.3px;
}

.nova-process .process-desc {
	font-size: 16px;
	line-height: 1.7;
	color: #666666;
	word-break: keep-all;
	word-wrap: break-word;
	margin-bottom: 0;
}

.nova-process .process-desc p {
	font-size: 1em;
	line-height:20px;
}

.nova-process .btn-quote-cta {
	font-size: 13px !important;
	font-weight: 600;
	padding: 8px 16px !important;
	border-color: #ddd !important;
	color: #555 !important;
	transition: all 0.2s ease;
}
.nova-process .btn-quote-cta:hover {
	background-color: var(--primary-color) !important;
	border-color: var(--primary-color) !important;
	color: #ffffff !important;
}




/*--------------------------------------------------------------
	ESTIMATE SECTION
--------------------------------------------------------------*/
.estimate .wizard-container {
	max-width: 1200px;
	margin: 0 auto;
}

/* 상단 스텝 프로그레스 바 */
.estimate .step-progress-wrapper {
	background-color: #ffffff;
	border-radius: 20px;
	padding: 24px 20px 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
}

.estimate .step-nav-container {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	position: relative;
	max-width: 680px;
	margin: 0 auto;
}

.estimate .step-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	z-index: 2;
	width: 80px;
	flex-shrink: 0;
}

.estimate .step-bubble {
	width: 44px;
	height: 44px;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	background-color: #f1f5f9;
	color: #64748b;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	flex-shrink: 0;
	position: relative;
	z-index: 3;
}

.estimate .step-bubble.active {
	background-color: var(--brand-dark2);
	color: #ffffff;
	box-shadow: 0 0 0 4px #e2e8f0;
	transform: scale(1.05);
}

.estimate .step-bubble.completed {
	background-color: var(--brand-accent2);
	color: #ffffff;
}

.estimate .step-label {
	font-size: 13px;
	font-weight: 600;
	color: #94a3b8;
	margin-top: 10px;
	text-align: center;
	white-space: nowrap;
	transition: color 0.3s ease;
	position: relative;
	z-index: 3;
}

.estimate .step-label.active {
	color: var(--brand-dark2);
	font-weight: 700;
}

.estimate .step-line-track {
	position: absolute;
	top: 22px;
	left: 8%;
	right: 8%;
	height: 3px;
	background-color: #e2e8f0;
	z-index: 1;
	transform: translateY(-50%);
	overflow: hidden;
}

.estimate .step-line-fill {
	height: 100%;
	background-color: var(--brand-accent2);
	width: 0%;
	transition: width 0.4s ease;
}


/* 선택 카드 & 체크박스 */
.estimate .option-card {
	border: 2px solid #e2e8f0;
	border-radius: 16px;
	background-color: #ffffff;
	padding: 24px;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	position: relative;
	overflow: hidden;
}

.estimate .option-card:hover {
	border-color: #cbd5e1;
	transform: translateY(-3px);
	box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.estimate .option-card.selected {
	border-color: var(--brand-selected-border) !important;
	background-color: var(--brand-selected-bg) !important;
	box-shadow: 0 8px 24px rgba(217, 119, 6, 0.15) !important;
}

.estimate .option-card.selected::after {
	content: "\f058";
	font-family: var(--aws6-font);
	font-weight: 900;
	position: absolute;
	top: 10px;
	right: 14px;
	color: var(--brand-accent2);
	font-size: 30px;
}

.estimate .item-check-card {
	border: 2px solid #e2e8f0;
	border-radius: 14px;
	padding: 16px 20px;
	background: #ffffff;
	cursor: pointer;
	transition: all 0.2s ease;
	user-select: none;
}

.estimate .item-check-card:hover {
	border-color: #cbd5e1;
}

.estimate .item-check-card.checked {
	border-color: var(--brand-selected-border) !important;
	background-color: var(--brand-selected-bg) !important;
	box-shadow: 0 4px 14px rgba(217, 119, 6, 0.12);
}

.estimate .item-check-card .form-check-input {
	width: 20px;
	height: 20px;
	cursor: pointer;
	border: 2px solid #cbd5e1;
}

.estimate .item-check-card .form-check-input:checked {
	background-color: var(--brand-accent2);
	border-color: var(--brand-accent2);
}

.estimate .btn-brand-dark {
	background-color: var(--brand-dark2);
	color: #ffffff;
	border: none;
	padding: 12px 30px;
	border-radius: 12px;
	font-weight: 600;
	transition: all 0.2s ease;
}

.estimate .btn-brand-dark:hover {
	background-color: #1e293b;
	color: #ffffff;
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(15, 23, 42, 0.2);
}

.estimate .btn-brand-outline {
	border: 2px solid #cbd5e1;
	color: #475569;
	background: #ffffff;
	padding: 10px 24px;
	border-radius: 12px;
	font-weight: 600;
}

.estimate .btn-brand-outline:hover {
	background: #f1f5f9;
	color: #0f172a;
}

/* 5단계 카드 */
.estimate .result-hero-card {
	background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
	color: #ffffff;
	border-radius: 20px;
	padding: 40px 20px;
	box-shadow: 0 20px 40px rgba(15, 23, 42, 0.25);
}

.estimate .price-text {
	color: #fbbf24;
	font-size: 3.4rem;
	font-weight: 800;
	letter-spacing: -1px;
}

.estimate .step-content {
	display: none;
	animation: fadeIn 0.35s ease-in-out forwards;
}

.estimate .step-content.active {
	display: block;
}

.estimate .step-content.active ul li:has(b) {
  list-style: none;
	margin-left: -18px;
	margin-top: 20px;
	color: #A75818;
}

.estimate .step-content.active ul li:has(b)::before {
	content: "\f06a";
	font-family: var(--aws6-font);
	font-weight: bold;
	margin-right: 5px;
	color: #DB7420;
}

.estimate .step-content.active ul li:empty {
  list-style: none; /* 또는 list-style-type: none; */
}

@keyframes fadeIn {
		from { opacity: 0; transform: translateY(8px); }
		to { opacity: 1; transform: translateY(0); }
}


.estimate #res-notice-box ol li:has(b) {
	list-style: none;
	margin: 10px 0 0 -20px;
	
}

.estimate #res-notice-box ol li:has(b)::before {
	content: "\f06a";
	font-family: var(--aws6-font);
	font-weight: bold;
	margin-right: 5px;
	color: #DB7420;
}



@media (max-width: 767px) {
	.estimate .step-progress-wrapper {
		padding: 16px 10px 14px;
		border-radius: 14px;
	}

	.estimate .step-item {
		width: 18%;
	}

	.estimate .step-bubble {
		width: 32px;
		height: 32px;
		font-size: 13px;
	}

	.estimate .step-line-track {
		top: 16px;
		left: 10%;
		right: 10%;
		height: 2px;
	}

	.estimate .step-label {
		font-size: 11px;
		margin-top: 6px;
		letter-spacing: -0.5px;
	}
}

@media (max-width: 360px) {
	.estimate .step-label {
		font-size: 10px;
		transform: scale(0.95);
	}
}



/*--------------------------------------------------------------
	QUOTE SECTION
--------------------------------------------------------------*/
/* Quote List */
 .quote-list .quote-container { max-width: 1200px; margin: 0 auto; }

    /* PC 전용 카드 & 테이블 스타일 */
    .quote-list .quote-card-pc {
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        background-color: #ffffff;
        box-shadow: 0 4px 20px rgba(0, 0, 0, 0.03);
        padding: 0;
        overflow: hidden;
    }

    .quote-list .card-top-line {
        height: 4px;
        background-color: #0f172a;
        width: 100%;
    }

    .quote-list .table-list { border-collapse: collapse; margin-bottom: 0; }
    .quote-list .table-list th {
        background-color: #f5f5f5;
        color: #475569;
        font-weight: 600;
        text-align: center;
        border-bottom: 1px solid #e2e8f0;
        padding: 16px 12px;
        font-size: 0.95rem;
    }
    .quote-list .table-list td {
        vertical-align: middle;
        padding: 16px 12px;
        border-bottom: 1px solid #e7e7e7;
        font-size: 0.95rem;
    }
    .quote-list .table-list tr:last-child td { border-bottom: none; }

    .quote-list .table-list tbody tr {
        cursor: pointer;
        transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .quote-list .table-list tbody tr:hover {
        background-color: #EAF3FD !important;
        transform: translateY(-2px);
    }

    .quote-list .badge-res-outline {
        border: 1px solid #0d6efd;
        color: #0d6efd;
        background-color: #f0f7ff;
        font-weight: 600;
        font-size: 0.8rem;
        padding: 4px 8px;
        border-radius: 4px;
    }
    .quote-list .badge-com-outline {
        border: 1px solid #f1730c;
        color: #cd4e0a;
        background-color: #fef8ef;
        font-weight: 600;
        font-size: 0.8rem;
        padding: 4px 8px;
        border-radius: 4px;
    }
		
		.quote-list .badge-Q {
			background-color: #868e96 !important;
			padding: 4px 12px 3px 12px;
		}
		
		.quote-list .badge-C {
			background-color: #f2db06 !important;
			padding: 4px 17px 3px 17px;
		}
	
		.quote-list .badge-K {
			padding: 4px 5px 3px 5px
		}

    /* 모바일 전용 카드 UI 전용 스타일 (d-block d-md-none 제어) */
    .quote-list .mobile-quote-card {
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 16px;
        padding: 14px 16px;
        margin-bottom: 20px;
        box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
        position: relative;
        overflow: hidden;
        cursor: pointer;
        transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s ease, border-color 0.25s ease, background-color 0.25s ease;
    }

    .quote-list .mobile-quote-card::before {
        content: "";
        display: block;
        height: 4px;
        background-color: #0f172a;
        margin: -14px -16px 12px -16px;
    }

    .quote-list .mobile-quote-card:hover,
    .quote-list .mobile-quote-card:active {
        transform: translateY(-4px);
        box-shadow: 0 8px 18px rgba(15, 23, 42, 0.15);
        border-color: #cbd5e1;
        background-color: #eaf3fd;
    }

    .quote-list .mobile-card-row {
        display: flex;
        align-items: center;
        padding: 7px 0;
        border-bottom: 1px solid #f1f5f9;
        font-size: 0.9rem;
    }
    .quote-list .mobile-card-row:last-child {
        border-bottom: none;
    }

    .quote-list .mobile-card-label {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 56px;
        min-width: 56px;
        height: 24px;
        background-color: #94a3b8;
        color: #ffffff;
        font-weight: 600;
        font-size: 0.8rem;
        border-radius: 6px;
        margin-right: 12px;
        flex-shrink: 0;
    }

    .quote-list .modal-pwd-dialog { max-width: 360px; margin: 1.75rem auto; }
    .quote-list .modal-pwd-content { border: none !important; border-radius: 24px !important; box-shadow: 0 20px 40px rgba(15, 23, 42, 0.15) !important; padding: 12px; background-color: #ffffff; }
    .quote-list .pwd-icon-box { width: 52px; height: 52px; background-color: #fef3c7; color: #d97706; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; margin: 0 auto 12px auto; }
    .quote-list .modal-pwd-content .form-control { border-radius: 12px; padding: 10px 14px; border: 1.5px solid #cbd5e1; font-size: 0.95rem; }
    .quote-list .modal-pwd-content .form-control:focus { border-color: #0f172a; box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.1); }
		
		
		.quote-list .quote-search-select {
			width: 95px !important;
			flex-shrink: 0 !important;
		}
		.quote-list .quote-search-input-group {
			width: 200px !important;
		}

    @media (max-width: 767.98px) {
        .quote-list .quote-container { padding-left: 12px; padding-right: 12px; }
        .quote-list .modal-pwd-dialog { width: calc(100% - 32px) !important; margin: 0 auto; }
    }
		
		@media (max-width: 576px) {
			.quote-list .quote-search-select {
				width: 95px !important;
				padding: 4px 2px !important;
				font-size: 12px !important;
				text-align: center !important;
			}
			.quote-list .quote-search-input-group {
				width: 165px !important;
			}
			.quote-list .quote-search-input-group input {
				font-size: 12px !important;
				padding: 4px 6px !important;
			}
			.quote-list .quote-search-input-group .btn {
				padding: 4px 8px !important;
			}
			.quote-list .quote-btn-write {
				font-size: 12px !important;
				padding: 5px 8px !important;
			}
		}

		@media (max-width: 365px) {
			.quote-search-input-group {
				width: 115px !important;
			}
		}
		
		
		
/* Quote Add */
.quote .quote-container { max-width: 1200px; margin: 0 auto; }

.quote .type-tab-btn {
	border: 2px solid #e2e8f0;
	background: #ffffff;
	color: #64748b;
	font-weight: 700;
	font-size: 1.1rem;
	padding: 16px;
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.25s ease;
}
.quote .type-tab-btn:hover { border-color: #cbd5e1; background: #f8fafc; }
.quote .type-tab-btn.active {
	border-color: #0f172a;
	background: #0f172a;
	color: #ffffff;
	box-shadow: 0 10px 25px rgba(15, 23, 42, 0.15);
}

.quote .form-section-title {
	font-size: 1.15rem;
	font-weight: 700;
	color: #0f172a;
	border-left: 4px solid #d97706;
	padding-left: 12px;
	margin-bottom: 20px;
}
.quote .table-form th {
	background-color: #f1f5f9;
	color: #1e293b;
	font-weight: 600;
	vertical-align: middle;
	width: 140px;
	text-align: center;
}
.quote .table-form td { vertical-align: middle; }
.quote .required-star { color: #ef4444; margin-left: 2px; }

.quote .input-inline-sm { display: inline-block; width: 70px; text-align: center; }
.quote .input-inline-md { display: inline-block; width: 140px; }

.quote .q-group {
	border: solid 1px #ccc;
	padding: 3px 10px;
	border-radius: 7px;
	background: #efefef;
	overflow: visible;
}

.quote .q-group,
.quote .q-group.flex-grow-1 {
	display: inline-flex !important;
	align-items: center !important;
	gap: 6px;
	height: auto;
}

.quote input[name$="_etc"],
.quote input[name$="_etc_text"], 
.quote input[name$="etcs_text"] {
	width: 100% !important;
	max-width: 100% !important;
	flex-grow: 1 !important;
	
	height: 31px !important;
	min-height: 31px !important;
	max-height: 31px !important;
	padding: 0.25rem 0.5rem !important;
	font-size: 0.875rem !important;
	line-height: 1.5 !important;
	box-sizing: border-box !important;
}


.quote input:disabled, .quote select:disabled, .quote textarea:disabled {
		background-color: #e9ecef !important;
		cursor: not-allowed;
}

.quote .form-check-input[type="radio"] {
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.12em;
	vertical-align: top;
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	border: 2px solid #cbd5e1;
	appearance: none;
	border-radius: 50%;
	transition: all 0.2s ease-in-out;
	cursor: pointer;
}

.quote .form-check-input[type="radio"]:checked {
	background-color: #ffffff;
	border-color: #0D6EFD;
	border-width: 5px;
}

.quote .form-check-input[type="radio"]:disabled {
	background-color: #e9ecef;
	border-color: #ced4da;
	cursor: not-allowed;
}

.quote .privacy-box {
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	
	overflow-y: visible;
	font-size: 0.85rem;
	color: #64748b;
	padding: 12px;
	border-radius: 8px;
	line-height: 25px;
	letter-spacing: -0.03em;
}

.quote .captcha-code {
	letter-spacing: 4px;
	font-size: 1.1rem;
	user-select: none;
}
 
.quote label {
	margin-bottom: 0 !important;
	cursor: pointer;
}

.quote .nobreak-label {
	white-space: nowrap;
	display: inline-flex !important;
	align-items: center !important;
	gap: 4px;
	vertical-align: middle !important;
}

.quote .form-check-input,
.quote input[type="checkbox"],
.quote input[type="radio"] {
	vertical-align: middle !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	flex-shrink: 0;
}

.quote #section-residential-detail input.input-inline-sm,
.quote #section-residential-detail input.input-inline-md,
.quote #section-residential-detail input.w40px {
	display: inline-block !important;
	height: 24px !important;
	min-height: 24px !important;
	max-height: 24px !important;
	padding: 0 4px !important;
	font-size: 0.85rem !important;
	line-height: 22px !important;
	vertical-align: middle !important;
	margin: 0 2px !important;
}

.quote .form-inline-group,
.quote .sub-option-wrap {
	display: inline-flex !important;
	align-items: center !important;
	flex-wrap: wrap !important;
	gap: 4px 6px !important;
	vertical-align: middle !important;
}



/* 파일명 말줄임 배지 스타일 */
.quote .cur-file-badge {
    max-width: 220px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: inline-block;
    vertical-align: middle;
}
@media (max-width: 576px) {
    .quote .cur-file-badge {
        max-width: 140px;
    }
}

@media (max-width: 767.98px) {
	.quote .quote-container { padding-left: 10px; padding-right: 10px; }
	.quote .card { padding: 18px 14px !important; }

	.quote .type-tab-btn {
		font-size: 0.95rem;
		padding: 12px 8px;
		border-radius: 12px;
	}

	.quote .table-form,
	.quote .table-form tbody,
	.quote .table-form tr,
	.quote .table-form th,
	.quote .table-form td {
		display: block !important;
		width: 100% !important;
	}

	.quote .table-form tr {
		border-bottom: 1px solid #e2e8f0;
		margin-bottom: 8px;
	}

	.quote .table-form tr#tr-com-extra[style*="table-row"] {
		display: block !important;
	}

	.quote .table-form th {
		text-align: left !important;
		background-color: #f1f5f9;
		padding: 8px 12px !important;
		font-size: 0.9rem;
		border-bottom: none !important;
	}

	.quote .table-form td {
		padding: 10px 12px 14px 12px !important;
		border-top: none !important;
	}

	.quote .q-group,
	.quote .form-inline-group,
	.quote .sub-option-wrap,
	.quote td .d-flex,
	.quote td .d-inline-flex {
		display: flex !important;
		flex-wrap: wrap !important;
		align-items: left !important;
		max-width: 100% !important;
		gap: 6px 8px !important;
	}

	.quote .q-group {
		padding: 6px 10px !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	.quote .sub-option-wrap {
		width: 100% !important;
		margin-top: 2px;
	}

	.quote .input-inline-md {
		max-width: 100% !important;
	}

	.quote .table-form td .row > [class*="col-"] {
		width: 100% !important;
	}

	.quote .captcha-code {
		font-size: 0.95rem;
		letter-spacing: 2px;
	}
	
	.quote .m-block {
		display: block !important;
		padding-left: 0 !important;
	}
	
	.quote .ml-0 {
		margin-left: 0 !important;
	}

}


/* Quote View */
.quote-view .quote-container { max-width: 1200px; margin: 0 auto; }
.quote-view .form-section-title {
		font-size: 1.15rem; font-weight: 700; color: #0f172a;
		border-left: 4px solid #d97706; padding-left: 12px; margin-bottom: 20px;
}
.quote-view .table-view th { background-color: #f1f5f9; color: #1e293b; font-weight: 600; width: 140px; text-align: center; vertical-align: middle; }
.quote-view .table-view td { vertical-align: middle; }

.quote-view .sub_title:before
{
	font-family: var(--aws6-font);
	content: '\f192';
	margin: -2px 5px 0 5px;
	color: var(--blue-color-500);
	font-size: 0.8em;
}


.quote-view .options-title {
	margin: 0 !important;
	display: block !important;
	color: #fff !important;
	font-weight: 500 !important;
	font-size: 1.05rem !important;
	display: inline-block;
	margin-top: 6px;
	line-height: 25px;
	background: #2563eb;
	width: 150px;
	padding: 0 10px !important;
	border-radius: 15px;
}

.quote-view .options-data p + p {
    margin-top: 1.2rem !important;
}

.quote-view .badge-Q {
	background-color: #868e96 !important;
	padding: 4px 12px 3px 12px;
}

.quote-view .badge-C {
	background-color: #f2db06 !important;
	padding: 4px 17px 3px 17px;
}

.quote-view .badge-K {
	padding: 4px 5px 3px 5px
}

/* 파일명 말줄임 스타일 */
.quote-view .btn-quote-file {
    max-width: 240px;
    display: inline-flex;
    align-items: center;
}
.quote-view .quote-file-name {
    display: inline-block;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    vertical-align: middle;
}

/* 첨부파일 버튼 그룹 전체 */
.quote-view .quote-file-group {
	max-width: 100% !important;
	display: inline-flex !important;
	vertical-align: middle !important;
}

.quote-view .quote-file-group .btn-preview {
	flex: 0 0 auto !important;
	white-space: nowrap !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	padding: 4px 8px !important;
}

.quote-view .quote-file-group .btn-download {
	flex: 1 1 auto !important;
	min-width: 0 !important;
	max-width: 320px;
	display: inline-flex !important;
	align-items: center !important;
	overflow: hidden !important;
}

.quote-view .quote-file-group .quote-file-name {
	display: block !important;
	width: 100% !important;
	overflow: hidden !important;
	text-overflow: ellipsis !important;
	white-space: nowrap !important;
	text-align: left !important;
}

#imgNoticeBadge {
	background: rgba(0, 0, 0, 0.72) !important;
	z-index: 99 !important;
	font-size: 13px !important;
	padding: 7px 18px !important;
	border-radius: 30px !important;
	white-space: nowrap !important;
	text-align: center !important;
}
#imgNoticeBadge .notice-divider {
	display: inline !important;
}



@media (max-width: 576px) {
	.quote-view .btn-quote-file {
			max-width: 100%;
			width: 100%;
			justify-content: flex-start;
	}
	.quote-view .quote-file-name {
			max-width: calc(100% - 30px);
	}

	.quote-view .quote-file-group {
		width: 100% !important;
		display: flex !important;
	}
	.quote-view .quote-file-group .btn-download {
		max-width: none !important;
	}
	
	#imgNoticeBadge {
		font-size: 11.5px !important;
		padding: 7px 14px !important;
		border-radius: 10px !important;
		white-space: normal !important;
		width: max-content !important;
		max-width: 90% !important;
	}
	#imgNoticeBadge .notice-divider {
		display: none !important;
	}
	#imgNoticeBadge .notice-item {
		display: block !important;
		line-height: 1.45 !important;
	}
	
}
	

@media (max-width: 767.98px) {
		.quote-view .quote-container { padding-left: 12px; padding-right: 12px; }
		.quote-view .card { padding: 20px 16px !important; }
		.quote-view .table-view,
		.quote-view .table-view tbody,
		.quote-view .table-view tr,
		.quote-view .table-view th,
		.quote-view .table-view td {
				display: block !important;
				width: 100% !important;
				box-sizing: border-box;
		}

		.quote-view .table-view tr {
				border-bottom: 1px solid #e2e8f0;
				margin-bottom: 6px;
		}
		.quote-view .table-view tr:last-child {
				border-bottom: none;
				margin-bottom: 0;
		}

		.quote-view .table-view th {
				text-align: left !important;
				background-color: #f1f5f9 !important;
				color: #475569 !important;
				padding: 6px 12px !important;
				font-size: 0.85rem !important;
				border-bottom: none !important;
				border-radius: 6px 6px 0 0;
		}

		.quote-view .table-view td {
				padding: 8px 12px 12px 12px !important;
				font-size: 0.95rem !important;
				color: #0f172a !important;
				border-top: none !important;
				word-break: break-word;
		}

		.quote-view .btn-outline-secondary.btn-sm {
				width: 100%;
				text-align: left;
				padding: 8px 12px;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
		}
}


/*--------------------------------------------------------------
	FOOTER
--------------------------------------------------------------*/
.footer { background: #1b1b1b; padding: 30px 0 20px 0; color:#fff; }
.footer .logo { padding: 0 0 10px 15px; }
.footer .logo img { width: 280px; }
.footer ul.info { display: inline-block; margin: 20px 0 0 0; padding: 0 0 0 5px; }
.footer ul.info li { display: inline-block; margin-right: 20px; padding: 3px 0; }
.footer ul.info li i { margin-right: 5px; }
.footer ul.info li:first-child { font-weight: 700; }
.footer ul.info li:nth-child(4) { display: block; }
.footer ul.info li:nth-child(4) > i { position:relative; top:2px; }
	
.copyright { color: #ccc; font-size: 14px; line-height: 22px; text-align: center; margin-top:30px; }
.copyright span:first-child { font-weight: 700; color: #fff; }


/*--------------------------------------------------------------
	POPUP MODAL CONTROL
--------------------------------------------------------------*/
.layer-popup, .layer-popup * {
	box-sizing: border-box !important;
}

.layer-popup {
	position: fixed;
	z-index: 9999;
	display: none;
	background: #ffffff;
	border: 1px solid #1a1a1a;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
	overflow: hidden;
}

.layer-popup .popup-body {
	width: 100%;
	line-height: 0;
}

.layer-popup .popup-body img {
	width: 100%;
	height: auto;
	display: block;
	border: 0;
}

.layer-popup .popup-footer {
	width: 100%;
	height: 38px;
	background: #1a1a1a;
	color: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 12px;
	font-size: 12px;
}

.layer-popup .popup-footer .chk-label {
	display: flex;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	user-select: none;
	color: #dddddd;
	font-size: 12px;
	margin: 0;
}

.layer-popup .popup-footer .chk-label input[type="checkbox"] {
	cursor: pointer;
	accent-color: #C5A880;
}

.layer-popup .popup-footer .btn-popup-close {
	background: rgba(255, 255, 255, 0.15);
	border: none;
	color: #ffffff;
	font-size: 11px;
	padding: 4px 10px;
	border-radius: 4px;
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 4px;
	transition: background 0.2s ease, color 0.2s ease;
}

.layer-popup .popup-footer .btn-popup-close:hover {
	background: #C5A880;
	color: #ffffff;
}

@media (max-width: 768px) {
    .layer-popup {
			left: 50% !important;
			top: 50% !important;
			transform: translate(-50%, -50%) !important;
			max-width: 90vw !important;
    }
}


/*--------------------------------------------------------------
	RESPONSIVE MEDIA QUERIES
--------------------------------------------------------------*/

@media only screen and (max-width: 991px) {
	#mainBanner .item .cover .header-content { padding: 30px 30px; }
	#mainBanner .item .cover .header-content .line {
		-webkit-clip-path: polygon(0 0, 90% 0, 65% 100%, 0 100%);
		clip-path: polygon(0 0, 90% 0, 65% 100%, 0 100%);
	}
	#mainBanner > .owl-carousel > .owl-dots > .owl-dot > span { width: 30px; margin: 0 5px }
		
	.icon-box-icon img { width: 100px; height: auto; margin-top: -5px; }
	
	.company .company-story-img-wrapper {
		position: relative;
		height: auto;
		min-height: 0;
		aspect-ratio: 16 / 10;
	}
	.company .company-story-img-wrapper img {
		position: relative;
		height: 100%;
	}

	.nova-process .process-card {
		padding: 24px 20px;
	}
}


@media only screen and (max-width: 768px) {
	#mainBanner > .owl-carousel > .owl-dots > .owl-dot > span { width: 20px; height: 5px; margin: 0 4px }
	.icon-box { border-bottom: dashed 1px #ccc; }
	.footer ul.info li:nth-child(4) { letter-spacing: -0.05em; }
	.footer ul.info li:nth-child(5), .footer ul.info li:nth-child(6) { display: block; }
}

@media only screen and (max-width: 576px) {
	#header-nav {
    padding-left: 10px !important;
    padding-right: 8px !important;
  }
  #header-nav .navbar-toggler {
    padding: 0 !important;
    margin-right: -4px !important;
    border: none !important;
  }
  #header-nav .logo { 
    width: 220px !important; 
  }
		
	#mainBanner {
    margin-top: 65px;
  }
  #mainBanner .item {
    height: 60vh;
  }
	#mainBanner > .owl-carousel > .owl-dots > .owl-dot > span {
		width: 24px;
		margin: 0 3px;
	}
	
	.navi-area .breadcrumb-separator {
		margin: 0 7px;
	}
	
	.footer .copyright span:nth-child(2) { display: block;}
}



/*--------------------------------------------------------------
	BOOTSTRAP UTILITY CONTAINER RESET
--------------------------------------------------------------*/
/*
@media (max-width: 575px) { .container,.container-sm { max-width:400px !important; } }
@media (min-width: 576px) { .container,.container-sm { max-width:540px !important; } }
@media (min-width: 768px) { .container,.container-md,.container-sm { max-width:840px !important; } }
@media (min-width: 992px) { .container,.container-lg,.container-md,.container-sm { max-width:980px !important; } }
@media (min-width: 1100px) { .container,.container-lg,.container-md,.container-sm { max-width:1050px !important; } }
@media (min-width: 1200px) { .container,.container-lg,.container-md,.container-sm,.container-xl { max-width:1150px !important; } }
@media (min-width: 1300px) { .container,.container-lg,.container-md,.container-sm,.container-xl { max-width:1270px !important; } }
@media (min-width: 1400px) { .container,.container-lg,.container-md,.container-sm,.container-xl,.container-xxl { max-width:1300px !important; } }

*/