@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}
ul,li,ol {list-style: none;}
a {
  color: #fff !important;
  text-decoration: none !important;
  outline: none !important;
}
html {scroll-padding-top: 4.5rem;}
body {
    position: relative;
    font-family: 'Pretendard' !important;
}
h2 {
  font-size: 3rem !important;
  font-weight: 700 !important;
}
.section-heading {
  padding-bottom : 50px;
  text-align: center;
}
.page-section {padding: 8rem 0;}
img {max-width: 100%;}

@media (min-width: 768px) {
  section {
    padding: 9rem 0;
  }
}
.btn-xl {
  padding: 1.25rem 2.5rem;
  font-size: 1.125rem;
  font-weight: 700;
}

.btn-social {
  height: 2.5rem;
  width: 2.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 100%;
}
#mainNav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  background-color: #000941;
}
#mainNav .navbar-toggler {
  padding: 0.75rem;
  font-size: 0.75rem;
  text-transform: uppercase;
  font-weight: 700;
}

#mainNav .navbar-nav .nav-item .nav-link {
  font-size: 0.95rem;
  color: #fff;
  letter-spacing: 0.0625em;
}
#mainNav .navbar-nav .nav-item .nav-link.active, #mainNav .navbar-nav .nav-item .nav-link:hover {
  color: #ffe75e !important;
}
#mainNav .navbar-brand img {
  height: 2.5rem;
  transition: height 0.3s ease-in-out;
}
@media (min-width: 992px) {
  #mainNav {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    border: none;
    background-color: transparent;
    transition: padding-top 0.3s ease-in-out, padding-bottom 0.3s ease-in-out;
  }
  #mainNav .navbar-brand {
    font-size: 1.5em;
    transition: font-size 0.3s ease-in-out;
  }
  #mainNav.navbar-shrink {
    padding-top: 1rem;
    padding-bottom: 1rem;
    background-color: #000941;
  }
  #mainNav.navbar-shrink .navbar-brand {
    font-size: 1.25em;
  }
  #mainNav .navbar-nav .nav-item {
    margin-right: 1rem;
  }
  #mainNav .navbar-nav .nav-item:last-child {
    margin-right: 0;
  }
}
header.masthead {
  text-align: center;
  color: #fff;
  background-image: url("../image/main_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  height: 1024px;
}
.masthead .container {height: 700px;}
.masthead .main-text {
  font-size: 3rem;
  color: #000942;
  font-weight: 700;
  background-color: #fff;
  width: 50%;
  text-align: center;
  margin: 5rem auto 2rem auto;
}
.masthead .sub-text {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: 7rem;
}
.masthead .right-box {
  height: 350px;
  background-color: #fff;
  border-radius: 20px;
}
.fixed-bottom {
  background-color: #1d1d1d;
  color: #fff;
}
.font75 {
  font-size: 1.25rem;
  font-weight: 700;
}
.fixed-bottom  .back-blue {
  animation: flash-blue-to-red 2s infinite;
  /*background-color: #000941;*/
  text-align: center;
}
.fixed-bottom  .back-red {
  animation: flash-red-to-blue 2s infinite;
  /*background-color: #FF4141;*/
  text-align: center;
}

/* 파랑 -> 빨강으로 변하는 애니메이션 */
@keyframes flash-blue-to-red {
  0%, 100% { background-color: #000941; }
  50% { background-color: #FF4141; }
}

/* 빨강 -> 파랑으로 변하는 애니메이션 */
@keyframes flash-red-to-blue {
  0%, 100% { background-color: #FF4141; }
  50% { background-color: #000941; }
}

.back-blue img, .back-red img {width: 1.5rem; height: 1.5rem; margin-right: 1rem;}
.fixed-bottom  .back-yellow span {font-size: 1rem; font-weight: 500;}
.fixed-bottom .db_f {padding: 0 120px;}
#services {
  text-align: center;
  color: #fff;
  background-image: url("../image/services_bg.png");
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: #fff;
}
#services .box-line {
  box-shadow: 0 0 5px rgba(255, 255, 255, 0.15);
  border-radius: 20px;
  padding: 1rem 0 1rem 1.5rem;
  background-color: rgba(0, 0, 0, 0.25);
}
.services_main {
    font-size: 1.5rem;
    font-weight: 700;
}

#portfolio {
  background-image: url("../image/portfolio_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
/* 롤링 트랙 설정 */
.rolling-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    margin: 0 auto;
}

.rolling-track {
    /* (이미지 너비 300px + 여백) * 10개 = 3000px 이상 넉넉히 설정 */
    width: calc(350px * 10); 
    animation: scroll-left 30s linear infinite; /* 30초 동안 왼쪽으로 무한 이동 */
}

/* 개별 아이템 너비 (PC 기준) */
.rolling-item {
    width: 350px;
    flex-shrink: 0;
}

/* 마우스 올리면 멈추게 함 (사용자 편의성) */
/* .rolling-track:hover {
    animation-play-state: paused;
} */

/* 애니메이션 로직: 이미지 5개 분량만큼 이동 후 처음으로 리셋 */
@keyframes scroll-left {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-300px * 5)); }
}

