#sub-process .gw-process-container{display:flex;gap:10px; flex-wrap:wrap;}
#sub-process .gw-process-list{width: calc(33.3% - 10px);gap:40px;padding:25px;background:#fff;box-shadow:0 15px 10px rgba(34, 34, 34, .02);}
#sub-process .gw-process-list:not(:last-child){margin-bottom:20px;}
#sub-process .gw-process-img{background: #f8f8f8;border: 1px solid #ddd; }
#sub-process .gw-process-info {display:flex;flex-direction: column;justify-content: space-between;width: calc(100% - 390px);}
#sub-process .gw-process-info .gw-text01 {color: var(--main-color);font-family: "Pretendard", sans-serif; font-weight: 800;}
#sub-process .gw-process-info .gw-text02 {font-size: var(--main-title03);font-family: "Pretendard", sans-serif; font-weight: 800;}
#sub-process .gw-process-info .gw-text02 > span {font-family: "Outfit", sans-serif; font-weight: 700;}
#sub-process .gw-process-info .gw-specifications-tit{font-size: var(--main-title04);font-family: "Pretendard", sans-serif; font-weight: 800;}
#sub-process .gw-process-info .info-table {border-top: 2px solid var(--main-color);border-bottom: 1px solid #ddd;}
#sub-process .gw-process-info .info-table dl {position: relative;display: flex;align-items: center;color: #666;}
#sub-process .gw-process-info .info-table dl:nth-child(even) {background: #f3f3f3;}
#sub-process .gw-process-info .info-table dl dt {width: 20%;padding: 10px 20px;box-sizing: border-box;font-family: "Pretendard", sans-serif; font-weight: 800;}
#sub-process .gw-process-info .info-table dl dd {width: 80%;padding: 10px 20px;box-sizing: border-box;}

.gw-process-list h3{
    margin-bottom:10px;
    position:relative;
    display:flex;
    align-items:center;
    font-weight:700;
    font-size:1.325rem;
}

.video-btn-wrap{
    display:flex;
    justify-content:center;
    padding:10px;
}


.btn-video-on{
    display:flex;
    align-items:center;
    font-weight:600;
    padding:10px 25px;
    border-radius:50px;
    background-color:#1748a4;
    color:#ffffff;
    transition:all 0.35s;
}

.btn-video-on:hover{
    background-color:#7511aa;
    transition:all 0.35s;
}

.btn-video-on:before {
    content:'\eac0';
    font-family: xeicon;
    font-size: 1.8rem;
    display: block;
    color:#93c9ff;
    margin-right:5px;
    font-weight:normal;
}

.btn-video-on:hover:before{
    color:#cb82f2;
}

.video-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none; /* 기본 숨김 */
}

.video-modal.is-open {
  display: block;
}

.video-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.6);
}

.video-modal__panel {
  position: relative;
  width: min(920px, calc(100% - 32px));
  margin: 80px auto;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
}

.video-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid #eee;
}

.video-modal__title {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}

.video-modal__close {
  width: 38px;
  height: 38px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

.video-modal__body {
  padding: 0;
}

.video-modal__video {
  width: 100%;
  height: auto;
  display: block;
  background: #000;
}

/* 모바일 대응 */
@media (max-width: 640px) {
  .video-modal__panel {
    margin: 40px auto;
  }
}

/*반응형------------------------------------------------------------------------------------------------------------------ */
@media screen and (max-width:1024px){
    #sub-process .gw-process-list{flex-direction: column;width: calc(50% - 10px);}
    #sub-process .gw-process-img{width: 100%;}
    #sub-process .gw-process-info{width: 100%;}
}

@media screen and (max-width:576px) {
    #sub-process .gw-process-list{padding:22px;width:100%;}
    #sub-process .gw-process-list-top{gap:20px;flex-direction:column;}
    #sub-process .gw-process-img{width:100%;height:250px;}
    #sub-process .gw-process-info{width:100%;height:auto;gap:20px;}
    #sub-process .gw-process-info .info-table dl dt{padding:10px 0  10px 20px;width:40%;}
    #sub-process .gw-process-info .info-table dl dd{padding:10px 0  10px 20px;width:60%;}
}
