@charset "utf-8";

/* 기본 레이아웃 */
body {margin-top: 65px;}
.num {color: #fff !important;}

@media (min-width: 1025px) {
	body {margin-top: 80px;}
}


/* aside  css */
.aside {position: fixed; z-index: 9999; bottom: var(--space-20); right: var(--space-20); display: none;}
.aside ul {position: relative; width: var(--space-64); height: var(--space-64); position: relative;}
.aside ul li {position:absolute;top:0;right:0;transition: background-color 0.4s ease-in-out;transition-delay:0.2s; cursor: pointer;}

.aside ul .inquiry a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 4rem;
  height: 4rem;
  border-radius: 3.5rem;
  background-color: #0C4AAE;
  overflow: hidden;
  transition: width 0.4s ease-in-out;
  transform-origin: right center; /* 오른쪽 고정 */
  padding-left: 7rem; /* 아이콘 영역 확보 */
  top: -8rem;
}

/* 아이콘: 원형 안에 고정 */
.aside ul .inquiry a .quick-logo-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 7rem;
  height: 7rem;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}

/* 텍스트 */
.aside ul .inquiry a p {
  font-size: 1.8rem;
  letter-spacing: 0.15em;
  color: #fff;
  opacity: 0;
  white-space: nowrap;
  transition: opacity 0.3s ease-in-out 0.2s;
}
/* hover 시 확장 */
.aside ul .inquiry a:hover {
  width: 20rem; /* 왼쪽으로 확장됨 */
}
.aside ul .inquiry a:hover p {
  opacity: 1;
}
.aside ul .topbutton {
  width: var(--space-64);
  height: var(--space-64);
  border-radius: 50%; /* 원형 유지 */
  background-color: #979797;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease-in-out; /* 배경색만 */
  cursor: pointer;
}
/* hover 시 배경색 변경 */
.aside ul .topbutton:hover {
  background-color: #282936;
}
@media (min-width: 475px) {
  .aside {right: 2rem;}
}
@media (min-width: 768px) {
  /* .aside ul {width: var(--space-60); height: var(--space-60);} */
  /* .aside ul .topbutton {width: var(--space-60); height: var(--space-60);} */
}
@media (min-width: 1024px) {
  .aside {bottom: 90px;}
}
/* aside css end */

/* 상단 헤더 */
.header {position: absolute; top: 0; left: 0; width: 100%; height: 120px; transition: background-color 0.5s; z-index: 10000; backdrop-filter: blur(5px);}
.header .header-inner {position: relative; text-align: center; display: flex; justify-content: space-between; align-items: center; height: 100%;}
.header .header-logo {font-size: 0;}
.header .header-logo img {display: block;}

.header .header-inner .btn-group button:hover {background-color: hsl(var(--color-accent));}

@media (max-width:1024px) {
  .header {position: fixed; width: 100%; height: 65px; overflow: visible;}
  .header .header-inner {text-align: right;}
  .header .header-logo {top: 12px;}
  .header .header-logo img {width: 150px;}
  .header .header-gnb {display: none;}
}
/* 상단 헤더 End */


/* section 공통 */
#section {padding-top: 8rem; padding-bottom: 8rem; border-bottom: 1px solid hsl(var(--color-border) / .6);}
.section-tit .sub-tit {display: flex; gap: var(--space-12); align-items: center; margin-bottom: var(--space-16);}
.section-tit .sub-tit .section-number {font-size: var(--text-14); font-weight: var(--fw-700); letter-spacing: 0.14rem; color: hsl(var(--color-accent));}
.section-tit .sub-tit .line {width: var(--space-48); height: 1px; background-color: hsl(var(--color-accent) / .4); display: inline-block;}
.section-tit .sub-tit .tit {color: hsl(var(--color-muted-foreground)); font-weight: 500; letter-spacing: 0.35px; line-height: 2rem; font-size: var(--text-14);}