#about {
  background-image: url("../image/about_bg.png");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  color: #fff;
}
#about h2 {padding: 3rem 0; font-style: italic;}
#about .con-text {font-size: 1.25rem;} 
#about .con-text b {font-size: 1.4rem; font-style: italic;}

#contact {background-color: #f9f9f9;}
#contact .free_counsel {
  background: #000945;
  color: #fff;
  border: none;
}
#contact .free_counsel:hover {
  background: #000e68;
}
#contact .form_title {
  font-size: 1.5rem;
  font-weight: 700;
}
#contact #event_form {
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

/* 롤링 위젯 커스텀 스타일 */
.case-status-wrapper {
    background: #fff;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
}
.case-header {
    background:linear-gradient(#0056b3,#000941);
    color: #fff;
    padding: 15px;
    font-weight: 700;
    text-align: center;
    font-size: 1.5rem;
}
.case-scroll-area {
    flex-grow: 1;
    min-height: 350px; /* 폼 높이에 맞춰 자동 조절되지만 최소 높이 지정 */
    overflow: hidden;
    position: relative;
}
.case-list {
    margin: 0; padding: 0; list-style: none;
    position: absolute; top: 0; width: 100%;
}
.case-item {
    padding: 15px 20px;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    font-size: 0.95rem;
}
.case-status { 
    color: #000941; 
    font-weight: 600;
    background: #f5f8ff;
    padding: 2px 8px;
    border-radius: 4px;
}
.animate { transition: top 0.6s ease-in-out; }

#map {
  background: linear-gradient(#000941, #000000);
  color: #fff;
}
#map h3 span {color: #ffea72;}
#map .address, #map .hour {font-size:1.5rem}
#map iframe {
  height: 400px !important;
  min-height: 400px;
  max-height: 400px;
}

footer {
  background-color: #141414;
  font-size: 0.9rem;
  color: #fff;
  padding: 1rem 0 5.5rem 0;
}
footer ul,li {padding-left: 0
  ;}
footer img {height: 2.5rem !important;}

/* 개인정보처리방침 */
.modal .modal-header div{font-size: 1.4rem !important; font-weight: 600;}
.modal .modal-header .btn-close{margin: 0 !important;}
.modal .modal-body{
	height: 360px;
	overflow-y: scroll;
	text-align: start;
	font-size: 1rem;
	font-weight: 400;
	font-family: 'Pretendard';
}
.modal .modal-body hr{border-color: #aaa;}
.modal .modal-body .modal-div .title{
	margin: 10px 0 !important;
	font-size: 1.2rem !important;
	color: #0056b3;
}
.modal .modal-body .modal-sub{
	background: #eef6ff;
	padding: 5px;
	margin-top: 4px;
}
.modal .modal-body .modal-sub p{font-size: 0.9rem !important;}
.form-control:disabled, .form-control[readonly] {
    background-color: #fff;
    opacity: 1;
}
/* 모달 내의 이용약관 텍스트 스타일 수정 */
#terms_modal .modal-body {
    max-height: 500px; /* 모달 높이가 너무 커지지 않게 조절 */
    overflow-y: auto;
}

#terms_modal h4 {
    font-size: 1.1rem;
    color: #ffe75e;
    margin-top: 15px;
}

