@charset "UTF-8";
@font-face {
  font-family: 'Paperlogy-8ExtraBold';
  src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/2408-3@1.0/Paperlogy-8ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
}



.Subpage_title{
  /* background: radial-gradient(105.35% 166.87% at 32.16% -63.74%, #FF5F00 0%, #191F28 100%); */
  background: linear-gradient(214deg, #000 -0.8%, #191F28 79.84%);

  padding-bottom: 80px;
}

.Subpage_title .inner{
padding:100px 90px 80px 90px
}
.Subpage_title .inner span{
  color: var(--Gray-200, #E5E8EB);
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 28px; /* 140% */
}
.Subpage_title .inner h2{
  color: #FFF;

  font-size: 62px;
  font-style: normal;
  font-weight: 800;
  line-height: 84px; /* 135.484% */
}


.hashwrap{margin-top: 42px; margin-bottom: 64px;}
.hashwrap div{
  display: inline-block;
  border-radius: 48px;
padding: 8px 22.5px;
color: var(--Gray-700, #4E5968);
text-align: center;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px; /* 140% */
margin: 6px 8px;
border: 1px solid #D1D6DB;
background: #F9FAFB;
}
.hashwrap div#buttonActive{
  color: #FFF;
text-align: center;

font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 28px;
border: 1px solid  #F60;
background:  #FF822E
}

.condition{
  position: relative;
  text-align: right;
  margin-bottom: 24px;
}
.condition button,
.condition span{
background: transparent;

  color: var(--Gray-600, #6B7684);
text-align: center;
font-size: 15px;
font-style: normal;
font-weight: 500;
line-height: 22px; 
border:none
}

/* 서브제목부분 공통---------- */
.PortPolioContents{
  text-align: center;
}
.PortPolioContents .inner{
  padding: 100px;
}
.Content_title span{
  color: #E5E8EB;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 28px; /* 140% */
}
.Content_title strong{
  display: block;
  color: #191F28;
font-size: 44px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 136.364% */
}
.Content_title i{
  color:  #F60;
font-size: 18px;
font-style: normal;
font-weight: 500;
line-height: 22px; 
}

/* .PortPolioContents:nth-child(odd){
  background: #fff;
}
.PortPolioContents:nth-child(even){
  background: #191F28;
} */
.PortPolioContents{
  background: #fff;
}
.insta_PortPolio{
  border-top-right-radius: 32px;
  border-top-left-radius: 32px;
margin-top: -46px;
}

.PortPolioContents:nth-child(even) .Content_title strong{
  color: #191F28;
font-size: 44px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 136.364% */
}

.pageWrap{
  display: flex;
justify-content: center;
align-items: center;
gap: 10px;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 30px;
}
.pageWrap a{
  width: 32px;
height: 32px;
border-radius: 5px;
  cursor: pointer;
  text-decoration: none;
  color: #000;
line-height: 32px;
font-size: 14px;
font-style: normal;
font-weight: 600;

}
.pageWrap a.active{
  border-radius: 4px;
background: #F60;
color: #FFF;
font-size: 14px;
font-style: normal;
font-weight: 600;

}






.contetnsWrapper {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 10px;
flex-wrap: wrap;
}



.swiper-slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}




/* ----------------------insta_PortPolio 시작------------------------ */


.insta_PortPolio .PortfolioVideo{
  width: 240px;
  border-radius: 16px;
align-items: center;
margin-bottom: 16px;
box-sizing: border-box;

}

.insta_PortPolio .casetop{
  width: 240px;
  height:425px;

}
.insta_PortPolio .casetop img{
  width: 240px;
  height:425px;
  border-radius: 12px;
}
.insta_PortPolio  .casetop span i{
  color: #FF5F00;
  font-size: 14px;
}



.insta_PortPolio .casebottom{
  position: relative;
  padding:10px 0;
  text-align: left;

  }
  .insta_PortPolio .casebottom div{
   display: inline-block;
   vertical-align: middle;
  }
  
  .insta_PortPolio .casebottom div:nth-child(1) img{
    margin-right: 2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
   }
   .insta_PortPolio .casebottom div:nth-child(2) h6{
      text-align: left;
      color: #333D4B;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
  margin-bottom: 5px;
     }
  
     .insta_PortPolio .casebottom div:nth-child(2){
width: 180px;
white-space: nowrap;       /* 줄바꿈 안 함 */
overflow: hidden;          /* 넘친 텍스트 숨김 */
text-overflow: ellipsis;   
      }

     .insta_PortPolio .casebottom div:nth-child(2) span{margin-right: 2px;}
     .insta_PortPolio .casebottom div i{margin-right: 1px;}
     .insta_PortPolio .Progressioncase p.crossmidea{
  color:#191F28;
  text-align: center;
  font-family: Pretendard;
  font-size: 32px;
  font-style: normal;
  font-weight: 600;
  line-height: 44px; /* 137.5% */
}

.insta_PortPolio .Progressioncase #Maximization{
  color: var(--Gray-600, #6B7684);
text-align: center;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 122.222% */
margin-top: 24px;
margin-bottom: 48px;
}


/* ----------------------insta_PortPolio 끝------------------------ */


.caseProgress{
  margin-top: 60px;
  text-align: left;
}
.insta_category{
  display: inline-block;
  padding: 8px 20px;
  border-radius: 50px;
  background-color: #F60;
  font-size: 22px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.1;
  letter-spacing: -0.22px;
  text-align: center;
  color: #fff;
  margin-right: 20px;
  margin-bottom: 10px;
}

.caseProgress h4{
  font-size: 28px;
  font-weight: bold;
  line-height: 1.4;
  color: #191F28;
  font-weight: 600;

}

.caseProgress .caseProgressImg{
  margin-top: 30px;
  margin-bottom: 60px;
}

.caseProgress a button{
margin-top: 0;
}
.youtube_button{
  align-items: center;
  padding: 8px 16px;
  opacity: 0.85;
  border-radius: 4px;

  background-color:#fff;
  display: block;
  border:none;
  font-size: 16px;
  font-weight: bold;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.5;
  letter-spacing: normal;
  text-align: left;
  color: #05121a;
  margin:100px auto
}
.youtube_button{
  background-color: #eaf0f4;
}

.worksBlog{
  padding-top: 160px;
  padding-bottom: 50px;
  background-color: #eaf0f4;
}
.worksBlog .bar{
  display: inline-block;
  width: 60px;
  height: 1px;
  background-color:  #F60;
  margin-bottom: 20px;
}
.worksBlog h3{
  color:  #F60;
}
h5{
  font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.6;
    letter-spacing: -0.32px;
    text-align: left;
    color: #F60;
    margin-top: 55px;
}