@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: linear-gradient(214deg, #000 -0.8%, #191F28 79.84%);
  /* background: linear-gradient(180deg, #000 25%, #191F28 65.92%); */
padding-bottom: 80px;
}

.Subpage_title .inner{
padding:175px 90px 80px 90px
}

.Subpage_title .inner h2{
  color: #FFF;

  font-size: 62px;
  font-style: normal;
  font-weight: 800;
  line-height: 84px; /* 135.484% */
}
.Subpage_title .Subpage_menu{position: relative; margin-top: 20px;}
.Subpage_title .Subpage_menu a{display: inline-block; padding-right: 20px;}
.Subpage_title .Subpage_menu a li{
  color: var(--Gray-200, #E5E8EB);
  font-size: 20px;
  font-style: normal;
  font-weight: 400;
  line-height: 28px; /* 140% */
}



/* 서브제목부분 공통---------- */
.PortPolioContents{
  text-align: center;
}
.PortPolioContents .inner{
  padding: 100px;
}
.Content_title i{
  color:  #F60;
font-size: 15px;
font-style: normal;
font-weight: 400;
line-height: 22px; /* 146.667% */
}
.Content_title strong{
  display: block;
 
  color: #FFF;
font-size: 44px;
font-style: normal;
font-weight: 600;
line-height: 60px; /* 136.364% */
}
.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% */
}

.buttonWrap{
  text-align: right;
  margin-top: 40px;
  margin-bottom: 30px;
}
.buttonWrap a{
  text-decoration: none;
}
.buttonWrap .orangebutton{
  text-align: center;
padding: 18px 24px;
  border-radius: 6px;
border: 1.7px solid #FF9F5E;
background: rgba(255, 218, 194, 0.25);
color: #F60;
}
.buttonWrap .graybutton{
  text-align: center;
  padding: 18px 24px;
  border-radius: 6px;
  border: 1.7px solid #FFF;
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}

/* 슬라이드 공통----------- */
.swiper {
  width: 100%;
  height: 100%;
  margin-top: 80px;
}

.swiper-slide {
  text-align: center;
  font-size: 18px;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;

}

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

/* 슬라이드 공통----------- */


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

.YouTube_PortPolio .swiper {
 height:940px; 
}
.YouTube_PortPolio .youtubeVideo{
  width: 386px;
  border-radius: 16px;
border: 1.3px solid #EEE;
background: #FFF;
box-shadow: 0px 4px 8px 0px rgba(93, 98, 102, 0.15);
padding: 12px ;
align-items: center;
margin-bottom: 16px;
box-sizing: border-box;
}

.YouTube_PortPolio .casetop{
  width: 360px;
  height: 200px;

}
.YouTube_PortPolio .casetop img{
  width: 360px;
  height: 200px;
  border-radius: 16px;
}
.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; /* 133.333% */
     }
     .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 끝------------------------ */









/*----------------Instagram_PortPolio 시작----------------------  */       
.Instagram_PortPolio{

}

.Progressioncase{
  padding:32px 120px
}

.Progressioncase .flexcontiner{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
gap: 10px;
align-content: stretch;
}

.Instagram_PortPolio .Progressioncase .flexcontiner .flexitem{
  width:240px;
  margin-bottom:20px;

}


.Instagram_PortPolio .casetop{
    width: 240px;
    height: 300px;
    position: relative;
  }
  .Instagram_PortPolio .casetop img{
    width: 240px;
    height: 300px;

  }

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


/*----------------Instagram_PortPolio 끝----------------------  */    



/* ----------------------Blog_PortPolio 시작------------------------ */

.Blog_PortPolio .swiper {
  height:640px; 
 }
 .Blog_PortPolio .blogcase{
   width: 234px;
   border-top-right-radius:8px;
   border-top-left-radius:8px;
 align-items: center;
 margin-bottom: 16px;
 box-sizing: border-box;
 }
 
 .Blog_PortPolio .casetop{
  width: 234px;
   height: 234px;
 
 }
 .Blog_PortPolio .casetop img{
  width: 234px;
  height: 234px;
   border-top-right-radius:8px;
   border-top-left-radius:8px;
 }
 .Blog_PortPolio .casetop span i{
   color: #FF5F00;
   font-size: 14px;
 }
 
 
 
 .Blog_PortPolio .casebottom{
   position: relative;
   padding:10px 0;
   text-align: left;
 
   }
   .Blog_PortPolio .casebottom div{
    display: inline-block;
    vertical-align: top;
   }
   .Blog_PortPolio  .casebottom{
    background: #000;
    padding: 10px 20px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius:8px;
   }
    .Blog_PortPolio  .casebottom h6{
      color:  #FFF;
      font-family: Pretendard;
      font-size: 16px;
      font-style: normal;
      font-weight: 400;
      line-height: 26px; /* 162.5% */
      }
   
      .Blog_PortPolio  .casebottom div:nth-child(2){
   margin-right:0;
  
       }
       .Blog_PortPolio .casebottom div:nth-child(2) i,
       .Blog_PortPolio .casebottom div:nth-child(2) span{
       color: var(--Orange-500, #F60);
 font-size: 12px;
 font-style: normal;
 font-weight: 400;
 line-height: 16px; /* 133.333% */
      }
      .Blog_PortPolio .casebottom div:nth-child(2) span{margin-right: 2px;}
      .Blog_PortPolio .casebottom div i{margin-right: 1px;}
      .Blog_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% */
 }
 
 .Blog_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;
 }
 
 
 /* ----------------------Blog_PortPolio 끝------------------------ */
 


/*----------------AdvertisingModel_PortPolio 시작----------------------  */   
.AdvertisingModel_PortPolio .Progressioncase{
  border-radius: 16px;
  background: #F9FAFB;
  box-shadow: 0px 4px 20px 0px rgba(0, 0, 0, 0.15);
  padding: 24px 24px 32px 24px;
  margin-bottom: 20px;
  margin-top: 48px;
}

.AdvertisingModel_PortPolio .Progressioncase .casebottom div:nth-child(2) h6 {
  color: #333D4B;
}

.AdvertisingModel_PortPolio .Progressioncase .flexcontiner .smallitem{
  position: relative;
  width: 190px;
  height: 300px
}

.AdvertisingModel_PortPolio .Progressioncase .flexcontiner .smallitem .casetop{
  width: 190px;
  height: 236px;
  }

.AdvertisingModel_PortPolio .Progressioncase .flexcontiner .bigitem{
  width: 390px;
  height: 300px
}

.AdvertisingModel_PortPolio .Progressioncase .flexcontiner .bigitem .casetop img{
  width: 390px;
  height: 236px;
}

.AdvertisingModel_PortPolio .casetop span i{
  color: #FF5F00;
  font-size: 14px;
}



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

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

/*----------------AdvertisingModel_PortPolio 끝----------------------  */