@charset "utf-8";

.sub-banner {
  background: url(../images/sub-title-banner1.png) center center / cover
    no-repeat;
}

.catalogue-wrap {
  text-align: center;
  padding: 24px 0;
}
.catalogue-btn {
  margin-top: 36px;
  gap: 0 24px;
}
.btn-outline {
  border-radius: 26px;
  border: 1px solid #d9d9d9;
  background: #fff;
  padding: 14px 20px 14px 26px;
  gap: 0 16px;
  font-weight: 500;
  transition: all 0.3s;
}
.btn-outline:hover {
  background: #f1f1f1;
}
.btn-outline svg {
  color: #999;
}
/*project*/

.project-img a {
  display: block;
  position: relative;
}
.project-img a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display:block;
  
}
.project-img span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #0b111c99;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  opacity: 0;
  z-index: -1;
  transition: all 0.3s;
}
.project-img span i {
  font-size: 28px;
  padding-left: 16px;
}
.project-img a:hover span {
  z-index: 9;
  opacity: 1;
}
.more-btn.project-img-more-btn {
  border: 1px solid #d9d9d9;
  text-transform: uppercase;
  padding: 12px 0;
  width: 100%;
  margin-top: 16px;
}
/*award - tab*/
.tab-title button.tab-btn {
  flex: 1;
  text-align: center;
  background: #ececec;
  border: 1px solid #d9d9d9;
  color: #656565;
  padding: 18px;
  margin-left: -1px;
}
.tab-title button.tab-btn.active {
  background: #fff;
  color: #161616;
  font-weight: 700;
}
.tab-content {
  padding: 32px 0;
}
.award-tab1-img img {
  border: 1px solid #d9d9d9;
}
.award-tab1-img span {
  display: block;
  font-size: 18px;
  text-align: center;
}
.award-tab1-img > span {
  padding: 16px 0 32px;
}
.award-tab1-img span .sub-title-info {
  color: #656565;
  font-size: 16px;
}
/*video*/
.video-img a {
  display: block;
  position: relative;
}
.video-img span {
  display: inline-flex;
  flex-flow: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  background-color: #0b111c99;
  text-transform: uppercase;
  position: absolute;
  top: 0;
  left: 0;
  text-align: center;
  color: #fff;
  font-size: 32px;
  font-weight: 600;
  opacity: 0;
  z-index: -1;
  transition: all 0.3s;
}
.video-img span i {
  font-size: 38px;
}
.video-img a:hover span {
  z-index: 9;
  opacity: 1;
}
/*download*/
.download-img {
  position: relative;
}

.download-btn-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #0b111c99;
  z-index: -1;
  opacity: 0;
  transition: all 0.3s;
}
.download-img:hover .download-btn-wrap {
  opacity: 1;
  z-index: 1;
}
.download-btn-wrap > span {
  height: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 500;
  font-size: 36px;
}
.download-btn {
  background-color: #0b111c99;
  margin-top: auto;
  text-align: center;
  align-items: center;
}
.download-btn a {
  color: #fff;
  flex: 1;
  padding: 16px 0;
}
.download-btn a i {
  padding-left: 4px;
}
.download-btn .vertical-bar {
  height: 28px;
}
@media all and (max-width: 1200px) {
  img {
    max-width: 100%;
  }
  .award-tab1-img span {
    font-size: 16px;
  }
}
@media all and (max-width: 768px) {
  .award-wrap .grid.grid-col-4 {
    grid-template-columns: repeat(3, 1fr);
  }
}
@media all and (max-width: 640px) {
  /*카탈로그*/
  .catalogue-btn {
    flex-flow: column;
    gap: 10px;
    justify-content: start;
    align-items: start;
    max-width: 380px;
    margin: 20px auto;
  }
  .catalogue-btn .btn-outline {
    width: 100%;
  }
  /*project*/
  .page-project .grid.grid-col-3 {
    grid-template-columns: repeat(1, 1fr);
	gap: 16px 0;
  }
  .project-img {width: 100%;}
  .project-img a {display: block; aspect-ratio:1; }
  /*award*/
  .award-wrap .grid.grid-col-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  .video-wrap.grid.grid-col-2 {
    grid-template-columns: repeat(1, 1fr);
  }
  .download-wrap.grid.grid-col-3 {
    grid-template-columns: repeat(2, 1fr);
  }
  .download-btn-wrap > span {font-size: 16px;}
}