* {
  cursor: url('cursor.svg'), auto;
}
body{
    font-family: "Inter", sans-serif;
    color: #000000;
    margin: 0px;


}

a{
  color:black;
  text-decoration: none;
  cursor: url('cursor-h.svg'), pointer;
}
ul{
  padding-inline-start:0;
  margin: 0;
}
li{
  list-style: none;
}
h1{
  color: #000;
  font-size: 64px;
  font-style: normal;
  font-weight: 400;
  line-height: 1.1; 
  margin: 0;
}
h2{
  color: #000;
  font-size: 36px;
  font-style: normal;
  font-weight: 300;
  line-height: 1.2; 
  margin: 0;
}
p{
  margin: 0;
}
/*Index*/
.frame{
  background: #F3F3F1;
}
header{
  display: inline-flex;
  position: sticky;
  top: 0;
  width: -moz-calc(100% - 40px);
  width: -webkit-calc(100% - 40px);
  width: calc(100% - 40px);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 28px 20px;
  background: rgba(255, 255, 255, 0.10);
  -webkit-backdrop-filter: blur(7.5px);
  backdrop-filter: blur(7.5px);
  z-index: 2;
}

.header-container{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
}

.nav-wide ul{
  display: flex;
  align-items: center;
  gap: 24px;
  cursor: url('cursor-h.svg'), pointer;

}
.nav-wide li{
  cursor: url('cursor-h.svg'), pointer;
}
.nav-wide a{
  cursor: url('cursor-h.svg'), pointer;
}
@media screen and (max-width: 600px){
  header{
    position: static;
  }
  .nav-wide ul{
    align-items: flex-start;
    gap: 20px;
    flex-direction: column;

  }
  .header-container{
    align-items: flex-start;
  }

}
.main-content{
  width: -moz-calc(100% - 40px);
  width: -webkit-calc(100% - 40px);
  width: calc(100% - 40px);
  max-width: 1160px;
  margin: 0 auto;
  padding:0 20px;
}
.intro {
  flex: 1 0 0;
}
.intro-wrapper{
  display: inline-flex;
  margin-top:120px;
  align-items: center;
  gap: 100px;
}
.main-content-1{
  background: white;
    padding: 0 20px;
    border-radius: 24px 24px 0 0;
    margin-top: 80px;
}
@media screen and (max-width: 858px){
  .intro-wrapper{
    display: flex;
    margin-top: 180px;
    align-items: center;
    gap: 48px;
    flex-direction: column;
  }
  .intro-details{
    width: auto !important;
  }
  .intro {
    font-size: 48px;
  }


}

.intro-details{
  display: flex;
  width: 360px;
  flex-direction: column;
  align-items: flex-start;
  gap: 40px;
}

.intro-details p{
  align-self: stretch;
  color: #000;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.intro-details .title{
  color: #5A5A5A;
  font-size: 12px;
  font-style: normal;
  font-weight: 400;
  line-height: 3;
}
.intro-details img{
  width:166px;
}

@media screen and (max-width: 600px){
  .intro-wrapper{
    margin-top: 100px;

  }


}
.project-wrapper {
  display: flex;
  margin: 60px auto 0 auto;
  align-items: flex-start;
  align-content: flex-start;
  gap: 60px 20px;
  flex-wrap: wrap;
  width: 100%;
  max-width: 1160px;
  /* 부드러운 높이 변화를 위한 transition 추가 */
  transition: min-height 0.3s ease;
}
.project-wrapper img{
  cursor: url('cursor-h.svg'), pointer;
}
@media screen and (max-width: 1200px){
  .project-wrapper{
    justify-content: center;

  }


}
.project-wrapper .txt-container{
  margin-top:24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  align-self: stretch;
}

.project-details-1 .img-container {
  width: 570px;
  height: 386px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.project-details-1 .img-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg-2.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.project-details-1 .img-container:hover::before {
  transform: scale(0.96) rotate(-3deg);
}

.project-details-1 img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  position: relative;
  z-index: 1;
}

