#block_02 {width:100%; }
#block_02 p.txtP { line-height:25px; }
#block_02 div.icoBox {overflow:hidden; margin:10px 0 60px 0;}
#block_02 section a{display:block; font-size:13px; padding:20px 20px 22px 20px; text-align:center; border:1px solid #dfdfdf; 
border-radius:10px; margin:1% 1%; width:23%; box-sizing:border-box; float:left; }
#block_02 section a:hover span.detail{background-color:#333; color:#fff; box-sizing:border-box; }
#block_02 section a span.detail {display:block; background-color:#f0f0f0; color:#888; width:150px; margin:10px auto 0 auto; padding:2px 0 4px 0; font-size:12px;}
#block_02 div.icoBox2 {overflow:hidden; margin:10px 0; font-size:13px;}
#block_02 div.icoBox2 section {display:block; padding:20px 20px; text-align:center; border:1px solid #dfdfdf; 
border-radius:10px; margin:1% 1%; width:23%; box-sizing:border-box; float:left; }
#block_02 div.icoBox2 section:hover {background-color:#f5f5f5;}

/*---------------------------------------
  MOBILE RESPONSIVE              
-----------------------------------------*/
@media (max-width: 1023px) {
#block_02 section a {width:48%;}
#block_02 div.icoBox2 section {width:48%;}
}
@media (max-width: 768px) {
}
@media (max-width: 640px) {
#block_02 section a {width:98%;}
#block_02 div.icoBox2 section {width:98%;}	
}
@media (max-width: 480px) {
}
@media (max-width: 320px) {
}


.card_wrap {
  width: 1200px;
    margin: 0 auto;
  margin-top: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 80px 30px;
  flex-wrap: wrap;
  margin-bottom: 100px;
}

.card {
  background-color: white;
  border: 1px solid #1465B4;
  height: 300px;
  width: 280px;
  text-align: center;
  padding: 50px 30px;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  position: relative;

}

.card h1 {
  background-color: #1465B4;
  color: white;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-weight: 800;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto 20px;
  font-size: 20px;
  position: absolute;
  top: -25px;

}

.card .line {
  width: 100%;
  border: 1px solid #E7F0F8;
}

.card h2 {
  color: #1465B4;
  font-size: 30px;
  font-weight: 800;
  margin: 0 0 10px;

}

.card p {
  color: #5b5b5b;
  font-size: 18px;
  line-height: 1.6;
  font-weight: 400;
  color: #1465B4;
}

.next-button {
  width: 0;
  height: 0;
  border-left: 20px solid #1465B4;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}

section.bsns {
  background-image: url(../img/bus_bg.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  width: 100%;
  margin: 0;
  padding-bottom: 0;
  overflow: hidden;
  padding: 70px 0;
}

section>p {
  background-color: #ffffff59;
  width: 1000px;
  color: #ffffff;
  border: 1px solid #ffffff;
  padding: 50px;
  margin: 0 auto;
  font-size: 25px;
  text-align: center;
  margin-bottom: 30px;
}

section>article {
  width: 1000px;
  margin: 0 auto;
}

section>article>div {
  display: flex;
  margin-bottom: 30px;
}

section>article .icon_box {
  width: 270px;
  height: 270px;
  background-color: #ffffff3b;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 30px;
  margin-right: 30px;
}

section>article .icon_box p {
  font-size: 23px;
  font-weight: 700;
  color: #fff;
}

.contents {
  display: flex;
  background-color: #fff;
  width: calc(100% - 300px);
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
}

.text_wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  width: calc(100% - 300px);

}

.text_wrap p {
  background-color: #fff;
  color: #1465B4;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: calc(50% - 10px);
  /* 50% 너비로 설정하고 간격을 유지 */
}
#contentWrap #content{
  max-width: 100% !important;
}
@media screen and (max-width: 768px) {
  .content {
      width: 80%;
  }
  .next-button {
     display: none;
  }
  .card_wrap {
    width: 100%;
  }
  .card{

      padding: 20px;
      height: 250px;
  }
  .card h2{
      font-size: 20px;
  }
  .card p{
      font-size: 16px;
  }
  section>p{
      width: 80%;
      padding: 20px;
      font-size: 18px;
  }
  section>article{
      width: 100%;
      display: flex;
      align-items: center;
      flex-direction: column;
  }
  section>article>div{
      flex-direction: column;
  }
  section>article .icon_box{
      margin-right: 0;
      width: 100%;
      height: 200px;
  }
  section>article .icon_box p{
      font-size: 20px;
  }
  .text_wrap{
      width: 90%;
      margin: 0 auto;
      height: 200px;
  }

.contents {
  display: flex;
  width: 100%;
  align-items: center;
  text-align: center;
  flex-direction: row;
  padding: 30px 10px;
  justify-content: space-evenly;
}
section>article>div{
  width: 100%;
}
.text_wrap p{
  background-color: #fff;
  color: #1465B4;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  flex: calc(50% - 10px);
  height: 80px;
  padding: 20px;
}
.text_wrap {
  width: 100%;
  margin: 0 auto;
  height: 220px;
  gap: 1px;
}
}



