@charset "utf-8";

.anker-label{
  font-size:14px;
  width:fit-content;
  padding:0 8px ;
  border:0.5px solid #000000;
}

.service-anker-wrap{
  display:flex;
  gap:2rem 5rem;
  flex-wrap:wrap;
  margin:20px 0 4rem;
}

.service-anker-wrap a{
  display:flex;
  align-items:center;
  gap:14px;
  font-size:clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  padding-bottom:6px;
  position:relative;
}

.service-anker-wrap a::before{
  content:"";
  position:absolute;
  width:0;
  height:0.3px;
  background:#000000;
  transition:0.3s;
  bottom:0;
  left:0;
}

.service-anker-wrap a:hover::before{
  width:100%;
}

.service-anker-wrap a img{
  width:8px;
}

.blue-bg-white{
  width:90%;
  background:#FFFFFF;
  border-radius:10px;
  padding:200px 10% 160px;
  margin:0 auto 160px;
}

.top-service-wrap{
  margin-bottom:3rem;
}

.top-service-txt{
  position: relative;
  z-index: 1;
}

.top-service-txt::before{
  content:"01";
  position:absolute;
  left:-2rem;
  top: -2rem;
  font-size: clamp(1.5rem, -0.227rem + 5.76vw, 6.25rem);
  color: #E5EFFF;
  font-weight: 700;
  z-index: -1;
  line-height: 1;
}

.top-service-txt h2{
  font-size: clamp(1.5rem, 1.136rem + 1.21vw, 2.5rem);
  margin: 0 0 2rem;
}

.top-service-wrap > img{
  width: 55%;
}

.top-service-txt {
  width: 40%;
}

.date-bg-wrap{
  display:flex;
  justify-content: space-between;
  max-width: 1240px;
  margin: 0 auto;
}

.date-bg-wrap .date-bg{
  width: 47.5%;
  max-width: 580px;
  padding: 50px 3% 100px;
  text-align:center;
}

.date-bg h3 {
  font-size: clamp(1.125rem, 0.989rem + 0.45vw, 1.5rem);
  margin-bottom: 3rem;
}

.date-wrap2 {
  margin-top: 3rem;
}

.date-wrap2 img {
  width: 75px;
}

.date-item img {
  margin-bottom: 10px;
  height: 100px;
}

.date-item{
  max-width: 110px;
}

.second{
  margin-top:140px;
}

.second .top-service-txt::before{
  content:"02";
}

.third .top-service-txt::before{
  content:"03";
}

.fourth .top-service-txt::before{
  content:"04";
}

.fourth{
  margin-bottom:140px;
}

.fifth {
  margin-top:80px;
}

.fourth .top-service-txt h3 + div p,
.fifth .top-service-txt h3 + div p{
  padding:0;
  margin:0;
}

.fourth .top-service-txt h3 + div p::before,
.fifth .top-service-txt h3 + div p::before{
  display:none;
}

.fifth .top-service-txt::before{
  content:"05";
}

.top-service-txt h3{
  font-size:18px;
  color:#fff;
  background:#000;
  padding:4px 8px;
  border-radius:0;
  margin:2.5rem 0 20px;
}

.top-service-txt h3 + div p{
  margin-top:1rem;
  padding-left:1rem;
  position:relative;
}

.top-service-txt h3 + div p::before{
  content:"";
  position:absolute;
  width:5px;
  height:5px;
  background:#000;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.service-feature{
  margin:5rem 0;
}

.service-feature h3{
  font-size:clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
}

.service-feature-item{
  margin-top:2.5rem;
  padding:4rem 5% 5rem;
  background:#F5F9FF;
  border-radius:10px;
}

.service-feature-item h4{
  font-size:clamp(1.25rem, 1.068rem + 0.61vw, 1.75rem);
  margin-bottom:1rem;
  position:relative;
}

