:root {
  --level-1: #000000;
  --level-2: #B5B5B5;
  --level-3: #1D5C47;
  --level-4: #2e2e38;
}
.rectangle { position: relative; padding: 20px; }

.level-1 { width: 300px; margin: 0 auto 40px; background: var(--level-1); font-size: var(--main-title03); color: var(--white); }
.level-1::before { content: "";position: absolute;top: 100%;left: 50%;width: 1px;height: 40px;background: var(--black);}

.level-2-wrapper {position: relative;}
.level-2-wrapper::before {content: "";position: absolute;top: -20px;left: calc(50% - 435px);width: 870px;height: 1px;background: var(--black);}
.level-2-wrapper::after {display: none;content: "";position: absolute;left: -20px;bottom: -20px;width: calc(100% + 20px);height: 1px;background: var(--black);}
.level-2-wrapper li {position: relative;margin-top: 10px;}
.level-2 {width: 300px;margin: 0 auto 60px;background: var(--level-2);font-size: var(--main-title04);}
.level-2::before {content: "";position: absolute;top: 100%;left: 50%;width: 1px;height: 40px;background: var(--black);}
.level-2::after {display: none;content: "";position: absolute;top: 50%;left: 0%;transform: translate(-100%, 0);width: 20px;height: 1px;background: var(--black);}

.level-3-wrapper {position: relative;display: grid;grid-template-columns: repeat(4, 1fr);grid-column-gap: 30px;width: 1130px;margin: 0 auto;}
.level-3-wrapper > li::before {content: "";position: absolute;top: 0;left: 50%;transform: translate(0, -100%);width: 1px;height: 30px;background: var(--black);}
.level-3 {margin-bottom: 20px;background: var(--level-3);color: var(--white);}

.level-4-wrapper {position: relative;width: 260px;margin: auto;}
.level-4-wrapper li + li {margin-top: 20px;}
.level-4 {background: var(--white);border:2px solid var(--level-3);}
.level-4::before {content: "";position: absolute;top: -12px;left: 50%;transform: translate(-100%, -50%);width: 1px;height: 20px;background: var(--black);}

/*¹ÝÀÀÇü------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width: 1280px) {
  .container { width: 768px; }
  .level-1 { width: 240px; }
  .level-2-wrapper::before { left: calc(50% - 285px); width: 570px; }
  .level-2 { width: 240px; }
  .level-3-wrapper { width: 730px; }
  .level-4-wrapper { width: 100%; }  
}


@media screen and (max-width: 768px) {
  .container { width: calc(100% - 20px); }
  .rectangle {padding: 20px 10px;}

  .level-1,
  .level-2 {width: 500px;}
  .level-1 {margin-bottom: 30px;  }
  .level-1::before{display: none;} 
  .level-2 { margin: 0 auto 50px; }
  .level-2::before { height: 30px; }
  .level-2::after { display: block;top: -30px; right: 0; left: 0; margin: auto; width: 1px; height: 30px; }
  .level-2-wrapper,
  .level-2-wrapper::after{display: block;}
  .level-2-wrapper {width: 500px;margin: auto;}
  .level-2-wrapper::before {display: none;left: -20px;width: 2px;height: calc(100% + 40px);}
  .level-2-wrapper::after { bottom: auto; top: -20px; width: 398px; right: 0; left: 0; margin: auto; }
  .level-2-wrapper > li:not(:first-child) {margin-top: 50px;}
  .level-3-wrapper {width: 100%;}
  .level-3-wrapper > li::before { width: 1px; }
}

@media screen and (max-width: 540px) {
  .level-1, .level-2 { width: 100%; }
  .level-2 { margin: 0 auto 30px; }
  .level-2-wrapper { width: 100%; }
  .level-3-wrapper { grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; }
  .level-3-wrapper > li:nth-child(n+3) { margin-top: 50px; }
  .level-2::before, .level-2::after { display: none; }
  .level-2-wrapper::after { display: none;} 
  .level-3-wrapper > li::before { display: none; }
  .level-4::before { display: none; }
}