.project-details-1 img:hover {
  transform: scale(1.05);
}

/* 방법 1: 가상 요소(::before)로 배경 분리 */
.project-details-2 .img-container {
  width: 570px;
  height: 386px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.project-details-2 .img-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg-5.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.project-details-2 .img-container:hover::before {
  transform: scale(0.96) rotate(5deg);
}

.project-details-2 img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  position: relative;
  z-index: 1;
}

.project-details-2 img:hover {
  transform: scale(1.05);
}

.project-details-3 .img-container {
  width: 570px;
  height: 386px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.project-details-3 .img-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg-4.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.project-details-3 .img-container:hover::before {
  transform: scale(0.96);
}

.project-details-3 img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  position: relative;
  z-index: 1;
}

.project-details-3 img:hover {
  transform: scale(1.05);
}

/* project-details-4 */
.project-details-4 .img-container {
  width: 570px;
  height: 386px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.project-details-4 .img-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg-6.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.project-details-4 .img-container:hover::before {
  transform: scale(0.96) rotate(-3deg);
}

.project-details-4 img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  position: relative;
  z-index: 1;
}

.project-details-4 img:hover {
  transform: scale(1.05);
}

/* project-details-5 */
.project-details-5 .img-container {
  width: 570px;
  height: 386px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}

.project-details-5 .img-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg-1.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.project-details-5 .img-container:hover::before {
  transform: scale(0.96) rotate(5deg);
}

.project-details-5 img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  position: relative;
  z-index: 1;
}

.project-details-5 img:hover {
  transform: scale(1.05);
}

.project-details-6 .img-container {
  width: 570px;
  height: 386px;
  flex-shrink: 0;
  overflow: hidden;
  position: relative;
}
.project-details-6 .img-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('bg-3.png');
  background-size: contain;
  background-repeat: no-repeat;
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.project-details-6 .img-container:hover::before {
  transform: scale(0.96) rotate(5deg);
}

.project-details-6 img {
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  width: 100%;
  position: relative;
  z-index: 1;
}

.project-details-6 img:hover {
  transform: scale(1.05);
}
@media screen and (max-width: 646px){
  .tag{
    display: none !important;
  }
  .project-details-1 .img-container{
    width: 100%;
    margin: 0 auto;
  }
  .project-details-2 .img-container{
    width: 100%;
    margin: 0 auto;
  }
  .project-details-3 .img-container{
    width: 100%;
    margin: 0 auto;
  }
  .project-details-4 .img-container{
    width: 100%;
    margin: 0 auto;
  }
  .project-details-5 .img-container{
    width: 100%;
    margin: 0 auto;
  }
    .project-details-6 .img-container{
    width: 100%;
    margin: 0 auto;
  }
 /** .project-details-1 img{
  width: 70%;
  height: auto;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0s ease 0s;

  }
  .project-details-2 img{
  width: 70%;
  height: auto;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0s ease 0s;

  }
  .project-details-3 img{
  width: 70%;
  height: auto;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0s ease 0s;

  }
  .project-details-4 img{
  width: 70%;
  height: auto;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0s ease 0s;

  }
  .project-details-5 img{
  width: 70%;
  height: auto;
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: all 0s ease 0s;

  }**/
  .project-wrapper .txt-container{
    margin: 24px auto 0 auto;
    width: 100%;
  }
  /**.project-details-1 img:hover{
    transform: translate(-50%, -50%);
  }
  .project-details-2 img:hover{
    transform: translate(-50%, -50%);
  }
  .project-details-3 img:hover{
    transform: translate(-50%, -50%);
  }
  .project-details-4 img:hover{
    transform: translate(-50%, -50%);
  }
  .project-details-5 img:hover{
    transform: translate(-50%, -50%);
  }**/
}
@media screen and (max-width: 517px){
  .project-details-1 img{
    top:2px;
  }
  .project-details-1 .img-container{
    height: auto;
  }
  .project-details-2 .img-container{
    height: auto;
  }
  .project-details-3 .img-container{
    height: auto;
  }
  .project-details-4 .img-container{
    height: auto;
  }
  .project-details-5 .img-container{
    height: auto;
  }
  .project-details-6 .img-container{
    height: auto;
  }

}

  

