@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: #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 a{
  color: #4E5968;
}
.hashwrap div#buttonActive{

text-align: center;

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

  color: #F9FAFB;
}
.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: #191F28;
}
.PortPolioContents:nth-child(even){

  background: #fff;
}
.YouTube_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% */
}



.contetnsWrapper {
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: wrap;
}



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




/* ----------------------YouTube_PortPolio 시작------------------------ */


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

}

.YouTube_PortPolio .casetop{
  width: 408px;
  height: 230px;

}
.YouTube_PortPolio .casetop img{
  width: 408px;
  height: 230px;
  border-radius: 12px;
  object-fit: cover;
}
.YouTube_PortPolio  .casetop span i{
  color: #FF5F00;
  font-size: 14px;
}



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

  }
  .YouTube_PortPolio .casebottom div{
   display: inline-block;
   vertical-align: top;
  }
  
  .YouTube_PortPolio .casebottom div:nth-child(1) img{
    margin-right: 2px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
   }
   .YouTube_PortPolio .casebottom div:nth-child(2) h6{
      text-align: left;
      color: #333D4B;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
  margin-bottom: 5px;
     }
  
     .YouTube_PortPolio .casebottom div:nth-child(2){
  margin-right:0;
 
      }
      .YouTube_PortPolio .casebottom div:nth-child(2) i,
      .YouTube_PortPolio .casebottom div:nth-child(2) span{
      color: var(--Orange-500, #F60);
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 16px;
margin-right: 3px;
     }
     .YouTube_PortPolio .casebottom div:nth-child(2) span{margin-right: 2px;}
     .YouTube_PortPolio .casebottom div i{margin-right: 1px;}
     .YouTube_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% */
}

.YouTube_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;
}


/* ----------------------YouTube_PortPolio 끝------------------------ */

/* 
.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;

}
 */


/* pagination------------------ * */
.paginationWrap{
  text-align: center;
  margin-top: 55px;
 
}
.pagination{
  display: flex;
justify-content: center;
align-items: center;
gap: 10px;
  text-align: center;
  margin-top: 80px;
  margin-bottom: 30px;
}
.pagination a {
  display: inline-block;

}

.pagination 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: 400;
}

.pagination a.active {
  border-radius: 4px;
background: #F60 ;
color: #FFF ;
font-size: 14px;
font-style: normal;
font-weight: 600;
}
.pagination a .fas{
  font-size: 14px;
  font-weight: 600;
  font-stretch: normal;
  font-style: normal;
  line-height: 1.4;
  letter-spacing: -0.32px;
  text-align: center;


}
.pagination a:hover:not(.active) {background-color: #ddd;}