@charset "utf-8";

#content {
	padding-top: 0;
}

.top-con {
	margin-bottom: 35px;
	padding: 25px 10px 20px;
	font-family: "GmarketSans";
	font-size: 22px;
	color: var(--gs-color-black);
	text-align: center;
	background-image: linear-gradient(to right, #63f70a, #00e4ff, #ce70ff);
}

.ranking-list > div {
	margin-top: 40px;
	--ranking-width: 120px;
	--ranking-height: 180px;
}
.ranking-list a {
	display: flex;
	gap: 15px;
	position: relative;
	margin: 30px 0;
	padding: 0 15px 0 15px;
	height: var(--ranking-height);
}
.ranking-list .thumb {
	flex: 0 0 var(--ranking-width);
	height: var(--ranking-height);
	/*
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
	*/
	overflow: hidden;
}
.ranking-list .thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.ranking-list .caption {
	align-self: flex-start;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 10px;
	height: 100%;
	min-width: 0;
	font-size: 18px;
}
.ranking-list .rank {
	display: flex;
	gap: 10px 20px;
	font-family: "GmarketSans";
	font-size: 50px;
	font-style: italic;
}
.ranking-list .rank-1::after {
	content: "";
	margin-top: 8px;
	width: 28px;
	height: 41px;
	background: url(../img/icon-best.png) no-repeat center / 100%;
}
.ranking-list h1 {
	font-size: 20px;
	font-weight: 500;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	word-wrap: break-word;
}
.ranking-list .channel {
	font-size: 18px;
	color: #9e9e9e;
}
.ranking-list .like {
	margin-top: 8px;
	padding-top: 5px;
	padding-left: 40px;
	font-size: 20px;
	font-weight: 700;
	background: url(../img/icon-like.png) no-repeat left / 28px;
}
.ranking-list a::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 15px;
	height: 100%;
}
.ranking-group-a a:has(.rank.fc-bright-green)::before {
	background-color: var(--gs-color-bright-green);
}
.ranking-group-a a:has(.rank.fc-azure)::before {
	background-color: var(--gs-color-azure);
}
.ranking-group-a a:has(.rank.fc-purple)::before {
	background-color: var(--gs-color-purple);
}

.ranking-group-b {
	display: flex;
	gap: 30px 10px;
	flex-wrap: wrap;
	padding: 0 10px;
}
.ranking-group-b a {
	display: flex;
	flex-direction: column;
	gap: 5px;
	flex: 0 0 32%;
	margin: 0;
	padding: 0;
	height: auto;
}
.ranking-group-b a::before {
	content: none;
}
.ranking-group-b .rank {
	font-size: 24px;
	font-weight: 700;
	color: var(--gs-color-electric-pink);
}
.ranking-group-b .thumb {
	position: relative;
	padding-top: 12px;
	flex-basis: var(--ranking-height);
}
.ranking-group-b .thumb::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 12px;
	background-color: var(--gs-color-electric-pink);
}

@media all and (max-width: 460px) {
	.ranking-group-b a {
		flex-basis: calc(var(--ranking-width) - 15px);
	}
	.ranking-group-b .thumb {
		flex-basis: calc(var(--ranking-height) - 20px);
	}
}

/********** Custom **********/
/* 20250909 add, img hover*/
@-webkit-keyframes shine {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		left: 125%;
		opacity: 0;
	}
}
@keyframes shine {
	0% {
		opacity: 1;
	}
	40% {
		opacity: 1;
	}
	100% {
		left: 125%;
		opacity: 0;
	}
}
.ranking-list .thumb figure {
	position: relative;
	width: 100%;
	height: 100%;
}
.ranking-list .thumb figure::before {
	position: absolute;
	top: 0;
	left: -75%;
	z-index: 2;
	display: block;
	content: '';
	width: 100%;
	height: 100%;
	background: -webkit-linear-gradient(left, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,.3) 100%);
	-webkit-transform: skewX(-25deg);
	transform: skewX(-25deg);
    opacity: 0;
}
.ranking-list .thumb figure:hover::before {
	-webkit-animation: shine .75s;
	animation: shine .75s;
}

/* 20250909 add, caption title hover*/
.ranking-list .caption h1:hover::after{
	width:100%;
}
.ranking-list .caption h1{
  position: relative;
  display: inline-flex;
}
.ranking-list .caption h1:after{
  content:"";
  width: 0;
  height: 10px;
  display: inline-block;
  background: rgba(167,192,255, 0.6);
  position: absolute;
  bottom:0;
  left:0;
  z-index:-1;
  transition: 0.2s all;
}

.ranking-list .caption:has(.fc-bright-green) h1:after{
  background: rgba(95,242,20, 0.6);
}
.ranking-list .caption:has(.fc-azure) h1:after{
  background: rgba(3,135,248, 0.6);
}
.ranking-list .caption:has(.fc-purple) h1:after{
  background: rgba(147,47,255, 0.6);
}

/* 공유하기 버튼 */
.share-items {
    position: absolute;
    width: 10%;
    right: 0;
    margin-top: -1px;
    padding: 10px 10px 10px;
    z-index: 100;
    visibility: hidden;
    transform: translateY(-15px);
    background-color: white;
}

.share-items.open {
    visibility: visible;
    transform: translateY(0px);
    transition: transform 0.3s;
}

.share-items > div {
    position: relative;
}

.share-items .title {
    font-size: 18px;
    font-weight: 500;
    color: var(--gs-color-bright-green, #5ff214);
    text-align: right;
}

.share-items .close-share-btn {
    position: absolute;
    top: 0;
    right: -9px;
    width: 36px;
    height: 36px;
    background: url(../img/btn-popup-x.png) no-repeat center / 18px;
}

.share-items ul {
    padding: 0 10px;
}

.share-items ul:after {
    content: "";
    display: block;
    clear: both;
}

.share-items li {
    padding-top: 10px;
    width: 20%;
    opacity: 0;
    transition: opacity 0.35s 0.15s;
}

.share-items button {
    display: block;
    padding: 10px 0;
    transform: translateY(15px);
    transition: transform 0.3s cubic-bezier(.42,.97,.52,1.49);
    /*padding: 40px 0 0;*/
    background-repeat: no-repeat;
    background-position: top;
    background-size: 35px;
}

.share-items span {
    display: block;
    padding: 40px 0 0;
    font-size: 13px;
    font-weight: 300;
    color: #333;
    background-repeat: no-repeat;
    background-position: top;
    background-size: 35px;
}

.share-items .kakao-talk {
    background-image: url(../img/btn-share-kakao.png);
}

.share-items .facebook {
    background-image: url(../img/btn-share-facebook.png);
}

.share-items .twitter {
    background-image: url(../img/btn-share-twitter.png);
}

.share-items .qr-code {
    background-image: url(../img/btn-share-qr.png);
}

.share-items .link-address {
    background-image: url(../img/btn-share-url.png);
}

.share-items.open li {
    opacity: 1;
}

.share-items.open a {
    transform: translateY(0px);
}

.share-items .kakao-talk {
    transition-delay: 0.1s;
}

.share-items .facebook {
    transition-delay: 0.15s;
}

.share-items .twitter {
    transition-delay: 0.2s;
}

.share-items .qr-code {
    transition-delay: 0.25s;
}

.share-items .link-address {
    transition-delay: 0.3s;
}