.tag{
  display: flex;
  padding: 4px 8px;
  justify-content: center;
  align-items: center;
  gap: 8px;
  border-radius: 4px;
  background: rgba(217, 217, 217, 0.50);
}
.company{
  color: #5A5A5A;;
}
.add{
  padding-top:64px;
  padding-bottom: 60px;
    max-width: 1160px;
    margin: 0 auto;
}
.add h3{
  font-size: 24px;
  font-weight: 400;
}
.add u{
  cursor: url('cursor-h.svg'), pointer;
}
.semibold{
  font-weight: 600;
}
.under-nav{
  font-size:12px;
  display: flex;
  padding: 24px 20px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-top: 1px solid #000;
  background:white;

}
.under-nav-1{
  font-size:12px;
  display: flex;
  padding: 24px 20px;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
  border-top: 1px solid #000;
  background:#F3F3F1;
  margin-top:60px;

}
.green{
  color: #239D18;
  font-size: 8px;
}

/*case study contents*/
.cs-main-content{
  width: -moz-calc(100% - 40px);
  width: -webkit-calc(100% - 40px);
  width: calc(100% - 40px);
  margin: 0 auto;
  padding:0 20px;
}
.cs-main-content .cs-title{
  margin-top: 144px;
  color: #000;
  font-size: 56px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
}
.cs-main-content p{
  margin-top: 28px;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.5;

}
.cs-header{
  max-width: 1200px;
  margin: 0 auto;
}
.cs-details{
  display: inline-flex;
  align-items: flex-start;
  gap: 40px;
  margin-top: 36px;
}

.sub-title {
  margin-top: 0px !important;
  color:#5A5A5A;
  font-size: 16px !important;
}
.cs-details p{
  margin-top: 8px;
  font-size: 16px;
  font-weight: 500;
}
@media screen and (max-width: 607px){
  .cs-details{
    display: block;
  }
}
.contribution{
  max-width: 380px;
}
.team{
  max-width: 380px;
}
.impact{
  margin-top: 36px;
}
.data-wrapper{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 16px;
  flex-wrap: wrap;
}
.data{
  width: 192px;
  height: 184px;
  border-radius: 24px;
  border: 1px solid #8D8D8D;
  background: #FFF;
  padding: 24px 16px 16px 16px;
}
.data-title{
  line-height: normal !important;
  margin: 0 !important;
}
.data-content{
  font-size: 48px !important;
  text-align: right;
  position: relative;
  bottom: 0;
  margin-top: 98px !important;
  line-height: normal !important;
}
.s-data-content{
  font-size: 36px !important;
  text-align: right;
  position: relative;
  bottom: 0;
  margin-top: 98px !important;
  line-height: normal !important;
}
.s-data-content-1{
  font-size: 36px !important;
  text-align: right;
  position: relative;
  bottom: 0;
  margin-top: 84px !important;
  line-height: normal !important;
}
.s-data-content-2{
  font-size: 36px !important;
  text-align: right;
  position: relative;
  bottom: 0;
  margin-top: 112px !important;
  line-height: normal !important;
}
.s-data-content-3{
  font-size: 36px !important;
  text-align: right;
  position: relative;
  bottom: 0;
  margin-top: 69px !important;
  line-height: normal !important;
}
.exception{
  font-size: 20px;
}
.fullwidth-img{
  width: -moz-calc(100% + 40px);
  width: -webkit-calc(100% + 40px);
  width: calc(100% + 40px);
  margin:64px 0 0 -20px;
}
.fullwidth-vid{
  width: -moz-calc(100% + 40px);
  width: -webkit-calc(100% + 40px);
  width: calc(100% + 40px);
  margin:64px 0 0 -20px;
  position: relative;
  padding-top: 56.25%; /* Aspect ratio: 16:9 */
  overflow: hidden;
}
.fullwidth-vid iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.iframe-vid{
  width: 100%;
  max-width:872px;
  margin:24px 0 0 -20px;
  position: relative;
  padding-top: 56.25%; /* Aspect ratio: 16:9 */
  overflow: hidden;
}
.iframe-vid iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  border-radius: 24px;
}
.fullwidth-protopie{
  max-width: 427px;
  width: 100%;
  position: relative;
  padding-top: 45%; /* Adjust as needed, e.g., 75% for 4:3 ratio, or adjust for your content */
  overflow: hidden;
  margin: 24px auto;
  border-radius: 24px;

}
.fullwidth-protopie iframe{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
}
.cs-text-wrapper{
  max-width:827px;
  margin: 0 auto;
}
.cs-text-wrapper p{
  font-size:16px;
  margin-top:24px;
}
.cs-subtitle{
  font-size: 36px;
  font-weight: 300;
  margin-top: 64px;
  margin-bottom: 0px;
}
.img-wrapper-1{
  max-width: 1038px;
  margin: 28px auto 24px auto;
  padding-right:60px;
}
.img-wrapper-1 img{
  width: 100%;
}
.img-explanation{
  font-size: 14px !important;
  font-weight: 300 !important;
  text-align: center;
  margin-top: 0px !important;
  font-style: italic;
}
.img-wrapper-2{
  max-width: 499px;
  margin: 28px auto 24px auto;

}
.img-wrapper-2 img{
  width: 100%;
}

