.spaBox{
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; 
  /* background-color: red; */
  background-color: rgb(255, 255, 255);
  /* background-color: rgb(244, 244, 244); */
   z-index: 900;
  justify-content: center;
  /* overflow-y: scroll; */
  box-sizing: border-box;
  padding: 4px;
  padding-top: 0px;

  /* padding-top: 40px; */
  margin-top: 30;
  /* display: flex !important; */
  /* flex-direction: column; */
  /* justify-content: center; */
  /* flex-wrap: wrap; */
}
.spaBoxWrap{
  width: 100%;
  /* height: 100%; */
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  gap: 16px;
  margin-top: 30px;
  /* max-width: 1200px; */
}
.spaBox-inner{
  width: 100%;
  display: flex;
  flex-direction: row;
  box-sizing: border-box;
  gap: 16px;
}
.spaBox-inner-box{
  width: 25%;
  /* min-height: 110vh; */
  /* height: 110vh; */
  /* min-height: 200vh; */
  background-color: gradient;
  /* background: linear-gradient(to left, #ffffff, #000000); */
}
.spaBox-inner-box-content{
  display: block;
  width: 100%;
  white-space: pre-line;
  overflow-wrap: anywhere;
  /* background-color: rgb(0, 0, 0); */
  /* color: white; */
}
.spaBox-bottomMargin{
  width: 100%;
  height: 200px;
  margin-top: 20px;
  border-top: var(--line);
  /* height: 900px; */
  /* background-color: #ff0000; */
}

.spaBox-bottomMargin:hover{
  cursor: row-resize;
}


.spaBox-inner-box{
  display: block;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  gap: 8px;
  /* background-color: rgb(0, 0, 0); */
  /* color: white; */
}
/* .spaBox-inner-box:nth-child(3){
  display: flex;
  width: 50%;
}
.spaBox-inner-box-content img{
  display: flex;
  max-height: 500px;
  height: auto;
} */
/* .spaBox-inner:nth-child(2){
  width: 100vw !important;
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
}
.spaBox-inner-box-F{
  width: 100% !important;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: center;
} */

.f-column-item{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
  text-align: center;
  margin-bottom: 40px;
}
.f-caption{
  width: 100%;
  color: gray !important;
  font-size: 14px !important;
  flex-direction: column;
  align-items: start;
  justify-content: center;
  text-align: start !important;
  /* background-color: rebeccapurple; */
}
.f-column-item img{
  width: 100%; 
  height: auto;
  object-fit: contain;
  text-align: center;
}
#A{
  background-color: black;
  display: inline !important;
  width: auto !important;
  margin-top: 2px;
  padding-left: 2px;
  padding-right: 2px;
  color: white !important;
  
}

/* pc별도 */
@media (min-width: 768px) {

  .spaBox-inner-box:nth-child(1){
    width: 15%;
  }
  .spaBox-inner-box:nth-child(2){
    width: 25%;
  }
  .spaBox-inner-box:nth-child(3){
    
    width: 40%;
    padding: 16px;
    padding-top: 0px;
    max-width: 800px;

  }
  .spaBox-inner-box:nth-child(4){
    width: 20%;
  }

  f-column-item img{
  }

  .spaBox-inner-box{
    width: 33.333%;
    height: 100vh;
    /* padding-top: 40px; */

    overflow-y: scroll;
    /* background-color: rebeccapurple; */
  }
}
/* 모바일 */
@media (max-width: 768px) {
  .spaBox{
    overflow-y: scroll;
  }

  .spaBox-inner{
    width: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
  
  }

  .spaBox-inner-box{
    width: 100%;
    /* min-height: 110vh; */
    /* height: 110vh; */
    /* min-height: 200vh; */
    background-color: gradient;
    /* background: linear-gradient(to left, #ffffff, #000000); */
  }

  .spaBox-inner-box:nth-child(3){
    width: 100%;
  }
  .f-column-item img{
    width: 100%;
  }
}