@font-face {
    font-family: 'GowunDodum-Regular';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/GowunDodum-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

.gnb-list > li:nth-child(3) { font-weight: 900; }

.customer-page { padding-top: 98px; }

.process-group { display: flex; justify-content: space-between; align-items: flex-start; column-gap: 30px; max-width: 1440px; margin: 0 auto; padding: 40px 0; }
.process-card { display: flex; flex-direction: column; align-items: center; width: 200px; position: relative; }
.process-card::after {content:"❯";position:absolute;right:-20px;top:70px;transform:translateY(-50%);font-size:20px;color:#ccc;}
.process-card:last-child::after {content:none;}
.process-card > h3 { margin-top: 20px; font-size: 18px; }
.process-desc { line-height: 1.6; font-size: 14px; margin-top: 10px; }
.process-desc li { position: relative; padding-left: 7px; text-indent: -7px; }
.process-desc li::before { content:"· "; }
.process-icon { position: relative; width: 150px; height: 150px; border-radius: 50%; background-color: #d9d9d9; overflow: hidden; }
.process-icon img { width: 100%; max-width: 60px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }

.section-subtitle { font-size: 14px; }

.faq-slider { max-width: 1440px; margin: 50px auto; } 
.faq-card { border-bottom: 1px dashed #cdcdcd; padding: 3px; } 
.faq-title { display: flex; justify-content: space-between; align-items: center; padding: 10px 20px; cursor: pointer; } 
.faq-title h3 { margin: 0; font-size: 1.1rem; display: flex; } 
.faq-title h3 > p { font-size: 17px; color: #000; }
.faq-title h3 > span { font-size: 30px; color: #0486FF; margin-right: 20px; transition: all 0.3s ease; } 
.faq-toggle { font-size: 30px; transition: color 0.3s ease; }
.faq-card.active .faq-toggle { color: #007acc; }
.faq-content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, opacity 0.4s ease; opacity: 0; }
.faq-content p { padding-left: 10px; border-left: 2px solid rgb(177, 177, 177); margin: 20px 20px 20px 80px; transition: all 0.3s; }
.faq-card.active .faq-content { max-height: 500px; opacity: 1; }
.faq-card:hover h3 > span { color: #f00 }
.faq-card:hover .faq-content p { border-left: 2px solid #f00;}

.review-group { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; max-width: 1440px; margin: 0 auto; padding: 40px 20px; }
.review-card { display: flex; column-gap: 20px; align-items: center; font-family: 'GowunDodum-Regular'; font-weight: bold; width: 31%; padding: 20px; border-radius: 12px; color: #333; font-size: 0.95rem; box-shadow: 0 2px 6px rgba(0,0,0,0.1); transition: transform 0.3s ease; line-height: 1.6; }
.review-card:hover { transform: translateY(-5px); }
.customer-img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; flex-shrink: 0; margin-top: 4px; }
.review-text { flex: 1; }
.review-sendbtn { display: flex; justify-content: flex-end; align-items: center; }
.review-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 20px; border-radius: 30px; font-weight: 400; font-size: 14px; transition: all 0.3s ease; column-gap: 10px; background-color: #d5d5d5; color: #484848; }

.prepare-group { display: flex; justify-content: space-between; align-items: center; max-width: 1440px; margin: 0 auto; padding: 40px 20px; }
.prepare-btn { width: calc(100% / 4 - 30px); background-color: #e6e6e6; border-radius: 20px; transition: all 0.3s ease; }  
.prepare-btn:hover { background-color: #a7a7a7; }
.prepare-btn a { display: block; width: 100%; height: 100%; padding: 30px; }
.download a { background-image: url('../images/common/btn-download.png'); background-repeat: no-repeat; background-position: right 20px center; }
.newwin a { background-image: url('../images/common/btn-newwin.png'); background-repeat: no-repeat; background-position: right 20px center; }

.processsect.blur-active {
  filter: blur(3px);
  transition: filter 0.5s ease;
}
.processsect {
  transition: filter 0.5s ease;
  opacity: 0.96;
}

/* 드래그 힌트 fixed 중앙 표시 */
#dragHint {
  display: block;
  position: absolute;
  top: 330px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
  pointer-events: none;
  animation: fade-in-out 2s ease-in-out forwards;
}

#dragHint img {
  width: 80px;
  height: auto;
  animation: dragMove 1.5s ease-in-out forwards;
}

@keyframes dragMove {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { transform: translateX(0); opacity: 1; }
  30%  { transform: translateX(-40px); }
  60%  { transform: translateX(40px); }
  90%  { transform: translateX(0px); opacity: 1; }
  100% { transform: translateX(0px); opacity: 0; }
}

@keyframes fade-in-out {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

@media (max-width: 480px){
	.review-card { width: 100%; }
	.processsect { width: 100%; overflow-x: auto; }
}