@charset "utf-8";

 /*제작 process*/
 .timeline_wrap { display: flex; width: 100%; height: auto;
  margin: 50px 0; overflow: hidden;  padding: 0 20px 30px 20px;  margin: 50px 0; padding: 0;  text-align: center;    }
.timeBlock { width: 25%; text-align: center; font-size: 1.8rem;  }
.timestamp { margin-bottom: 35px;  padding: 0px 30px;  font-size:2rem; font-weight: 600;  }
.timestamp .proc_tit {position:relative; color:#CDA56D;  }

.timestamp img {  display: block;   margin: 0 auto 20px;}
.timestamp .point {border:1px dashed #CDA56D; padding:7px 10px; border-radius:7px;}
.status { padding: 40px 10px 0; display: flex; justify-content: center;  border-top: 4px solid #CDA56D;  position: relative;  transition: all 200ms ease-in ; }
.status:before { content: '';  width: 20px;  height: 20px;  background-color: #CDA56D;  border-radius: 20px;  border: 4px solid #CDA56D;  position: absolute;  top: -12px;  left: calc(50% - 12px); }

.status span { width: 100%; padding: 20px 5px;  }

.status span p {font-size:1.5rem; position:relative; display:inline-block; line-height:1.6em; padding-bottom:5px; }    


@media screen and (max-width:1400px){
  .timeline_wrap { flex-wrap:wrap;}
  .timeBlock {width:20%; padding:0 0 30px; }
}

@media screen and (max-width:1024px){
  .timeBlock {width:33.333%;}
  .upBoxWrap .box { width:calc(50% - 10px);  margin-right:20px; padding-bottom:40px; }
  .upBoxWrap .box:nth-child(even) { margin-right:0;}
}
@media screen and (max-width:768px){
  .timeBlock {width:50%;}
  .upBoxWrap .box h3.boxTitle:before{width:100%;}
  .timeBlock .timestamp .proc_tit:after {display:none;}
}
@media screen and (max-width:560px){
  .status { padding: 40px 5px 0;}
  .timestamp img { height:70px; }
}