@media (max-width: 1200px) {
  header.masthead {
    height: 800px;
  }
  .masthead .container {height: 700px; align-items: center;}
  .fixed-bottom  .back-yellow span {font-size: 1rem; font-weight: 500;}
  .fixed-bottom .db_f {padding: 0 70px;}
  .masthead .left-box img {width: 70%;}
  .masthead .container {padding-top: 70px;}
  .form-check button {
    font-size: 0.9rem;
    padding: 0 !important;
    margin: 0 !important;
  }
  #services .box-line {
    padding: 1rem;
  }
}
@media (max-width: 999px) {
  header.masthead {
    height: 800px;
  }
  .masthead .container {height: 700px; align-items: center;}
  .fixed-bottom  .back-yellow span {font-size: 1rem; font-weight: 500;}
  .fixed-bottom .db_f {padding: 0 70px;}
  .masthead .left-box img {width: 70%;}
  .masthead .container {padding-top: 70px;}
  .form-check button {
    font-size: 0.9rem;
    padding: 0 !important;
    margin: 0 !important;
  }
  #services {
    background-image: url("../image/services_bg.png");
    background-position: center right;
  }
  #services .box-line {padding: 1rem;}
  #services .row {
    flex-direction: column !important;
    padding: 0 1rem;
  }
  .rolling-track {
      /* (이미지 너비 300px + 여백) * 10개 = 3000px 이상 넉넉히 설정 */
      width: calc(280px * 10); 
      animation: scroll-left 60s linear infinite; /* 30초 동안 왼쪽으로 무한 이동 */
  }
  .rolling-item {
    width: 280px;
    flex-shrink: 0;
  }
  #contact {padding: 3rem 0 !important;}
  #contact .container .row {
    flex-direction: column;
    align-content: center;
  }

  #map .container {
    flex-direction: column;
    gap: 1.5rem;
  }
  #map .map_con {
    margin: 0 !important;
  }
}
@media (max-width: 750px) {
  .fixed-bottom .db_f {
    padding: 0 16px;
  }
  /* 1. 부모 컨테이너를 가로에서 세로 정렬로 변경 */
  header.masthead .container.row {
    flex-direction: column;
    height: auto; /* 내용에 맞게 높이 조절 */
    padding: 2rem 1rem;
  }

  /* 2. 각 박스의 너비를 100%로 확장 (Bootstrap col 클래스 덮어쓰기) */
  .masthead .left-box.col-8, 
  .masthead .right-box.col-4 {
    width: 100% !important;
    margin-bottom: 2rem; /* 박스 사이 간격 */
  }

  /* 3. 모바일에서의 텍스트 크기 및 너비 최적화 */
  .masthead .main-text {
    width: 90%; /* 50%는 모바일에서 너무 좁을 수 있음 */
    font-size: 2rem;
    margin: 1.5rem auto;
  }

  .masthead .sub-text {
    font-size: 1.1rem;
    margin-bottom: 0;
    word-break: keep-all; /* 한글 줄바꿈 예쁘게 */
  }

  /* 4. 마스트헤드 전체 높이 조절 (모바일 대응) */
  header.masthead {
    height: auto; 
    min-height: 700px;
    padding-top: 100px;
  }
}

@media (max-width: 500px) {
    /* 가로 스크롤 방지를 위한 기본 설정 */
    html, body {
        overflow-x: hidden;
        width: 100%;
        position: relative;
    }

    h2 { font-size: 1.25rem !important; }
    h3 { font-size: 1.1rem !important; }
    .page-section { padding: 3rem 0; }
    .section-heading { padding-bottom: 1.5rem; }
    
    #mainNav { padding: 0.5rem 1rem; }
    #mainNav .navbar-brand img { height: 1.5rem; }
    
    /* 하단 고정 바 및 버튼 */
    .back-blue img, .back-red img { width: 1rem; height: 1rem; }
    .call_btn .font75 { display: flex; flex-direction: column; font-size: 1rem; }
    .fixed-bottom .back-blue span,
    .fixed-bottom .back-red span { font-size: 0.8rem; }
    
    /* 서비스 섹션 박스 */
    .services_main { font-size: 1.2rem; }
    #services .box-line { padding: 0.5rem; }
    
    /* 롤링 트랙: 가로 너비가 뚫고 나가지 않도록 수정 */
    .rolling-track {
        width: calc(200px * 10); 
        animation: scroll-left 40s linear infinite;
    }
    .rolling-item {
        width: 200px;
        flex-shrink: 0;
    }

    #about h2 { padding: 1.25rem 0; }
    #about .con-text { font-size: 1rem; } 
    #about .con-text b { font-size: 1.1rem; font-style: italic; }
    
    #contact #event_form, #contact .case-status-wrapper { border-radius: 1rem !important; }
    .case-header { font-size: 1.15rem; }
    .case-item {
        display: flex;
        flex-direction: column;
        padding: 0.5rem 1rem;
        font-size: 0.8rem;
    }
    .case-status { padding: 2px 0; }
    
    #map iframe {
        height: 250px !important;
        min-height: 250px;
        max-height: 250px;
    }
    #map .address, #map .hour { font-size: 1rem; }
    #map .address { margin: 1rem 0 1.5rem 0 !important; }
    
    /* 푸터: 텍스트가 넘치지 않도록 줄바꿈 처리 */
    footer { padding: 1rem 0 20rem 0; word-break: keep-all; }
    footer ul li { font-size: 0.8rem; line-height: 1.4; }

    /* PC 전용 요소 숨기기 (필요한 경우 클래스 추가) */
.pc-only {
        display: none !important;
        width: 0 !important;   /* 부피 제거 */
        height: 0 !important;  /* 부피 제거 */
        margin: 0 !important;  /* 여백 제거 */
        padding: 0 !important; /* 여백 제거 */
        overflow: hidden !important;
    }
	/* 버튼 컨테이너 여백 강제 제거 */
    .call_btn .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }
}