@charset "UTF-8";

/* main top */
.main-top h1 {
	font-size: 40px;
	line-height: 48px;
}
.font_g .main-top h1 {font-size: 38px;}

.main-top #main-title img{max-width: 640px;}
.main-top .neon-box {
	display: inline-block;
	padding: 25px 75px;
}
.main-top h2 {
	margin-bottom: 0;
	line-height: 1.3;
	font-weight: bold;
}
.main-top ul{
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 40px;
	margin-top: 40px;
}
.main-top ul li {
	color: #2a2a2a;
	font-size: 22px;
	text-align: center;
}

@media screen and (max-width: 1024px) {
	.main-top h1 {
		font-size: 34px;
		line-height: 44px;
	}
	.main-top ul li{
		font-size: 20px;
		line-height: 26px;
	}
}

@media screen and (max-width: 600px) {
	.main-top {padding: 75px 40px 25px;}
	.main-top h1 {
		margin: 10px 0 20px;
		font-size: 32px;
		line-height: 38px;
	}
	.font_g .main-top h1 {
		font-size: 32px;
		line-height: 38px;
	}
	.main-top .neon-box {padding: 25px 45px;}
	.main-top ul li{
		font-size: 18px;
		line-height: 24px;
	}
}

@media screen and (max-width: 480px) {
	.main-top {padding: 60px 20px;}
	.main-top h1 {
		font-size: 24px;
		line-height: 28px;
	}
	.main-top .neon-box {padding: 25px 25px;}
	.main-top ul {
		gap: 20px;
		margin-top: 20px;
	}
}

