@charset "utf-8";

.case{
  margin:5rem 0 10rem;
}

.case .container{
  max-width:1280px;
}

.case-bg{
  padding-top:7.5rem;
}

.case-bg:first-child{
  margin-top:-5rem;
}

.case-bg{
  display: flex;
  align-items: stretch;
  gap: 5.5rem;
}

.case-bg .label{
  color:#2D96D9;
  font-size:18px;
  width:4rem;
  border-right:0.8px solid #D3D3D3;
  position:relative;
  padding-top: 1rem;
}

.case-bg .label::before{
  content:"";
  position:absolute;
  width:2px;
  height:4rem;
  background:#2D96D9;
  right:-1px;
  top:0;
}

.case-txt{
  width:calc(100% - 4rem - 5.5rem);
}

.case-txt h2{
  font-size:clamp(1.125rem, 0.667rem + 1.53vw, 2.5rem);
  margin-bottom:2.5rem;
}

.case-cate{
  margin-bottom:4rem;
  display:flex;
  gap:1rem;
  align-items:center;
}

.case-cate p:first-child{
  background:#DBEAF4;
  padding:8px 1rem;
  font-size:14px;
  line-height:1;
}

.case-item{
  margin-top:3rem;
}

.case-item h3{
  font-size:clamp(1.125rem, 1rem + 0.42vw, 1.5rem);
  margin-bottom:2rem;
}

@media screen and (max-width: 1024px) {
  .case-bg{
    gap: 3.5rem;
  }
  .case-txt {
    width: calc(100% - 4rem - 3.5rem);
  }
}

@media screen and (max-width: 767px) {
  .case-bg {
    gap: 1.5rem;
  }
  .case-bg .label{
    width: 3rem;
  }
  .case-txt {
    width: calc(100% - 3rem - 1.5rem);
  }
  .case-cate {
    margin-bottom: 2rem;
  }
  .case-cate p:first-child {
    padding: 4px 0.5rem;
  }
  .case-item h3{
    margin-bottom: 1rem;
  }
  .case-item {
    margin-top: 2rem;
  }
  .case-bg:first-child {
    margin-top: -5rem;
  }
  .case-bg {
    padding-top: 5rem;
  }
  .case {
    margin: 3rem 0 5rem;
  }
}