.service-feature-item h4::before{
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: #154C83;
  top: 50%;
  left: -1rem;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.service-flow{
  max-width:750px;
  margin:0 auto;
}

.service-flow h3{
  font-size:clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
  text-align:center;
}

.service-flow-item{
  display:flex;
  background:#FFFFFF;
  border-radius:10px;
  box-shadow:3px 3px 9px rgba(0,0,0,0.16);
  margin-top:60px;
}

.service-flow-left{
  width:30%;
  color:#fff;
  text-align:center;
  background: #0A3B8B;
  border-radius: 5px 0 0 5px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-size:14px;
}

.service-flow-left p:last-child{
  font-size:clamp(1.5rem, 0.909rem + 1.97vw, 3.125rem);
  line-height:1;
}

.service-flow-right{
  width:70%;
  padding: 3.5rem 5%;
}

.service-flow-right h4{
  font-size:clamp(1.125rem, 0.898rem + 0.76vw, 1.75rem);
  color:#0A3B8B;
  margin-bottom:1rem;
}

.recruit-service{
  margin-top:100px;
}

.recruit-service-wrap{
  display: flex;
  justify-content: space-between;
  max-width:1080px;
  margin:0 auto;
}

.recruit-service-item{
  width:30%;
  max-width:300px;
  text-align:center;
  color:#0A3B8B;
  font-size:clamp(0.875rem, 0.739rem + 0.45vw, 1.25rem);
}

.recruit-service-item img{
  max-width:230px;
  margin:0 auto 1.5rem;
}

.recruit-service h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  text-align:center;
  margin-bottom: 4rem;
}

.case{
  margin-top:5rem;
}

.case h3{
  font-size: clamp(1.5rem, 1.318rem + 0.61vw, 2rem);
}

.case h4{
  font-size: clamp(1.25rem, 1.068rem + 0.61vw, 1.75rem);
  margin:4rem 0 2rem;
  padding-left:1rem;
  position: relative;
}

