@charset "utf-8";
body{background-color: #000;color:#fff;}
.subpage{margin:200px 0 100px;}
.subpage.contact-page {margin-bottom: 0}
.inner{width:100%;max-width: 100vw;padding:0 60px;}
.page-tit{margin-bottom:50px;text-align: center;}
.page-tit h2{font-size:68px;color:#fff;}

/*포폴 페이지*/
.proj-page .scr-wrap{margin:0 auto 60px;width:800px;}
.proj-page #proj-filter{display:flex;flex-wrap: wrap;justify-content:center;}
.proj-page #proj-filter button{padding:0 24px;height:45px;margin:10px 4px;border-radius:25px;background:rgba(255,255,255,.2);color:#fff;font-size:18px;font-weight:800;border:none !important;outline:none !important;cursor:pointer}
.proj-page #proj-filter button.on{background:var(--red);color:#fff;}
.proj-page #proj-wrap{display:flex;flex-wrap: wrap;}
.proj-page #proj-wrap .proj-bx{width:calc(33.33% - 10px);margin:0 5px;margin-bottom:10px;border-radius:10px;overflow:hidden;}
.proj-page #proj-wrap .proj-bx a{display:block;width:100%;height:100%;}
.proj-page #proj-wrap .proj-bx a img{width:100%;}

/*contact*/
.map-wrap {margin:50px 30px 0; position: relative}
#map {
    width: 100%;
    height:calc(700px);
    border-radius: 10px; overflow: hidden
}
.contact-txt {position: absolute; position: absolute; bottom:20px; right: 20px; display: flex; flex-direction: column; justify-content: center; z-index: 10; padding: 40px; border-radius: 10px; overflow: hidden}
.contact-txt::before {
   content: "";
   position: absolute;
   left: 0;
   top:0;
   width: 100%;
   height: 100%;
   z-index: -1;
   background: rgba(0, 0, 0, 0.5);
   backdrop-filter: blur(6px);
}
.contact-txt .corp {font-size: 30px; font-weight: 800; margin-bottom: 40px}
.contact-txt .block {position: relative; display: flex; align-items: center; font-size: 16px; margin-bottom: 20px; font-weight: normal}
.contact-txt .block:last-child {margin:0}
.contact-txt .block p {margin: 0}
.contact-txt .block h3 {width: 100px;}
.contact-txt .block p a:hover {color: #fff !important}

/* 문의하기 */
.contact-frm {max-width: 510px; margin: 0 auto}
.contact-form {display: flex; align-items: center; justify-content: center}
.contact-form .cont {display: flex; align-items: center; background: rgba(255,255,255,.2); border-radius: 5px; margin:20px 0; padding: 15px 30px}
.contact-form .cont .area-name {display: flex; align-items: flex-start; width: 100px; flex-shrink: 0;}
.contact-form .cont .area-name span {font-size: 16px;}
.contact-form .cont .area-name i {color: var(--red); margin-left: 3px}
.contact-form .cont input {background: none; border: 0; font-size: 16px; height: 30px; padding: 0 15px; width: 100%; color: #fff}
.contact-form .cont textarea {background: none; border: 0; font-size: 16px; padding: 10px 0; width: 100%; color: #fff; height: 200px; font-weight: normal}
.contact-form .cont input[type=file] {height: auto}
input[type=file]::file-selector-button {
  border: none;
  cursor: pointer;
  &:hover {
  transition: 0.3s;
  color: #fff;
  background-color: #b6856a;
  }
}

.contact-form .info {font-size: 12px; color: #999}
.contact-form .agree {color: #999; display: flex; align-items: center;}
.contact-form .agree input[type="checkbox"] {width: 20px; height: 20px;}
.contact-form .agree label {margin-left: 5px}
.contact-form .btn_wrap {display: flex; align-items: center; justify-content: center; margin-top: 50px}
.contact-form .btn_wrap button {display: flex; align-items: center; justify-content: center; height: 60px; width: 100%; border: 0; background: var(--red); color: #fff; font-size: 20px; border-radius: 50px}


@media screen and (max-width:1024px){
  .page-tit h2{font-size:45px;}
  .inner{padding:0 30px;}
  .map-wrap {margin: 0}
}

@media screen and (max-width:850px){
.proj-page #proj-filter{width:100%;}
.proj-page #proj-filter button{padding:0 15px;font-size:16px;border-radius:20px;}
.proj-page #proj-wrap .proj-bx{width:100%;margin:0 0 10px;}
}

@media screen and (min-width:769px){
  .inner{padding:0 30px;}
}

@media screen and (max-width:768px){

  .subpage{margin:120px 0 50px;}
  .inner{padding:0 20px;}

  .proj-page .inner{padding:0;}
  .proj-page #proj-filter button{font-size:14px;}
  .proj-page #proj-filter{flex-wrap: nowrap;width:165%;justify-content: flex-start}
  .proj-page #proj-wrap {padding:0 20px;}
  .proj-page .scr-wrap{width:100%;padding:0 20px;overflow-x: auto;}
  .page-tit h2{font-size:35px;}


}

@media screen and (max-width:768px){
  .proj-page #proj-filter{width:190%;}
  .contact-txt {flex-direction: column; align-items: center;}
}

@media screen and (max-width:500px){
  .proj-page .scr-wrap {margin: 0 auto 40px;}
  .proj-page #proj-filter button {height:40px}
  .proj-page #proj-filter{width:240%; width: max-content;}
  .proj-page #proj-filter button {margin: 0 10px 0 0;}
  
  .contact-form .cont {padding: 15px 20px}
  .contact-form .cont .area-name {width: 80px}
  .contact-form .agree input[type="checkbox"] {width: 30px; height: 30px; margin: 0}
  .contact-form .agree label {margin-left: 10px; line-height: 1.5}
  .contact-form .agree {align-items: flex-start}
  
  .contact-txt {padding: 40px 5px 0; align-items: flex-start; text-align: left; position: relative; right: auto; bottom: auto}
  .contact-txt .corp {font-size: 20px; margin-bottom: 20px}
  .contact-txt .block {align-items: flex-start; line-height: 1.5; margin-bottom: 10px}
  .contact-txt .block h3 {flex-shrink: 0}
  #map {height: calc(100dvw - 40px)}

}