/* vod */
.vod{
	width: 1000px;
	margin: 0 auto;
	margin-top: 75px;
}
.vod .vod_box{
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.vod .vod_box iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

@media screen and (max-width: 1024px) {
	.vod{
		width: 95%;
		margin-top: 30px;
	}
}


/* content */
.contents {padding-top: 75px;}
.contents section {margin-bottom: 60px;}
.contents section.one_box {
	max-width: 600px;
	width: 100%;
}
.contents section.content_box .title_area {
	width: 100%;
	padding: 15px 30px;
	text-align: center;
	background: #9155f3;
}
.contents section.content_box .title_area h2 {
	font-size: 25px;
	font-weight: 700;
	color: #fff;
}
.font_f .contents section.content_box .title_area h2 {font-size: 23px;}
.contents section.content_box .content_area {
	position: relative;
	width: 25%;
	border: 1px solid #dfdfdf;
	border-left: none;
}
.rank_area {
	display: flex;
	flex-wrap: wrap;
}
.contents section.content_box .content_area:first-child {
	width: 100%;
	border-bottom: none;
	border-left: 1px solid #dfdfdf;
}
.contents section.content_box .content_area:nth-child(2) {border-left: 1px solid #dfdfdf;}
.contents section.content_box .content_area .img_box {padding: 20px 70px 15px;}
.contents section.content_box .content_area .img_box.prize::after {
	position: absolute;
	top: 10px;
	right: 10px;
	content: "";
}
.contents section.content_box .content_area .img_box.prize::after {
	width: 51px;
	height: 57px;
}
.contents section.content_box .content_area .img_box.first .img_area {
	position: relative;
	display: flex;
	align-items: center;
	gap: 25px;
}
.contents section.content_box .content_area .img_box.first .img_area::after {
	content: "";
	position: absolute;
	top: 0;
	right: -120px;
	width: 90px;
	height: 110px;
	background: url("../images/mark_rank_1.png") no-repeat center / contain;
}
.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area::after {
	top: -10px;
	width: 110px;
	height: 120px;
	background: url("../images/tie_1th.png") no-repeat center / contain;
}
.contents section.content_box .content_area .img_box.prize.second::after {background: url("../images/mark_rank_2.png") no-repeat center / contain;}
.contents section.content_box .content_area .img_box.prize.third::after {background: url("../images/mark_rank_3.png") no-repeat center / contain;}
.contents section.content_box .content_area .img_box.prize.fourth::after {background: url("../images/mark_rank_4.png") no-repeat center / contain;}
.contents section.content_box .content_area .img_box.prize.fifth::after {background: url("../images/mark_rank_5.png") no-repeat center / contain;}

.contents section.content_box .content_area .img_box .img_area img {
	display: block;
	width: 100%;
}
.contents section.content_box .content_area:first-child {
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
}
.contents section.content_box .content_area:first-child .img_box .img_area img {width: auto;}
.contents section.content_box .content_area .img_box .txt_area {
	display: flex;
	flex-direction: row;
	justify-content: center;
	padding-top : 15px;
}
.contents section.content_box .content_area .img_box .txt_area .title {
	font-size: 25px;
	font-weight: 700;
	color: #6756fa;
	line-height: 28px;
}
.contents section.content_box .content_area .img_box .txt_area span {
	font-size: 20px;
	font-weight: 700;
	white-space: nowrap;
}
.contents section.content_box:last-child .content_area .img_box .txt_area span {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	width: max-content;
	line-height: 1.3;
	font-size: 18px;
	text-align: center;
}
.contents section.content_box .content_area .img_box .txt_area span.singer {font-size: 14px;}
.contents section.content_box .content_area:first-child .img_box .txt_area span {
	padding: 20px 0px;
	color: #6756fa;
	font-weight: bold;
	font-size: 30px;
}

@media screen and (max-width: 1280px) {
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area::after {
        top: 0px;
        right: -80px;
        width: 80px;
        height: 70px;
	}
}

@media screen and (max-width: 1024px) {
	.contents {padding-top: 30px;}
	.contents section {max-width: 600px;}
	.contents section.content_box .content_area {
		width: 50%;
		border-top: none;
	}
	.contents section.content_box .content_area:first-child{border-bottom: 1px solid #dfdfdf;}
	.contents section.content_box .content_area:nth-child(4) .img_box {border-left: 1px solid #dfdfdf;}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area img {width: 50%;}
	.contents section.content_box .content_area .img_box.first .img_area::after {
		width: 80px;
		height: 80px;
		right: -85px;
	}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area::after {right: -55px;}
	.contents section.content_box:last-child .content_area .img_box .txt_area span {font-size: 14px;}

}

@media screen and (max-width: 630px) {
	.contents section.content_box .title_area h2 {font-size: 22px;}
	.contents section.content_box .content_area:first-child .img_box {padding: 50px 35px 15px;} 
	.contents section.content_box .content_area .img_box.first .img_area {flex-direction: column;}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area img {width: 80%;}
	.contents section.content_box .content_area .img_box.first .img_area::after {
		top: -30px;
        right: -60px;
		width: 70px;
		height: 70px;
	}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area::after {top: -30px;}
	.contents section.content_box .content_area:first-child .img_box .img_area img {
		margin: 0 auto;
		width: 90%;
	}
	.contents section.content_box .content_area:first-child .img_box .txt_area span {font-size: 24px;}
	.contents section.content_box .content_area .img_box .txt_area span {font-size: 18px;}
}

@media screen and (max-width: 520px) {
	.contents section.content_box .content_area .img_box {padding: 20px 30px 15px;}
	.contents section.content_box .content_area .img_box.first .img_area::after {right: -40px;}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area::after {right: -40px;}
}

@media screen and (max-width: 480px) {
	.contents section.content_box .content_area .img_box .txt_area .title {font-size: 22px;}
	.contents section.content_box .content_area .img_box .txt_area span {
		text-align: center;
		font-size: 14px;
	}
	.contents section.content_box .content_area:first-child .img_box.prize::after {display: none;}
	.contents section.content_box .content_area .img_box.first .img_area::after {
		right: -30px;
		width: 65px;
		height: 65px;
	}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area::after {
		width: 65px;
		height: 65px;
	}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area::after {right: 0px;}
	.contents section.content_box .content_area .img_box.first .img_area {
		justify-content: center;
		gap: 10px;
	}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area img {width: 60%;}
	.contents section.content_box .content_area:first-child .img_box .txt_area span {font-size: 20px;}
}

@media screen and (max-width: 390px) {
	.contents section.content_box:nth-child(4) .content_area .img_box.first .txt_area span {
        display: flex;
        justify-content: center;
        width: 50%;
        word-break: keep-all;
        text-align: center;
	}
	.contents section.content_box:last-child .content_area .img_box .txt_area span {width: auto;}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area img {width: 100%;}
	.contents section.content_box:nth-child(4) .content_area .img_box.first .img_area::after {right: -25px;}

}