.portfolio_marquee {
  position: relative;
  border-top: #8a949e33 1px solid;
  margin-top: 56px;
  padding-top: 56px;
  z-index: 10;
}
.portfolio_marquee,
.portfolio_marquee .list {
  display: flex;
  align-items: flex-end;
}
.portfolio_marquee.stop .list {
  margin: 0 auto;
}
.portfolio_marquee .list li {
  padding: 0 12px;
}
.portfolio_marquee .list a {
  position: relative;
  display: block;
  width: 380px;
  aspect-ratio: 1/1;
  padding-top: 40px;
}
.portfolio_marquee .list .flip {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1/1;
  overflow: hidden;
}
.portfolio_marquee .list .before,
.portfolio_marquee .list .after {
  position: relative;
  width: 100%;
  aspect-ratio: 1/1;
  border-radius: 8px;
}
.portfolio_marquee .list .before {
  display: flex;
  justify-content: center;
  align-items: center;
}
.portfolio_marquee .list .before .bg {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: 0.3s linear;
}
.portfolio_marquee .list .before .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 80%;
  max-height: 80%;
}
.portfolio_marquee .list .before .tit {
  position: absolute;
  bottom: 20px;
  left: 0;
  padding: 0 20px;
  z-index: 1;
  width: 100%;
  text-align: left;
}
.portfolio_marquee .list .before .tit p {
  font-size: 15px;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portfolio_marquee .list .before .tit strong {
  font-size: 18px;
  color: #fff;
  font-weight: 600;
  line-height: 1.65;
  letter-spacing: -0.51px;
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.portfolio_marquee .list .after {
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  padding: 40px;
  display: flex;
  flex-direction: column;
  background: #0169d8;
  transition: 0.4s ease-out;
}
.portfolio_marquee .list .after .type {
  font-size: 14px;
  color: #fff;
  line-height: 1.7;
  font-family: "Nohemi", "Pretendard", sans-serif;
}
.portfolio_marquee .list .after .tit {
  font-size: 32px;
  color: #fff;
  font-weight: 600;
  line-height: 1.45;
  margin: 32px 0 8px;
  letter-spacing: -0.96px;
}
.portfolio_marquee .list .after p {
  font-size: 17px;
  color: #cdd1d5;
  line-height: 1.65;
  letter-spacing: -0.51px;
}
.portfolio_marquee .list .after .logo {
  position: absolute;
  bottom: 40px;
  right: 40px;
  opacity: 0.6;
}
.portfolio_marquee .btn_link {
  letter-spacing: .-6px;
}

/* ------------------------------ PC Guide ------------------------------ */
@media screen and (max-width:1280px){
/* main_PORTFOLIO */
	.main_portfolio .tbbg{margin-top:-28px;}
	.portfolio_marquee{margin-top:48px;padding-top:48px;}
	.portfolio_marquee .list li{padding:0 8px;}
	.portfolio_marquee .list a{width:320px;padding-top:30px;}
	.portfolio_marquee .list .before .tit p{font-size:14px;}
	.portfolio_marquee .list .before .tit strong{font-size:17px;line-height:1.4;}
	.portfolio_marquee .list .after{padding:30px;}
	.portfolio_marquee .list .after .type{font-size:13px;}
	.portfolio_marquee .list .after .tit{font-size:28px;margin:28px 0 8px;}
	.portfolio_marquee .list .after p{font-size:16px;}
	.portfolio_marquee .list .after .logo{bottom:30px;right:30px;}
}

/* ------------------------------ Hover ------------------------------ */
@media screen and (min-width:1024px){
	.portfolio_marquee .list li a:hover .before .bg{transform:scale(1.2);transition:1.5s linear;}
}

/* ------------------------------ Tablet PC ------------------------------ */
@media screen and (max-width:1023px){
/* main_PORTFOLIO */
	.main_portfolio .tbbg{margin-top:10px;text-align:left;display:inline-block;}
	.portfolio_marquee{margin-top:40px;padding-top:40px;}
	.portfolio_marquee .list li{padding:0 6px;}
	.portfolio_marquee .list a{width:280px;padding-top:20px;}
	.portfolio_marquee .list .before .tit p{font-size:13px;}
	.portfolio_marquee .list .before .tit strong{font-size:15px;}
	.portfolio_marquee .list .after{padding:20px;}
	.portfolio_marquee .list .after .type{font-size:12px;}
	.portfolio_marquee .list .after .tit{font-size:24px;margin:24px 0 6px;}
	.portfolio_marquee .list .after p{font-size:14px;}
	.portfolio_marquee .list .after .logo{bottom:20px;right:20px;}
}

/* ------------------------------ Mobile ------------------------------ */
@media screen and (max-width:767px){
	.main_portfolio .outbox{padding-bottom:100px;}
	.main_portfolio .tbbg{margin-top:5px;}
	.portfolio_marquee{margin-top:20px;padding-top:20px;}
	.portfolio_marquee .list li{padding:0 3px;}
	.portfolio_marquee .list a{width:160px;padding-top:10px;}
	.portfolio_marquee .list .before .tit{bottom:16px;padding:0 12px;}
	.portfolio_marquee .list .before .tit p{font-size:12px;}
	.portfolio_marquee .list .before .tit strong{font-size:14px;}
	.portfolio_marquee .list .after{padding:10px;}
	.portfolio_marquee .list .after .type{font-size:11px;}
	.portfolio_marquee .list .after .tit{font-size:20px;margin:16px 0 4px;}
	.portfolio_marquee .list .after p{font-size:12px;}
	.portfolio_marquee .list .after .logo{bottom:16px;right:16px;}
}