.ebc-main02-card-banner {position: relative;padding:60px 0}
.ebc-main02-card-banner:after {content:"";position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-image:url("http://cleancat.myaboutd.shop/data/ebslider/eb4_busi_033/img/4f835a45a2de4aeefbbb8735343a3fb3.jpg");background-repeat:no-repeat;background-size:cover;background-position:center}
.ebc-main02-card-banner .container {position: relative;z-index:1}
/* 타이틀 */
.ebc-main02-card-banner .master-title {position: relative;margin-bottom:30px}
.ebc-main02-card-banner .master-title h3 {line-height: 1;font-size: 17px;letter-spacing:1px;font-weight: 600;color: #ddd}
.ebc-main02-card-banner .master-title h2 {margin-bottom:15px;line-height: 1.3em;font-size:21px;font-weight:900;color: #fff}
.ebc-main02-card-banner .master-title p {padding-left: 10px;line-height: 1.5em;font-size:15px;color: #fff;border-left:7px solid #eee}
@media (min-width:768px){
    .ebc-main02-card-banner .master-title {padding-right: 50px;border-right:3px solid #eee}
    .ebc-main02-card-banner .master-title h3 {position: absolute;top: 0;right: 20px;transform-origin:top right;transform:rotate(-90deg)}
}
@media (min-width:992px){
    .ebc-main02-card-banner {padding: 120px 0}
    .ebc-main02-card-banner .master-title {margin-bottom: 60px}
    .ebc-main02-card-banner .master-title h2 {margin-bottom: 20px;font-size: 41px}
    .ebc-main02-card-banner .master-title h3 {right: 30px;font-size: 19px}
    .ebc-main02-card-banner .master-title p {padding-left: 20px;font-size: 21px}
}
@media (min-width:1200px){
    .ebc-main02-card-banner:before {content:"";position: absolute;top: 50%;right: 0;transform:translateY(-50%);width: 100%;height: 85%;background: rgb(2,56,87);
    background: linear-gradient(90deg, rgba(2,56,87,1) 0%, rgba(238,238,238,1) 100%)}
    .ebc-main02-card-banner:after {left: -20%}
    .ebc-main02-card-banner .master-title {border-color:#bbb}
    .ebc-main02-card-banner .master-title h3 {color: #bbb}
}
@media (min-width:1400px){
    .ebc-main02-card-banner:after {left: -27%}
}
@media (max-width:767px){
    .ebc-main02-card-banner .master-title h3 {display: inline-block;margin-bottom: 14px;padding-left: 10px;font-size: 19px;border-left:7px solid #eee}
    .ebc-main02-card-banner .master-title h2 br,
    .ebc-main02-card-banner .master-title p br {display: none}
}

/* 769px 이상 (데스크탑/태블릿)의 화면에만 적용 */
@media (min-width: 769px) {
  .ebc-main02-card-banner ul li:first-child {
    position: relative;   /* 자신의 자리에서 상대적으로 이동 */
    top: 250px;           /* 아래로 150px 이동 */
  }

 .ebc-main02-card-banner ul li:nth-child(2) {
    position: relative;
    top: 100px; /* 두 번째 항목: 100px 아래로 */
  }

  .ebc-main02-card-banner ul li:nth-child(3) {
    position: relative;
    top: 270px; /* 세 번째 항목: 70px 아래로 */
  }
}

 .ebc-main02-card-banner {
      position: relative;
      padding: 60px 0;
    }
    .ebc-main02-card-banner:after {
      content: "";
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-image: url("http://cleancat.myaboutd.shop/data/ebslider/eb4_busi_033/img/4f835a45a2de4aeefbbb8735343a3fb3.jpg");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: center;
      z-index: 0;
    }
    .ebc-main02-card-banner .container {
      position: relative;
      z-index: 1;
    }

    /* 강아지 이미지 위치 */
    .floating-dog {
      position: absolute;
      top: 100px;
      right: 100px;
      width: 200px;
      animation: floatUpDown 4s ease-in-out infinite;
      z-index: 2;
      transition: filter 0.3s ease;
    }
    .floating-dog:hover {
      filter: brightness(0) invert(1);
    }
    @keyframes floatUpDown {
      0% { transform: translateY(0); }
      50% { transform: translateY(-20px); }
      100% { transform: translateY(0); }
    }


/* 아이템 */
.ebc-main02-card-banner ul li .item {position: relative;padding:20px 15px;background-color: #0277bd}
.ebc-main02-card-banner ul li:nth-child(2n) .item {background-color:#fff }
.ebc-main02-card-banner ul li:nth-child(3n) .item {background-color:#12274a }
.ebc-main02-card-banner ul li > a {display: block}
.ebc-main02-card-banner ul li .item-content h5 {margin-bottom: 40px;font-size: 15px;color: #fff}
.ebc-main02-card-banner ul li .item-content h4 {position: relative;margin-bottom: 10px;font-size: 21px;font-weight: 600;color: #fff}
.ebc-main02-card-banner ul li .item-content h4:before {content:"";opacity:.4;position: absolute;bottom: 36px;width: 1px;height: 20px;background-color: #fff;transition:.3s}
.ebc-main02-card-banner ul li:nth-child(2n) .item-content h4:before {background-color: #12274a}
.ebc-main02-card-banner ul li .item-content p {font-size: 15px;color: #fff}
.ebc-main02-card-banner ul li:nth-child(2n) .item-content h5,
.ebc-main02-card-banner ul li:nth-child(2n) .item-content h4,
.ebc-main02-card-banner ul li:nth-child(2n) .item-content p {color: #333}
@media (min-width:768px){
    .ebc-main02-card-banner ul {display: flex;flex-wrap:wrap}
    .ebc-main02-card-banner ul li {width: 33.333%}
    .ebc-main02-card-banner ul li:nth-child(2) {padding-top: 30px}
    .ebc-main02-card-banner ul li .item-content h5 {font-size: 17px}
    .ebc-main02-card-banner ul li .item-content h4 {font-size: 21px}
    .ebc-main02-card-banner ul li .item-content p {font-size: 17px}
}
@media (min-width:992px){
    .ebc-main02-card-banner ul li .item {padding: 50px 35px}
    .ebc-main02-card-banner ul li .item-content h5 {margin-bottom: 60px;font-size: 17px;transition:.3s}
    .ebc-main02-card-banner ul li .item:hover .item-content h5 {margin-bottom: 20px;padding-top: 40px}
    .ebc-main02-card-banner ul li .item-content h4 {margin-bottom: 20px;font-size: 25px}
    .ebc-main02-card-banner ul li .item-content h4:before {bottom: 47px;height: 30px}
    .ebc-main02-card-banner ul li .item:hover .item-content h4:before {height: 0px}
    .ebc-main02-card-banner ul li .item-content p {font-size: 17px}
}
@media (min-width:1200px){
    .ebc-main02-card-banner ul {padding-left: 100px}
    .ebc-main02-card-banner ul li .item-content h4 {font-size: 29px}
}
@media (min-width:1400px){
    .ebc-main02-card-banner ul {padding-left: 200px}
}


.dog-image {
      position: absolute;
      top: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: 240px;
      max-width: 60%;
      animation: floatUpDown 5s ease-in-out infinite;
      z-index: 2;
      transition: filter 0.3s ease;
    }

    .dog-image:hover {
      filter: brightness(0) invert(1);
    }

    @keyframes floatUpDown {
      0% {
        transform: translateX(-50%) translateY(0);
      }
      50% {
        transform: translateX(-50%) translateY(-20px);
      }
      100% {
        transform: translateX(-50%) translateY(0);
      }
    
    
    ul.service-list {
      display: flex;
      flex-wrap: wrap;
      justify-content: space-between;
      padding: 40px 0 0;
      list-style: none;
      margin: 0;
    }

    ul.service-list li {
      width: 32%;
      position: relative;
    }

    ul.service-list li:first-child {
      top: 250px;
    }

    ul.service-list li:nth-child(2) {
      top: 100px;
    }

    ul.service-list li:nth-child(3) {
      top: 270px;
    }

    .item {
      background-color: #0277bd;
      padding: 30px 20px;
      border-radius: 12px;
      color: #fff;
      transition: transform 0.3s ease;
    }

    .item:hover {
      transform: translateY(-5px);
    }

    .item h5 {
      font-size: 15px;
      margin-bottom: 10px;
    }

    .item h4 {
      font-size: 21px;
      font-weight: 700;
      margin-bottom: 10px;
    }

    .item p {
      font-size: 15px;
      line-height: 1.4em;
    }

    @media (max-width: 768px) {
      ul.service-list {
        flex-direction: column;
        gap: 20px;
      }

      ul.service-list li {
        width: 100%;
        top: 0 !important;
      }

      .dog-image {
        width: 160px;
      }
    }
       
       
       
/* 공통 */
#main_menu {
  width: 100%;
  position: relative;
  display: block;
  background: #fff;
  text-align: center;
  color: #00954d;
  font-family: 'Noto Sans KR', sans-serif;
}

#main_menu .wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

#main_menu .wrap > ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 0;
  margin: 0;
}

#main_menu .wrap > ul > li {
  width: 20%;
  padding: 40px 0;
  border-top: 3px solid white;
  transition: all 0.3s ease;
}

#main_menu .wrap > ul > li:hover,
#main_menu .wrap > ul > li.active {
  border-top: 3px solid #00954d;
}

#main_menu .wrap > ul > li h1 {
  font-size: 20px;
  font-weight: 500;
  color: #00954d;
  position: relative;
  margin-bottom: 20px;
}

#main_menu .wrap > ul > li h1:after {
  content: '';
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 25px;
  height: 3px;
  background: #00954d;
}

/* 서브메뉴 */
#main_menu .wrap ul li ul {
  margin-top: 20px;
}

#main_menu .wrap ul li ul li {
  font-size: 16px;
  line-height: 30px;
  list-style: none;
}

#main_menu .wrap ul li ul a {
  text-decoration: none;
  color: #222;
  display: block;
  transition: all 0.2s ease;
}

#main_menu .wrap ul li ul a:hover,
#main_menu .wrap ul li ul a.active {
  color: #00954d;
  font-weight: 600;
}

/* 반응형 처리 */
@media screen and (max-width: 1024px) {
  #main_menu .wrap > ul > li {
    width: 50%;
    padding: 30px 0;
  }

  #main_menu .wrap ul li h1 {
    font-size: 18px;
  }

  #main_menu .wrap ul li ul li {
    font-size: 15px;
  }
}

@media screen and (max-width: 600px) {
  #main_menu .wrap {
    flex-direction: column;
  }

  #main_menu .wrap > ul {
    flex-direction: column;
  }

  #main_menu .wrap > ul > li {
    width: 100%;
    border-top: 2px solid #eee;
    padding: 20px 0;
  }

  #main_menu .wrap ul li h1 {
    font-size: 17px;
  }

  #main_menu .wrap ul li ul {
    margin-top: 10px;
  }

  #main_menu .wrap ul li ul li {
    font-size: 14px;
    line-height: 26px;
  }
}

</style>