.case h4::before{
  content: "";
  position: absolute;
  width: 9px;
  height: 9px;
  background: #154C83;
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.case h4 em{
  font-size:1rem;
}

.case-wrap{
  display: flex;
  justify-content: space-between;
}

.case-item{
  width:30%;
  border-radius:10px;
  padding:2.5rem 3% 3.5rem;
  background:#fff;
  box-shadow:3px 3px 9px rgba(0,0,0,0.16);
  max-width: 380px;
  position:relative;
}

.case-item::before{
  content:"";
  position:absolute;
  width: 12%;
  aspect-ratio: 45 / 40;
  right: -20%;
  top: 50%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  background:url(https://t-style-of.com/system_panel/uploads/images/20260224124916641808.png) no-repeat center/contain;
}

.case-item:last-child::before{
  display:none;
}

.case-item h5{
  color:#0A3B8B;
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  padding-bottom:1rem;
  margin-bottom:2.5rem;
  background-image: repeating-linear-gradient(90deg, #0a3b8b, #0a3b8b 5px, transparent 5px, transparent 10px);
  background-position: left bottom;
  background-repeat: repeat-x;
  background-size: 100% 1px;
}

.case-item .accent p{
  margin-top: 0.5rem;
  padding-left: 1rem;
  position: relative;
}

.case-item .accent p::before{
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  background: #000;
  top: 50%;
  left: 0%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.menu{
  background:#C2E2DE;
  padding:5rem 5% 7.5rem;
  border-radius:10px;
  text-align:center;
  margin-top:140px;
}

.menu h3{
  font-size:clamp(1.25rem, 0.977rem + 0.91vw, 2rem);
  margin-bottom:100px;
}

.menu-wrap{
  display:flex;
  justify-content: space-between;
}

.menu-item{
  font-size:clamp(0.875rem, 0.739rem + 0.45vw, 1.25rem);
  width:20%;
}

.menu-item img{
  aspect-ratio:190/131;
  max-width: 187px;
  margin: 0 auto 1rem;
}


@media screen and (max-width: 1850px) {
  .case-item::before{
    width: 10%;
    right: -15%;
  }
}

@media screen and (max-width: 1600px) {
  .date-wrap{
    flex-wrap: wrap;
    gap: 2rem 5%;
    max-width: 400px;
  }
  .date-item {
    max-width: none;
    width: 45%;
  }
}

@media screen and (max-width: 1280px) {
  .menu{
    padding: 3rem 5% 5rem;
  }
  .menu h3{
    margin-bottom: 60px;
  }
  .service-anker-wrap{
    gap: 2rem 5%;
  }
  .service-anker-wrap a{
    width:47.5%;
  }
  .menu-wrap{
    flex-wrap: wrap;
    gap: 2rem 5%;
  }
  .menu-item{
    width: 47.5%;
  }
  .date-bg-wrap{
    flex-direction: column;
    gap: 1.5rem;
    align-items:center;
  }
  .date-bg-wrap .date-bg {
    width: 100%;
    padding: 30px 3% 40px;
  }
  .date-bg h3{
    margin-bottom:1rem;
  }
  .date-wrap2 {
    margin-top: 1rem;
  }
  .top-service-txt::before{
    left: -1rem;
    top: -1rem;
  }
}

@media screen and (max-width: 1024px) {
  .top-service-wrap > img {
    width: 100%;
  }
  .top-service-txt {
    width: 100%;
  }
  .blue-bg-white{
    padding: 60px 5% 100px;
  }
  .top-service-txt .accent {
    max-width: none;
  }
  .case-wrap{
    flex-direction: column;
    gap: 4rem;
  }
  .case-item {
    width: 100%;
    max-width: none;
    padding: 1.5rem 5% 2rem;
  }
  .case-item::before{
    right: auto;
    top: auto;
    left: 50%;
    transform: translateX(-50%) rotate(90deg);
    -webkit-transform: translateX(-50%) rotate(90deg);
    -ms-transform: translateX(-50%) rotate(90deg);
    bottom: -3rem;
    width: 2.5rem;
  }
  .case-item h5{
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
  }
  .recruit-service-wrap{
    flex-wrap: wrap;
    gap: 2rem 5%;
    justify-content: center;
  }
  .recruit-service-item {
    width: 47.5%;
  }
}


@media screen and (max-width: 767px) {
  .service-anker-wrap a {
    width: 100%;
    font-size: 1rem;
  }
  .service-anker-wrap {
    gap: 1rem 5%;
    margin: 20px 0 2rem;
  }
  .top-service-txt::before{
    font-size:3rem;
  }
  .top-service-txt h2{
    margin: 0 0 1rem;
  }
  .service-feature-item{
    padding: 2rem 5% 3rem 10%;
  }
  .service-feature-item h4 {
    font-size: 18px;
  }
  .service-flow-item{
    flex-direction: column;
  }
  .service-flow-left{
    border-radius: 5px 5px 0 0;
    padding: 1rem;
    width: 100%;
  }
  .service-flow-right {
    width: 100%;
    padding: 1.5rem 5%;
  }
  .service-flow-right h4{
    margin-bottom: 0.5rem;
  }
  .service-flow-item{
    margin-top: 30px;
  }
  .recruit-service-item {
    width: 100%;
  }
  .date-bg{
    padding: 30px 5% 50px;
  }
  .recruit-service {
    margin-top: 40px;
  }
  .case h4{
    margin: 1rem 0 1rem;
  }
  .fourth {
    margin-bottom: 80px;
  }
  .second {
    margin-top: 80px;
  }
  .fifth {
    margin-top: 40px;
  }
  .menu{
    margin-top: 80px;
    padding: 2rem 5% 3rem;
  }
  .menu-item img{
    width:80%;
  }
  .blue-bg-white {
    padding: 60px 5% 100px;
    margin-bottom: 5rem;
    width: 100%;
  }
  .menu h3 {
    margin-bottom: 30px;
  }
  .case-item::before{
    width:2rem;
  }
  .date-item img {
    margin-bottom: 10px;
    height: 80px;
  }
}