.txt-box{
  padding:12px;
  max-width: 381px;
  border-radius: 8px;
  border: 1px solid #DADADA;
}
.txt-box-s{
  padding:12px;
  max-width: 381px;
  border-radius: 8px;
  border: 1px solid #DADADA;
  flex: 1;
  height: 188px;
}
@media screen and (max-width: 861px){
  .txt-box-s{
    height: auto;
    flex: auto;
  }
  .txt-box-wrapper-s {
    flex-wrap: wrap;
  }

}
.txt-box-full{
  padding:12px;
  border-radius: 8px;
  border: 1px solid #DADADA;
}
.txt-box-title{
  display: inline-flex;
  gap: 8px;
}
.txt-box .txt-wrap{
  margin-top: 12px !important;
}
.txt-box-s .txt-wrap{
  margin-top: 12px !important;
}
.txt-box-full .txt-wrap{
  margin-top: 12px !important;
  font-size: 16px;
}
.txt-box-full .txt-box-title .txt-box-text{
  font-size: 16px;
}
.txt-box-text{
  margin:0 !important;
  font-weight: 600 !important;
}
.txt-box-wrapper{
  margin-top: 24px;
  display: inline-flex;
  max-width: 827px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
.txt-box-wrapper-s{
  margin-top: 24px;
  display: inline-flex;
  max-width: 827px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 8px;
  justify-content: center;
}
.txt-box-wrapper-noflex{
    max-width: 827px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.h4-subtitle{
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  margin: 24px 0;
}

.img-wrapper-3{
  max-width: 827px;
  margin: 28px auto 24px auto;

}
.img-wrapper-3 img{
  width: 100%;
}
.project-btn{
  display: inline-flex;
  padding: 12px 24px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 40px;
  border: 1px solid #000;
}
.btn-txt{
  text-align: right;
  font-size: 18px;
  font-weight: 300;
  line-height: normal;
}
.btn-wrapper{
  padding: 0 20px;
  display: flex;
  justify-content: right;
  margin-top: 120px;
  margin-bottom: 60px;
}
.btn-wrapper-1{
  padding: 0 20px;
  display: flex;
  justify-content: space-between;
  margin-top: 120px;
  margin-bottom: 60px;
}
.golink-wrapper{
  display: flex;
  max-width: 827px;
  justify-content: space-between;
  align-items: center;
  margin: 28px auto 0 auto;
  gap:8px;
}
.golink{
  width: 246px;
  border-radius: 8px;
  border: 1px solid #dadada;
  background: #FFF;
  padding: 12px 12px 16px 12px;

}

.golink-title{
  margin:0 !important;
  color: #5A5A5A;
  font-size: 16px;
  font-style: normal;
  font-weight: 600!important;

}
.golink-content{
  margin:18px 0 0 0 !important;
  text-align: right;
  font-family: Inter;
  font-size: 24px !important;
  font-weight: 600!important;
  line-height: 1.0!important;
}

.golink-content-1{
  margin:42px 0 0 0 !important;
  text-align: right;
  font-family: Inter;
  font-size: 24px !important;
  font-weight: 600!important;
  line-height: 1.0!important;
}

.google-txt-wrapper{
  border-radius: 8px;
  border: 1px solid #DADADA;
  width:383px;
  padding: 12px;
}
.g-txt-title{
  font-size: 16px;
  font-weight: 600;
  margin: 0;
}
.g-txt-detail{
  font-size: 16px !important;
  font-weight: 400 !important;
  margin:12px 0 0 0 !important;

}
.google-impact-group{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}

.google-impact-wrapper{
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 827px;
  margin: 28px auto 0 auto;
}
@media screen and (max-width: 895px){
  .google-impact-wrapper{
    flex-direction: column;
    gap: 12px;
  }
  .golink-wrapper{
    justify-content: center;
    flex-wrap: wrap;
  }

}
.img-wrapper-4{
  max-width: 1200px;
  margin: 28px auto 0 auto;
}
.img-wrapper-4 img{
  width: 100%;
}
.img-wrapper-flex{
  margin-top: 28px;
  display: flex;
  gap:80px;
  justify-content: center;

}
.img-wrapper-flex img{
  width: 180px;
  border-radius: 28px;
  border: solid 1px #dadada;
  margin-bottom: 24px;
}
@media screen and (max-width: 517px){
  .img-wrapper-flex{
    flex-direction: column;
    align-items: center;
  }
}
.pi-wrapper{
  display: grid;
  grid-auto-flow:column;
  grid-auto-columns: 1fr;
  gap:16px;
  margin-top: 16px;
}
@media screen and (max-width: 517px){
  .pi-wrapper{
    display: grid;
    grid-auto-flow:row;
  }
}
.pi-txt-div{
  border-radius: 24px;
  border: 1px solid #8D8D8D;
  background: #FFF;
  padding: 24px 16px;
}
.pi-txt-div p{
  margin: 0;

}

.download{
  font-size: 24px;
  font-weight: 300;
  line-height: normal;
  margin-top: 36px;
}
.cs-text-wrapper ul{
  width: 80%;
  margin: 24px auto 0 auto;
  
}
.cs-text-wrapper li{
  list-style: disc;
  line-height: 1.5;
  font-style: italic;

}

.cs-text-wrapper .wo-italic li{
  font-style: normal;
  line-height: 2.0;
}

.video-container {
    max-width: 827px;

    margin: 24px auto;
}

.video-container video {
    width: 100%;
    height: auto;
    border-radius: 16px;
    max-width: 100%;
    max-height: 100%;
}
/*archive*/
.archive-intro-wrapper h1{
  margin: 72px 0 0 0;
  font-size: 64px;
  font-weight: 400;
  line-height: 1.0;
  text-transform: uppercase;
}

.archive-content h2{
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin:88px 0 0 0;
}
.archive-project-wrapper{
  display: flex;
  max-width: 1160px;
  align-items: flex-start;
  align-content: flex-start;
  gap: 48px 24px;
  flex-wrap: wrap;
  margin-top: 32px;

}
@media screen and (max-width: 607px){
  .archive-intro-wrapper h1{
    font-size: 48px;
  }
  .archive-project-wrapper{
    justify-content: center;
  }
  
}
.archive-project-container{
  cursor: url('cursor-h.svg'), pointer;
  width: 272px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.work-tag{
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  border: 1px solid #239D18;
  position: relative;
  top: 8px;
  left: 8px;
}
.work-tag-real{
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  border: 1px solid #2A79EA;
  position: relative;
  top: 8px;
  left: 8px;
}
.work-tag-h{
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  border: 1px solid #8A30CF;
  position: relative;
  top: 8px;
  left: 8px;
}
.work-tag-vh{
  display: inline-flex;
  padding: 8px 12px;
  justify-content: center;
  align-items: center;
  gap: 10px;
  border-radius: 100px;
  border: 1px solid #8A30CF;
  position: relative;
  top: 8px;
  left: 8px;
  z-index: 1;
}
.school{
  color: #239D18;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
}
.real-world{
  color: #2A79EA;
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
}
.hackathon{
  color: #8A30CF;
  font-size: 12px;
  font-weight: 500;
  line
}
.archive-photo-container{
  width: 272px;
  height: 360px;
  cursor: url('cursor-h.svg'), pointer;
}
.archive-photo-container img{
  width: 182.71px;
  margin-top: 8px;
  margin-left: 45px;
  cursor: url('cursor-h.svg'), pointer;
}
.archive-photo-container-pc{
  width: 272px;
  height: 360px;
  cursor: url('cursor-h.svg'), pointer;
}
.archive-photo-container-pc img{
  width: 272px;
  margin-top: 8px;
  cursor: url('cursor-h.svg'), pointer;

}
.archive-photo-container-full {
  width: 272px;
  height: 360px
  cursor: url('cursor-h.svg'), pointer;
}
.archive-photo-container-full img{
  width: 100%;
  height: 100%;
  position: relative;
  bottom: 32.5px;
  cursor: url('cursor-h.svg'), pointer;
}
.archive-details{
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  align-self: stretch;
  cursor: url('cursor-h.svg'), pointer;
}
.archive-details p{
  font-size: 12px;
  font-weight: 300;
  line-height: normal;
  cursor: url('cursor-h.svg'), pointer;
}
.a-tag{
  width: 177px;
  cursor: url('cursor-h.svg'), pointer;
}
.archive-title{
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  cursor: url('cursor-h.svg'), pointer;
}
.archive-text-container{
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  padding-top: 12px;
  border-top: solid 1px #000;
  width: 100%;
  cursor: url('cursor-h.svg'), pointer;
}
.overview-list{
  font-style: normal!important;
}
.img-wrapper-pcmob{
    display: flex;
    max-width: 827px;
    justify-content: center;
    align-items: center;
    margin: 28px auto 24px auto;
    gap: 20px;

}
.img-wrapper-pcmob img{
  height: 300px;
  border-radius: 12px;
  border: solid #dadada 1px;
}
.img-wrapper-pcmobi{
    display: flex;
    max-width: 827px;
    justify-content: center;
    align-items: center;
    margin: 28px auto 24px auto;
    gap: 20px;

}
.img-wrapper-pcmobi img{
  height: 430px;
  border-radius: 12px;
  border: solid #dadada 1px;
}
@media screen and (max-width: 672px){
  .img-wrapper-pcmob{
    flex-direction: column;
  }
  .img-wrapper-pcmob img{
    height: 260px;
    border-radius: 12px;

  }
  .img-wrapper-pcmobi{
    flex-direction: column;
  }
  .img-wrapper-pcmobi img{
    height: 260px;
    border-radius: 12px;

  }
  
}

@media screen and (max-width: 443px){
  .img-wrapper-pcmob img{
    height: 200px;
    border-radius: 8px;

  }
  .img-wrapper-pcmobi img{
    height: 200px;
    border-radius: 8px;

  }
  
}
.subtitle-italic{
  font-size: 20px;
  font-style: italic;
  color: #4D4D4D; 
}


.gif-container{
  margin-top:40px;
  margin-bottom:16px;
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 0 12px; /* Optional: to prevent edge overflow on small screens */
}

.gif-container img {
  width: calc((100% - 48px) / 3);
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #d3d3d3; /* Light grey border */
  object-fit: cover; /* Ensures content fits nicely if needed */
}
.gif-container-2{
  margin-top:28px;
  margin-bottom:20px;
  display: flex;
  justify-content: center;
  padding: 0 12px; /* Optional: to prevent edge overflow on small screens */
}

.gif-container-2 img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 12px;
  border: 1px solid #d3d3d3; /* Light grey border */
  object-fit: cover; /* Ensures content fits nicely if needed */
}
.content{
  padding-top:20px;
}
.content video{
  width:100%;
  border-radius:20px;
}
.wrap-archive-intro {
  font-size: 24px;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
  margin-top: 72px;
    color: grey;

}

.vd-flexbox{
  display: flex;
    justify-content: space-around;
    align-items: center;
}
.vd-flexbox video{
  max-width:200px !important;
}
.vd-flexbox div{
  max-width:425px;
}
@media screen and (max-width: 426px){
  .vd-flexbox video{
      max-width:163px !important;
    }
  .vd-flexbox div{
      padding:0 12px;
    }
}

.img-wrapper-5{
  display: flex;
  max-width: 827px;

}
.img-wrapper-5 img{
  width: 100%;
}
@media screen and (max-width: 672px){
  .img-wrapper-5{
  display: block;

}

}
.project-nav{
  display: flex;
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 60px;
  gap:8px;
  flex-wrap: wrap;
}
.project-nav button {
  font-weight: 400;
  font-size: 36px;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  background: #F3F3F1;
  cursor: url('cursor-h.svg'), pointer;
  color: grey;
  /* 부드러운 transition 추가 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-nav button.active {
  color: #EDEDEA;
  border-radius: 100px;
  background: #292929;
}

/* 호버 효과도 추가하면 더 인터랙티브해집니다 */
.project-nav button:hover:not(.active) {
  background: #E8E8E6;
  transform: translateY(-1px);
}

.project-nav button:active {
  transform: translateY(0px);
}
.contentnav {
  opacity: 0;
  transform: translateY(20px) scale(0.97);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  visibility: hidden;
  pointer-events: none;
  /* flexbox item에서 공간을 차지하지 않도록 */
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.contentnav.show {
  opacity: 1;
  transform: translateY(0) scale(1);
  visibility: visible;
  pointer-events: auto;
  /* 정상적인 flexbox item으로 복귀 */
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
}

.scrollmenu-wrap{
  background-color: #F3F3F1;
  border-radius: 24px 24px 0 0;
  margin-top:60px;
  
}
.scrollmenu-wrap h3{
  font-size: 32px;
  font-weight: 300;
  margin:0;
  padding:32px 20px;
}
.scrollmenu{
  text-align: center;
  overflow: auto;
  white-space: nowrap;
  padding: 0 20px 40px 20px;
  cursor: url('cursor-h.svg'), pointer;
}
.scrollmenu a{
  display: inline-block;
  cursor: url('cursor-h.svg'), pointer;
      width: 30%;
    max-width: 300px;
}
.scrollmenu img{
  width:100%;
  cursor: url('cursor-h.svg'), pointer;
}
.scrollmenu p{
  padding-top:4px;
}
@media screen and (max-width: 650px){
  .scrollmenu{
            width: 100%;
        white-space: wrap;
        padding: 0 0 16px 0;
  }
  .scrollmenu p{
    display: none;
  }
  .scrollmenu a{
    padding-bottom:16px;
    width:45%;
  }

}

.project-nav-1{
  display: flex;
  max-width: 1160px;
  margin: 0 auto;
  padding-top: 60px;
  gap:8px;
  flex-wrap: wrap;
}
.project-nav-1 button {
  font-weight: 400;
  font-size: 36px;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  background: #FFF;
  cursor: url('cursor-h.svg'), pointer;
  color: grey;
  /* 부드러운 transition 추가 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.project-nav-1 button.active {
  color: #EDEDEA;
  border-radius: 100px;
  background: #292929;
}

/* 호버 효과도 추가하면 더 인터랙티브해집니다 */
.project-nav-1 button:hover:not(.active) {
  background: #E8E8E6;
  transform: translateY(-1px);
}

.project-nav-1 button:active {
  transform: translateY(0px);
}