.section-tit .main-tit h2 {font-size: var(--text-36); font-weight: 700; color: #282936; line-height: 1.2; letter-spacing: -1.8px;}
.section-tit .main-tit h2 em {color: hsl(var(--color-accent));}
.section-tit .main-tit p {margin-top: var(--space-24); font-size: var(--text-18); color: hsl(var(--color-muted-foreground));}
.section-tit .main-tit p em {font-weight: 600; color: hsl(var(--color-accent));}

@media (min-width: 768px) {
  /* .section-tit h2 {white-space: pre-line;} */
}
@media (min-width: 1024px) {
  #section {padding-top: 11.2rem; padding-bottom: 11.2rem;}
  .section-tit h2 {letter-spacing:-0.05em;}
}
@media (min-width: 1400px) {
  .section-tit .main-tit p {white-space: pre-line;}
}

/* main-section css */
.main-section {padding-top: 11vh !important;}
.main-section .inner {display: grid; gap: 3rem; align-items: center;}

.main-section .inner .txt-box > span {color: hsl(var(--color-accent)); font-size: var(--text-14); font-weight: 600; display: inline-block; background: #F5F8FF; padding: 0.4rem 1.8rem 0.4rem 2.8rem; border-radius: var(--radius-xl); border: 1px solid hsl(var(--color-accent)); position: relative; margin-bottom: var(--space-24);}
.main-section .inner .txt-box > span::before {content: ''; width: 0.8rem; height: 0.8rem; background-color: #4876EF; border-radius: 50%; position: absolute; top: 50%; transform: translateY(-50%); left: 14px;}

.main-section .inner .txt-box > h1 {
	color: hsl(var(--color-primary));
	font-size: 3.6rem;
	font-weight: var(--fw-700);
	line-height: 1.1;
	word-break: keep-all;
	/* transform: translateY(20px); */
	/* transition: transform 1s 0.2s; */
  letter-spacing: -0.12rem;
}
.main-section .inner .txt-box > h1 em {color: hsl(var(--color-accent)); white-space: pre-line;}
.main-section .inner .txt-box > p {
	color: hsl(var(--color-muted-foreground));
	
	/* transform: translateY(20px); */
	word-break: keep-all;
	/* transition: transform 1s 0.4s; */
  line-height: 1.5;
  
  font-weight: var(--fw-600);
}
.main-section .inner .txt-box .sub-txt1 {margin-top: var(--space-24); font-size: var(--text-18);}
.main-section .inner .txt-box .sub-txt2 {margin-top: var(--space-16); font-size: var(--text-16); color: var(--primary);}

.main-section .inner .txt-box .btn-group {margin-top: var(--space-32);}
.main-section .inner .txt-box .btn-group .call:hover {background-color: hsl(var(--color-primary)); border: 1px solid hsl(var(--color-primary)); color: hsl(var(--color-primary-foreground)); }

.main-section .inner .img-box {font-size: 0; border-radius: 1.5rem; overflow: hidden;}

@media screen and (min-width: 640px) {
  .main-section .inner .txt-box > h1 {font-size: 4.8rem;}
  
}
@media screen and (min-width: 1024px) {
  .main-section {padding-top: 11.2rem;}
  .main-section .inner {grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6rem;}
  .main-section .inner .txt-box > h1 {font-size: 6rem;}
}
@media screen and (min-width: 1400px) {
  .main-section .inner .txt-box > p {white-space: pre-line;}
}


/* section01(main-sdlie) 끝 */

/* concerns */
.concerns {background-color: hsl(var(--color-accent) / .04);}
.concerns .inner {display: grid; gap: var(--space-48);}

.concerns-li {display: flex; flex-direction: column; gap: var(--space-12);}
.concerns-li li {padding: var(--space-20); border: 1px solid hsl(var(--color-accent)); background-color: hsl(var(--color-accent) / .05); border-radius: 10px; display: flex; align-items: center; gap: var(--space-16);}
.concerns-li li span {background-color: hsl(var(--color-accent)); border-radius: 50%; display: flex; width: var(--space-32); height: var(--space-32); align-items: center; justify-content: center; flex-shrink: 0; color: hsl(var(--color-accent-foreground)); font-weight: 700;}
.concerns-li li p {font-weight: normal; color: hsl(var(--color-primary));}

@media screen and (min-width: 1024px) {
  .concerns .inner {grid-template-columns: repeat(2, minmax(0, 1fr));}
  /* .concerns .inner .section-tit .main-tit p {white-space: pre-line;} */
}

/* portfolio */

.portfolio .inner .section-tit .main-tit {display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: var(--space-24);}
.portfolio .inner .section-tit .main-tit .btn-group button p {margin-top: 0; font-size: var(--text-15); font-weight: 500;}
.portfolio .inner .section-tit .main-tit .btn-group button p, 
.portfolio .inner .section-tit .main-tit .btn-group button span {color: hsl(var(--color-white));}
.portfolio .inner .section-tit .main-tit .btn-group button:hover {background-color: hsl(var(--color-primary));}
.portfoilo-wrap {position: relative;}

.portfolioSwiper {margin-top: var(--space-48);}
.portfolioSwiper .swiper-slide {border: 1px solid hsl(var(--color-border)); border-radius: 15px; overflow: hidden; box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px;}
.portfolioSwiper a {display: block;}
.portfolioSwiper .swiper-slide .thumb {overflow: hidden; font-size: 0;}
.portfolioSwiper .swiper-slide .thumb img {width: 100%; aspect-ratio: 16/10; object-fit: cover; transition: transform .6s;}
.portfolioSwiper .swiper-slide:hover img {transform: scale(1.05);}
.portfolioSwiper .swiper-slide .info {padding: var(--space-20);}
.portfolioSwiper .swiper-slide .info h3 {font-size: var(--text-18); font-weight: 600; line-height: var(--lh-heading);}
.portfolioSwiper .swiper-slide .info p {font-size: var(--text-15); margin-top: var(--space-8); color: hsl(var(--color-muted-foreground));}
.portfolioSwiper .swiper-slide .info ul {margin-top: var(--space-16); display: flex; flex-wrap: wrap; gap: var(--space-8);}
.portfolioSwiper .swiper-slide .info ul li {color: hsl(var(--color-secondary-foreground)); font-weight: 500; padding: var(--space-4) var(--space-12); background-color: hsl(var(--color-secondary)); border-radius: 9999px; font-size: var(--text-12);}

.portfolio-prev,
.portfolio-next {width: var(--space-48); height: var(--space-48); border-radius: 50%; background-color: hsl(var(--color-white)); box-shadow:0 15px 40px rgba(0,0,0,.08); color:#111; border: 1px solid hsl(var(--color-border)); transition: background-color .2s; position: absolute; top: 50%; transform: translateY(-50%); z-index: 20; cursor: pointer;}

.portfolio-prev{left: 20px; box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;}
.portfolio-next{right: 20px; box-shadow: rgba(17, 17, 26, 0.05) 0px 1px 0px, rgba(17, 17, 26, 0.1) 0px 0px 8px;}

.portfolio-prev:after,
.portfolio-next:after{font-size:var(--text-14); font-weight:700; color: hsl(var(--color-primary));}

.portfolio-prev:hover,
.portfolio-next:hover {background-color: hsl(var(--color-accent)); border-color: hsl(var(--color-accent));}

.portfolio-prev:hover:after,
.portfolio-next:hover:after {color: hsl(var(--color-white));}

.portfolioSwiper .swiper-pagination{
  position: static;
  width: 100%;
  height: 2px;
  margin-top: var(--space-40);
  background: hsl(var(--color-border));
  border-radius: 999px;
  overflow: hidden;
  display: block;
}
.portfolioSwiper .swiper-pagination-progressbar-fill{
  background: hsl(var(--color-primary));
  border-radius: 999px;
}
@media screen and (min-width: 768px) {

}
@media screen and (min-width: 1024px) {
  /* .portfolio .inner .section-tit .main-tit {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));} */
  .portfolioSwiper .swiper-pagination {display: none;}
}
@media screen and (min-width: 1580px) {
  .portfolio-prev{left: -60px;}
  .portfolio-next{right: -60px;}
}

/* why */
.why {background-color: hsl(var(--color-primary));}
.why .inner .section-tit .sub-tit .tit {color: hsl(var(--color-primary-foreground));}
.why .inner .section-tit .main-tit h2 {color: hsl(var(--color-primary-foreground));}
.why .inner .section-tit .main-tit p {color: hsl(var(--color-primary-foreground) / .7);}

.why .inner .why-li {display: grid; margin-top: var(--space-48);}
.why .inner .why-li li {padding: var(--space-32); border-bottom: 1px solid hsl(var(--color-border) / .2);}
.why .inner .why-li li:last-child {border-bottom: none;}
.why .inner .why-li li span {color: hsl(var(--color-accent)); font-size: var(--text-36); font-variation-settings: 'wght' 300;}
.why .inner .why-li li h3 {color: hsl(var(--color-primary-foreground)); font-size: var(--text-18); font-weight: 600; margin-top: var(--space-16); line-height: 20px !important;}
.why .inner .why-li li p {color: hsl(var(--color-primary-foreground) / .6); font-size: var(--text-15); margin-top: var(--space-8); line-height: 1.625;}

.why .inner .why-li li:nth-child(6) {background-color: hsl(var(--color-accent));}
.why .inner .why-li li:nth-child(6) span {color: hsl(var(--color-accent-foreground));}
.why .inner .why-li li:nth-child(6) h3 {color: hsl(var(--color-accent-foreground));}
.why .inner .why-li li:nth-child(6) p {color: hsl(var(--color-accent-foreground) / .8);}

@media screen and (min-width: 510px) {
  .why .inner .section-tit .main-tit p {white-space: pre-line;}
}
@media screen and (min-width: 640px) {
  .why .inner .why-li {grid-template-columns: repeat(2, minmax(0, 1fr));}
  .why .inner .why-li li:nth-child(2n+1) {border-right: 1px solid hsl(var(--color-border) / .2);}
}
@media screen and (min-width: 1024px) {
  .why .inner .why-li {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .why .inner .why-li li:nth-child(2),
  .why .inner .why-li li:nth-child(4) {border-right: 1px solid hsl(var(--color-border) / .2); border-left: 1px solid hsl(var(--color-border) / .2);}
  .why .inner .why-li li:nth-child(2) {border-left: none}
  .why .inner .why-li li:nth-child(3) {border-right: none}
  .why .inner .why-li li:nth-child(4) {border-left: none;}
  .why .inner .why-li li:nth-child(4),
  .why .inner .why-li li:nth-child(5) {border-bottom: none;}
}

/* type */
.type .inner .type-li {display: grid; margin-top: var(--space-48); gap: var(--space-20);}
.type .inner .type-li>li {border: 1px solid hsl(var(--color-border)); border-radius: 10px; padding: var(--space-24); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px;}
.type .inner .type-li>li span {width: var(--space-48); height: var(--space-48); background-color: hsl(var(--color-accent) / .1); border-radius: 10px; display: flex; justify-content: center; align-items: center; color: hsl(var(--color-accent)); font-size: var(--text-32); font-variation-settings: 'wght' 300;}
.type .inner .type-li>li h3 {margin-top: var(--space-20); font-size: var(--text-20); font-weight: 600;}
.type .inner .type-li .type-li-2depth {margin-top: var(--space-16); display: flex; flex-direction: column; gap: var(--space-8);}
.type .inner .type-li .type-li-2depth>li {font-size: var(--text-15); color: hsl(var(--color-muted-foreground)); display: flex; align-items: center; gap: 8px;}
.type .inner .type-li .type-li-2depth>li span {width: 6px; height: 6px; background-color: hsl(var(--color-accent)); border-radius: 9999px; display: inline-block;}

@media screen and (min-width: 640px) {
  .type .inner .type-li {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media screen and (min-width: 1024px) {
  .type .inner .type-li {grid-template-columns: repeat(4, minmax(0, 1fr));}
}

/* process */
.process {background-color: hsl(var(--color-accent) / .04);}
.process .inner .process-li {display: grid; margin-top: var(--space-48); gap: var(--space-20);}
.process .inner .process-li>li {border: 1px solid hsl(var(--color-border)); border-radius: 10px; padding: var(--space-24); background-color: hsl(var(--color-white)); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px;}
.process .inner .process-li>li .material-symbols-rounded {width: var(--space-48); height: var(--space-48); background-color: hsl(var(--color-accent)); border-radius: 10px; display: flex; justify-content: center; align-items: center; color: hsl(var(--color-accent-foreground)); font-size: var(--text-30); font-variation-settings: 'wght' 200;}
.process .inner .process-li>li .icon {display: flex; justify-content: space-between; align-items: center;}
.process .inner .process-li>li .icon .step {font-size: var(--text-12); font-weight: 700; color: hsl(var(--color-accent)); letter-spacing: 1.2px;}
.process .inner .process-li>li h3 {margin-top: var(--space-16); font-size: var(--text-18); font-weight: 600; color: hsl(var(--color-foreground));}
.process .inner .process-li>li p {margin-top: var(--space-8); font-size: var(--text-15); color: hsl(var(--color-muted-foreground));}

@media screen and (min-width: 640px) {
  .process .inner .process-li {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media screen and (min-width: 1024px) {
  .process .inner .process-li {grid-template-columns: repeat(3, minmax(0, 1fr));}
}

/* cost */
.cost .inner .section-tit .sub-tit {justify-content: center;}
.cost .inner .section-tit .main-tit {text-align: center;}

.cost .inner .cost-con {margin-top: var(--space-64);}
.cost .inner .cost-con .cost-type {display: grid; gap: var(--space-24);}
.cost .inner .cost-con .cost-type .type {padding: var(--space-32); border: 1px solid hsl(var(--color-border)); border-radius: var(--space-16); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 5px;}

.cost .inner .cost-con .cost-type .type .top {display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-24);}
.cost .inner .cost-con .cost-type .type .top .left {font-size: var(--text-12); font-weight: 700; color: hsl(var(--color-muted-foreground)); letter-spacing: 1.2px;}
.cost .inner .cost-con .cost-type .type .top .right {font-size: var(--text-12); font-weight: 500; color: hsl(var(--color-muted-foreground)); padding: var(--space-4) var(--space-12); background-color: hsl(var(--color-muted)); border-radius: 9999px;}

.cost .inner .cost-con .cost-type .type h3 {font-size: var(--text-24); font-weight: 700; color: hsl(var(--color-primary));}
.cost .inner .cost-con .cost-type .type p {font-size: var(--text-15); color: hsl(var(--color-muted-foreground)); margin-top: var(--space-12);}
.cost .inner .cost-con .cost-type .type .line {margin: var(--space-24) 0; height: 1px; background-color: hsl(var(--color-border));}

.cost .inner .cost-con .cost-type .type ul {display: flex; flex-direction: column; gap: var(--space-8);}
.cost .inner .cost-con .cost-type .type ul li {font-size: var(--text-14); color: hsl(var(--color-primary)); font-weight: 500; display: flex; align-items: center; gap: 8px;}
.cost .inner .cost-con .cost-type .type ul li span {width: 6px; height: 6px; background-color: hsl(var(--color-accent)); border-radius: 9999px; display: inline-block;}

.cost .inner .cost-con .cost-type .type.on {border: 2px solid hsl(var(--color-accent)); position: relative; box-shadow: rgba(0, 0, 0, 0.15) 0px 1px 8px;}
.cost .inner .cost-con .cost-type .type.on .top .left {color: hsl(var(--color-accent));}
.cost .inner .cost-con .cost-type .type.on .top .right {color: hsl(var(--color-accent)); background-color: hsl(var(--color-accent) / .1);}

.cost .inner .cost-con .cost-type .type.on .absolute {background-color: hsl(var(--color-accent)); color: hsl(var(--color-accent-foreground)); font-size: var(--text-12); font-weight: 700; letter-spacing: 0.6px; line-height: 16px; padding: var(--space-4) var(--space-16); border-radius: 9999px; position: absolute; left: 50%; transform: translateX(-50%); top: -12px;}

.cost .inner .cost-con .cost-affect {margin-top: var(--space-64); padding: var(--space-40); border: 1px solid hsl(var(--color-border)); border-radius: var(--radius-lg);}
.cost .inner .cost-con .cost-affect .tit {margin-bottom: var(--space-32); text-align: center;}
.cost .inner .cost-con .cost-affect .tit h3 {font-size: var(--text-24); font-weight: 700; color: hsl(var(--color-primary)); letter-spacing: -0.6px;}
.cost .inner .cost-con .cost-affect .tit p {font-size: var(--text-14); color: hsl(var(--color-muted-foreground)); margin-top: var(--space-8);}
.cost .inner .cost-con .cost-affect .affect-li {display: grid; gap: var(--space-16);}
.cost .inner .cost-con .cost-affect .affect-li li {padding: var(--space-20); border: 1px solid hsl(var(--color-border)); border-radius: var(--radius-lg); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px; display: flex; flex-direction: column; align-items: center;}
.cost .inner .cost-con .cost-affect .affect-li li .number {color: hsl(var(--color-accent)); background-color: hsl(var(--color-accent) / .1); font-size: var(--text-18); font-weight: 700; width: var(--space-48); height: var(--space-48); display: flex; justify-content: center; align-items: center; border-radius: 9999px; margin-bottom: var(--space-12);}
.cost .inner .cost-con .cost-affect .affect-li li span {font-size: var(--text-15); font-weight: 600;}

.cost .inner .cost-con .cost-summary {margin-top: var(--space-48); padding: var(--space-40); background-color: hsl(var(--color-primary)); border-radius: var(--radius-lg); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-16);}
.cost .inner .cost-con .cost-summary .left {display: flex; align-items: flex-start; gap: var(--space-16);}

.cost .inner .cost-con .cost-summary .left span {width: var(--space-48); height: var(--space-48); border-radius: 9999px; background-color: hsl(var(--color-accent)); display: flex; align-items: center; justify-content: center; font-size: var(--text-30); font-variation-settings: 'wght' 200; color: hsl(var(--color-accent-foreground));}
.cost .inner .cost-con .cost-summary .left .txt h4 {font-size: var(--text-18); font-weight: 600; color: hsl(var(--color-primary-foreground)); letter-spacing: -0.6px;}
.cost .inner .cost-con .cost-summary .left .txt p {font-size: var(--text-14); color: hsl(var(--color-primary-foreground)/ .7); margin-top: var(--space-4);}

.cost .inner .cost-con .cost-summary .btn-group button:hover {background-color: hsl(var(--color-accent-foreground)); color: hsl(var(--color-primary));}

@media screen and (min-width: 640px) {
  .cost .inner .cost-con .cost-affect .affect-li {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media screen and (min-width: 1024px) {
  .cost .inner .cost-con .cost-type {grid-template-columns: repeat(3, minmax(0, 1fr));}
  .cost .inner .cost-con .cost-affect .affect-li {grid-template-columns: repeat(5, minmax(0, 1fr));}
}

/* mustCheck */
.mustCheck {background-color: hsl(var(--color-accent) / .04);}
.mustCheck .inner .mustCheck-li {display: grid; gap: var(--space-16); margin-top: var(--space-48); text-align: center;}
.mustCheck .inner .mustCheck-li li {padding: var(--space-24); border: 1px solid hsl(var(--color-border)); border-radius: var(--radius-lg); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px; background-color: hsl(var(--color-white));}
.mustCheck .inner .mustCheck-li span {width: var(--space-48); height: var(--space-48); border-radius: 9999px; background-color: hsl(var(--color-accent)); display: flex; align-items: center; justify-content: center; color: hsl(var(--color-accent-foreground)); font-size: var(--text-30); font-variation-settings: 'wght' 300; margin: 0 auto;}
.mustCheck .inner .mustCheck-li h3 {font-size: var(--text-16); font-weight: 600; color: hsl(var(--color-primary)); margin-top: var(--space-16); line-height: 1.5;}
.mustCheck .inner .mustCheck-li p {font-size: var(--text-15); color: hsl(var(--color-muted-foreground)); margin-top: var(--space-8);}


.mustCheck .inner>p {text-align: center; margin-top: var(--space-40); color: hsl(var(--color-muted-foreground));}
.mustCheck .inner>p span {font-weight: 700; color: hsl(var(--color-primary));}

@media screen and (min-width: 640px) {
  .mustCheck .inner .mustCheck-li {grid-template-columns: repeat(2, minmax(0, 1fr));}
}
@media screen and (min-width: 1024px) {
  .mustCheck .inner .mustCheck-li {grid-template-columns: repeat(5, minmax(0, 1fr));}
}

/* search */
.search .inner .search-con {margin-top: var(--space-48); display: grid; gap: var(--space-24);}
.search .inner .search-con .con {padding: var(--space-32); border: 1px solid hsl(var(--color-border)); border-radius: var(--radius-lg); box-shadow: rgba(0, 0, 0, 0.05) 0px 1px 4px;}

.search .inner .search-con .con .tit {display: flex; gap: var(--space-12); align-items: center;}
.search .inner .search-con .con .tit span {width: var(--space-40); height: var(--space-40); border-radius: 9999px; background-color: hsl(var(--color-muted)); display: flex; align-items: center; justify-content: center; color: hsl(var(--color-muted-foreground)); font-size: var(--text-30); font-variation-settings: 'wght' 300;}
.search .inner .search-con .con .tit h3 {font-size: var(--text-20); font-weight: 600; color: hsl(var(--color-primary)); line-height: 1.75;}
.search .inner .search-con .con ul {margin-top: var(--space-24); display: flex; flex-direction: column; gap: var(--space-12);}
.search .inner .search-con .con ul li {display: flex; align-items: center; gap: var(--space-12); color: hsl(var(--color-muted-foreground));}
.search .inner .search-con .con ul li span {color: hsl(var(--color-muted-foreground));}

.search .inner .search-con .con.on {background-color: hsl(var(--color-accent) / .05); border: 1px solid hsl(var(--color-accent) / .3);}
.search .inner .search-con .con.on .tit span {background-color: hsl(var(--color-accent)); color: hsl(var(--color-accent-foreground));}
.search .inner .search-con .con.on ul li {color: hsl(var(--color-primary));}
.search .inner .search-con .con.on ul li span {color: hsl(var(--color-accent));}
@media screen and (min-width: 768px) {
  .search .inner .search-con {grid-template-columns: repeat(2, minmax(0, 1fr));}
}

/* manage */
.manage {background-color: hsl(var(--color-primary));}
.manage .inner .section-tit .sub-tit {justify-content: center;}
.manage .inner .section-tit .sub-tit .tit {color: hsl(var(--color-primary-foreground));}
.manage .inner .section-tit .main-tit h2 {color: hsl(var(--color-primary-foreground)); text-align: center;}
.manage .inner .section-tit .main-tit p {color: hsl(var(--color-primary-foreground) / .7); text-align: center;}

@media screen and (min-width: 671px) {
.manage .inner .section-tit .main-tit p {white-space: pre-line;}
}
/* faq */
.faq .inner .section-tit .sub-tit {justify-content: center;}
.faq .inner .section-tit .main-tit {text-align: center;}
.accordion {margin: var(--space-80) auto 0 auto;}
.accordion .accordion-item {
  border-bottom: 1px solid #e5e5e5;
}
.accordion .accordion-item button[aria-expanded='true'] {
  border-bottom: 1px solid #005ffd;
  opacity: 1;
}
.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: var(--space-20);
  color: hsl(var(--color-primary));
  font-size: var(--text-16);
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
  transition: color 200ms linear; 
  display: flex;
  justify-content: space-between;
}
/* 1. 기본 타이틀 세팅 (상속 및 애니메이션) */
.accordion button h3.accordion-title {
  margin: 0;
  padding: 0;
  display: inline;
  font-size: var(--text-lg);
  font-weight: 600;
  color: inherit; /* 부모인 button의 컬러를 그대로 상속 */
  transition: color 200ms linear; /* 부드러운 색상 전환 */
  display: flex; align-items: center; gap: var(--space-12);
}
.accordion button h3 em {color: hsl(var(--color-accent)); font-weight: 600;}

.accordion button .arrow {transition: transform .3s ease;}
.accordion button[aria-expanded="true"] .arrow {
  transform: rotate(180deg);
}

/* 2. [기본/닫힘 상태] 마우스 호버 시 파란색으로 변경 */
.accordion button[aria-expanded='false']:hover,
.accordion button[aria-expanded='false']:hover h3.accordion-title {
  color: #2F79F5;
  cursor: pointer;
  opacity: 1;
}

/* 3. [열림 상태] 클릭해서 열렸을 때는 마우스가 떠나도 파란색 고정 */
.accordion button[aria-expanded='true'],
.accordion button[aria-expanded='true'] h3.accordion-title {
  color: #2F79F5;
}

/* 4. [닫힘 상태] 평소 기본 색상 지정 */
.accordion button[aria-expanded='false'],
.accordion button[aria-expanded='false'] h3.accordion-title {
  color: hsl(var(--color-primary));
}

/* 5. 클릭 후 포커스로 인한 색상 꼬임 방지 */
.accordion button:focus {
  outline: none;
}

.accordion button[aria-expanded='true'] {
  color: #005ffd;
}
.accordion button[aria-expanded='true'] .icon::after {
  width: 0;
}
.accordion button[aria-expanded='true'] + .accordion-content {
  opacity: 1;
  /* max-height: 9rem; */
  transition: 200ms linear;
  will-change: opacity, max-height;

}
.accordion .accordion-content {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}
.accordion .accordion-content p {
  font-size: var(--text-16);
  font-weight: 500;
  padding: var(--space-20);
  background-color: #F5F8FF;
  color: hsl(var(--color-muted-foreground));
}

@media (min-width: 768px) {	
  .accordion {width: 90%;}
}
@media (min-width: 1024px) {
  .accordion {width: 80%;}
}

/* contact */
.contact {background-color: #4071db;}
.contact .inner .section-tit .sub-tit {justify-content: center;}
.contact .inner .section-tit .sub-tit .section-number {color: hsl(var(--color-accent-foreground));}
.contact .inner .section-tit .sub-tit .line {background-color: hsl(var(--color-accent-foreground) / .3);}
.contact .inner .section-tit .sub-tit .tit {color: hsl(var(--color-accent-foreground) / .6);}
.contact .inner .section-tit .main-tit h2 {color: hsl(var(--color-primary-foreground)); text-align: center; font-size: var(--text-48);}
.contact .inner .section-tit .main-tit p {color: hsl(var(--color-primary-foreground) / .7); text-align: center;}

.contact .inner .btn-group {display: flex; gap: var(--space-16); flex-wrap: wrap; align-items: center; justify-content: center; margin-top: var(--space-40);}
.contact .inner .btn-group .btn-outline {border: 1px solid hsl(var(--color-accent-foreground) / .3); background-color: transparent; color: hsl(var(--color-accent-foreground));}
.contact .inner .btn-group .btn-outline span {color: hsl(var(--color-accent-foreground));}
.contact .inner .btn-group .btn-outline:hover {background-color: hsl(var(--color-accent-foreground) / .1);}
.contact .inner .btn-group .btn-secondary {background-color: hsl(var(--color-primary)); border: none;}
.contact .inner .btn-group .btn-secondary:hover {background-color: hsl(var(--color-primary) / .8);}

.contact .inner .ps {margin-top: var(--space-24); font-size: var(--text-14); color: hsl(var(--color-accent-foreground) / .6); text-align: center;}



/* footer css */
footer {padding-top: var(--space-48); padding-bottom: var(--space-64);}
.footer-wrap {display: flex; flex-direction: column; gap: var(--space-60);}
.footer-wrap .footer-top {display: flex; justify-content: space-between; gap: var(--space-16); flex-wrap: wrap; align-items: center;}
.footer-wrap .footer-top .footer-logo {font-size: 0;}
.footer-wrap .footer-top .footer-logo img {width: 150px;}

.footer-wrap .footer-top .btn-group button {line-height: var(--lh-loose);}
.footer-wrap .footer-top .btn-group button:hover {background-color: hsl(var(--color-accent));}

footer .footer-wrap .footer-bottom {padding: var(--space-30); border-top: 1px solid #E5E5E5; margin-top: var(--space-40); padding-top: var(--space-40); display: flex; flex-wrap: wrap; justify-content: space-between;}
footer .footer-wrap .footer-bottom .company-name {font-size: var(--text-16); color: hsl(var(--color-primary)/ .9); font-weight: 700; width: 100%; margin-bottom: var(--space-12);}
footer .footer-wrap .footer-bottom .dlBox {display: flex; gap: 0 var(--space-20); flex-wrap: wrap;}
footer .footer-wrap .footer-bottom .dlBox dl {display: flex; gap: 0 5px;}
footer .footer-wrap .footer-bottom .dlBox dl dt {font-weight: 700; color: hsl(var(--color-primary) / .7); font-size: var(--text-15);}
footer .footer-wrap .footer-bottom .dlBox dl dd {color: hsl(var(--color-primary) / .6); font-size: var(--text-15);}

footer .footer-wrap .footer-bottom .copy {color: hsl(var(--color-muted-foreground)); font-size: var(--text-12); width: 100%; margin-top: var(--space-16);}

@media (min-width: 768px) {
  /* .footer-wrap .footer-top {display: grid; grid-template-columns: repeat(3, 1fr);} */
  .footer-wrap .footer-bottom .copyright p{text-align: center;}
}
@media (min-width: 1024px) {
  .footer-wrap .footer-top .footer-logo img {width: 100%;}
}
@media (min-width: 1280px) {
  footer .footer-wrap .footer-bottom .copy {margin-top: 0; margin-left: var(--space-12); width: auto;}
}
/* footer 끝 */