/* Main */
.main-visual {
  position: relative;
  height: 600px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}

/* 배경이미지를 별도의 내부 레이어로 */
.main-visual::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 1320px;
  height: 100%;
  background: url('../img/main-visual.png') top center / contain no-repeat;
  transform: translateX(-50%);
  z-index: 0;
}

/* 텍스트 */
.visual-text {
  position: relative;
  z-index: 2;
  padding: 0 12%;
}

.visual-text h1 {
  font-family: 'Spoqa Han Sans Neo', 'Pretendard', sans-serif;
  font-size: clamp(1.8rem, 3vw, 3rem);
  font-weight: 700;
  margin-bottom: 0.5rem;
  letter-spacing: -.05em;
  position: relative;

  text-shadow:
      0 0 2px rgba(0, 0, 0, 0.08),
      0 2px 4px rgba(0, 0, 0, 0.06),
      0 4px 6px rgba(0, 0, 0, 0.04);
}

/* 등장 애니메이션 */
.line {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeUp 0.8s ease forwards;
}

.line1 {
  color: #0064af;
  animation-delay: 0.5s;
}
.line2 {
  color: #4492cd;
  animation-delay: 1.2s;
}
.line3 {
  color: #113d5e;
  animation-delay: 2s;
}
.line4 {
  animation-delay: 2.8s;
}

@keyframes fadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Common */
.img-grayscale {
  filter: grayscale(100%);
}

/* 반응형 */
@media (max-width: 768px) {
  .main-visual {
    height: 50vh;
    min-height: 480px;
    margin-top: .5rem;
  }
  .main-visual::before {
    width: 100%;
    background-size: contain;
  }
  .visual-text h1 {
    font-size: 1.8rem;
  }
}

/* Page */
.contents {
  padding: 50px 0 100px;
}
.title {
  display: table;
  margin: 0 auto;
  margin-bottom: 2rem;
  color: #0064af;
  background-color: #fff;
  border-radius: 40px;
  padding: 1rem 3rem;
}
.con101 h2 {
  margin-bottom: 30px;
}
.con101 .text {
  line-height: 180%;
}
.con101 .text p {
  margin: 30px 0 40px 0;
  text-align: justify;
}

/* Team */
.team .card {
  height: 100%;
  margin-bottom: 1rem;
}

.team .photo {
  margin-bottom: 30px;
  padding: 20px 0;
  background: #eee;
  border: 1px solid #ccc;
  text-align: center;
}
.team .photo img {
  margin-bottom: 5px;
  padding: 5px;
  background: #fff;
  border: 1px solid #ccc;
}
.team .photo p {
  font-weight: bold;
}
.team .photo p span {
  margin-left: 5px;
  color: #000;
}
.team .con_box table {
  margin-bottom: 30px;
  width: 100%;
}
.team .con_box table thead {
  background: #eaf5fe;
  border-top: 2px solid #8ebbdd;
  border-bottom: 1px solid #8ebbdd;
}
.team .con_box table thead tr th {
  padding: 5px 0;
  color: #1c67a1;
  font-size: 14px;
}
.team .con_box table tbody tr {
  border-bottom: 1px dashed #ccc;
}
.team .con_box table tbody tr td {
  padding: 5px;
}

.team .profile {}
.team .profile h2 {
  margin-bottom: 20px;
  padding: 8px 0 8px 10px;
  border-top: 2px solid #8ebbdd;
  border-bottom: 1px solid #8ebbdd;
  background: #eaf4fc;
  color: #0064af;
  font-size: 14px;
}
.team .profile .con_l {
}
.team .profile .con_l img {
  padding: 5px;
  width: 120px;
  border: 1px solid #ccc;
  background: #fff;
}
.team .profile .con_l h3 {
  margin-bottom: 20px;
  padding: 10px 0;
  color: #333;
  font-size: 22px;
  text-indent: 10px;
  letter-spacing: 1px;
}
.team .profile .con_r {
}
.team .profile .con_r h4 {
  margin-bottom: 15px;
  padding-left: 20px;
  background: url(../../images/contents/con401_tit.gif) no-repeat 0 50%;
  color: #0064af;
  font-weight: bold;
  font-size: 14px;
}
.team .profile .con_r .text ul {
  margin-bottom: 30px;
}
.team .profile .con_r .text ul li {
  padding: 5px 0 5px 10px;
  background: url(../../images/contents/con401_dot.jpg) no-repeat 0 50%;
  border-bottom: 1px dotted #ccc;
}
/* services */
.services .con_box {
  max-width: 980px;
  margin: 0 auto;
  margin-bottom: 1rem;
  border: 1px solid #dedede;
  border-radius: 2rem;
  padding: 2rem;
  text-align: left;
}
.services .con_box h2 {
  margin-bottom: 15px;
  padding-left: 20px;
  color: #0064af;
  font-weight: bold;
  font-size: 18px;
}
.services .con_box ul {
}
.services .con_box ul li {
  font-size: 16px;
  line-height: 2;
}

/* Contact */
.contact .card {
  height: 100%;
}

/* Footer */
#footer .info {
  margin-bottom: 1rem;
}
#footer .info h1 {
  color: #a2a2a2;
  font-size: 16px;
}
#footer .info span:not(.end)::after{
  content: "|";
  display: inline-block;
  margin: 0 .5rem;
  opacity: 50%;
}
#footer .link a {
  font-size: 13px;
  color: #999;
}