/**--------------------------- 메인 **/
/** 메인 > 공통 **/
.main h2 {color: #FFF; text-align: center; font-size: 1.375rem; font-weight: 900;}
.main h2 span {color: var(--primary);}
.main h2.black {color:#0A1428;}

.main .btn {position: relative; display: flex; justify-content: space-between; align-items: center; padding: 0 2rem ; gap: 1.5rem; font-weight: 500; width:12.5rem; height:3.3125rem; border-radius: 1.625rem; border: 2px solid #FFF; color:#fff; transition: var(--transition); }
.main .btn::after {position: absolute; right:0.625rem; top:50%; transform: translateY(-50%); content: ''; display: block; width:2.125rem; height:2.1875rem; background: url("../img/ico_btn.png.svg") no-repeat; transition: var(--transition); background-size: cover;}
.main .btn.en {font-family: var(--poppins);}
.main .btn:hover::after {transform: translateX(-3px) translateY(-50%);}
.main .btn:hover {color:var(--primary);}


/** 메인 > 비주얼 **/
.main .sec_visual {overflow: hidden; position: relative; height:100vh; min-height:50rem; background-color: #080F1D;}
.main .sec_visual::after {content: ''; position: absolute; top:0; left:0; right:0; bottom:0; background: url("../img/main_visual.png") no-repeat top center; background-size: cover;animation: bgZoom 1s ease-in-out forwards; }
.main .sec_visual .inner {position: relative; z-index: 2; height:inherit; display: flex; flex-direction: column; align-items: center; justify-content: center; color:#fff;}
.main .sec_visual .inner p {margin-top:1.625rem; color: #FFF; text-align: center; font-size: 1.875rem;  font-weight: 300; letter-spacing: -1.2px; line-height: 1.4; word-break: keep-all; }
.main .sec_visual a {margin-top:86px;}

@media screen and (max-width:640px){
  .main .sec_visual {height:100svh; min-height:100svh;}
}


@keyframes bgZoom {
  0% {
      transform: scale(1.5);
      opacity: 0;
  }

  100% {
    transform: scale(1);
    opacity: 1;
  }
}



/** 메인 > What We Do **/
.main .sec_wedo {padding:5.375rem 0 7rem; background-color: #091223;}
.main .sec_wedo ul.wedo_list {margin-top:4.6875rem; display: grid; grid-template-columns: repeat(3,1fr); gap:3.75rem;}
.main .sec_wedo ul.wedo_list li {position: relative; padding-top:100%; border-radius: 100%; border: 1px solid rgba(255, 255, 255, 0.30);}
.main .sec_wedo ul.wedo_list li > div {display: flex; flex-direction: column; justify-content: center; align-items: center; gap:0.625rem; position: absolute; top:0; left:0; right:0; bottom:0; color:#fff; }
.main .sec_wedo ul.wedo_list li > div p {color: #FFF; font-size: 1.25rem; font-weight: 300; line-height: 160%; letter-spacing: -0.4px; text-align: center;}
.main .sec_wedo ul.wedo_list li > div p.en {color: var(--primary); font-weight: 600; line-height: 160%; }
.main .sec_wedo ul.wedo_list li > div p.en br {display: none;}

@media screen and (max-width:1024px){
  .main .sec_wedo ul.wedo_list {gap:2rem;}
  .main .sec_wedo ul.wedo_list li > div p.en br {display: block;}
}

@media screen and (max-width:640px){
  .main .sec_wedo {padding:5rem 0;}
  .main .sec_wedo ul.wedo_list {padding:0 15%; grid-template-columns: repeat(1,1fr);}
}



/** 메인 > 클라이언트 **/
.main .sec_client {padding:8.75rem 0;}
.main .sec_client ul.client_list {margin-top:3.75rem; display: flex; justify-content: space-between; align-items: center; gap:1.875rem}
.main .sec_client ul.client_list li img {max-width: 100%; width:auto;}

@media screen and (max-width:640px){
  .main .sec_client {padding:5rem 0;}
  .main .sec_client ul.client_list {flex-direction: column; gap:1rem;}
  .main .sec_client ul.client_list li {display: flex; flex-direction: column; align-items: center; justify-content: center; gap:1rem;}
  .main .sec_client ul.client_list li::after {content: ""; display: block; width:1px; height:16px; background-color: rgba(0, 0, 0, 0.15);}
  .main .sec_client ul.client_list li:last-child::after {display: none;}
}