.main-section {
  padding: 10vh 0;
  text-align: center;
  background-color: #674399;
}

.section-title {
  font-size: 2.5em;
  color: #ffffff;
  font-weight: 900;
  margin-bottom: 100px;
}

.service-container {
  max-width: 1200px;
  margin: 0 auto;
  
  padding: 0 15px;
}

.service-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

.service-col {
  width: 100%;
  max-width: 24%;
  margin-bottom: 20px;
  padding: 10px;
  box-sizing: border-box;
  text-align: left; 
}

@media (max-width: 768px) {
  .service-col {
      max-width: 48%;
  }
}

@media (max-width: 576px) {
  .service-col {
      max-width: 100%;
  }
}

/* 서비스 박스 스타일 */
.service-box {
  padding: 0;
}

.service-title {
  font-size: 1.5em;
  color: #ffffff;
  margin-bottom: 15px;
  position: relative;
  padding-left: 20px;
  font-weight: 800;
}

.service-title::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 80%;
  background-color: #ffffff; 
  transform: translateY(-50%);
}

.service-list {
  font-size: 1em;
  color: #ffffffa6;
  padding-left: 20px;
}

.service-list li {
  margin-bottom: 10px;
}

.benefit-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.benefit-col {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  max-width: 33%; 
  padding: 20px;
  box-sizing: border-box;
}



.benefit-box {
  background-color: #fff;
  padding: 20px;
  width: 300px;
  height: max-content;
  padding: 30px 20px;
  height: 250px; 
  display: flex;
  justify-content: center;
  align-items: center; 
  flex-direction: column;
  transition: transform 0.3s ease;
}

.benefit-box:hover {
  transform: translateY(-10px); 
}

.benefit-title {
  font-size: 1.5em;
  color: #674399;
  font-weight: 800;
  margin-bottom: 15px;
}

.benefit-list {
  font-size: 1em;
  color: #555;
}

.benefit-list li {
  margin-bottom: 10px;
}

.gap-20 {
  height: 20px;
}


.section-title.pro{
  color: #1465B4;
  margin-bottom: 100px;
  margin-top: 100px;
  text-align: center;
}

table {
  width: 1200px;
  margin: 0 auto;
  border-collapse: collapse;
  margin-bottom: 100px;

}
th, td {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 14px;
}
th {
  background-color: #1465B4;
  font-size: 16px;
  font-weight: 800;
  color: #ffffff;
}
td {
  background-color: #ffffff;
}


.container {
  width: 90%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

.category, .content-box {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex: 1;
  min-width: 280px;
}

.category {
  background-color: #46c0c0;
  color: white;
  flex-basis: 100%;
  text-align: center;
  font-weight: bold;
}

.category span {
  display: block;
  font-size: 1.5em;
}

.content-box {
  flex-basis: 45%;
}

.content-box ul {
  list-style-type: none;
  padding-left: 0;
}

.content-box ul li {
  margin-bottom: 10px;
  color: #555;
}

.highlight {
  color: #46c0c0;
  font-weight: bold;
}

strong{
  display: block;
  margin-bottom: 5px;
}
tbody ul li{
  margin-bottom: 20px;
}
tbody ul li:last-child{
  margin-bottom: 0px;
}

@media (max-width: 768px) {
  .benefit-col {
      max-width: 100%;
  }
  .benefit-box{
    width: 100%;
  }
  .section-title{
    font-size: 30px;
  }
  .content-box {
    flex-basis: 100%;
}

  table {
    width: 700px;
    position: relative;
    padding: 20px;
  }
  .table-wrapper {
    overflow-x: auto; 
    padding: 20px;
}

.section-title.pro{
  margin-bottom: 50px;
  margin-top: 100px;
}

}