/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

#wrapper.video,
.content-wrap {
	background-color: #051f09;
}

.index .content-wrap {
	background-color: #000000;
}

#video {
	/* background: url('../img/news-bg.jpg') center no-repeat; */
	background-color: #000;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

#worklog {
	/* background: url('../img/workLog-bg.jpg')center; */
	background-color: #000;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

#results {
	background: url('../img/bg7.jpg') center no-repeat;
	background-size: cover;
	background-position: center center;
}

.pageBg {
	background: url('../img/news-bg.jpg') center no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

/* ----------------------------------------------------------------
index content
-----------------------------------------------------------------*/
/* setting  */
.medTi {
	color: #ffe200;
}

.txt {
	padding-top: 3%;
}

.btn {
	position: relative;
	display: flex;
	margin: 20px 0;
	padding: 0;
	align-items: center;
	justify-content: center;

}

.btn a {
	display: inline-block;
	background-color: #ffffff;
	color: #000;
	margin: 10px 10px 10px 0;
	padding: 10px 28px;
	border-radius: 50px;
}

.btn a:hover {
	background-color: #ffe200;
	color: #000000;
}

a:hover {
	color: #ff00c1;
}

.si-comment:hover {
	background-color: #ffe200;
}

/* view more */
.viewmore {
	margin: 40px 0 0;
	display: flex;
	align-items: center;
	justify-content: center;
}

.viewmore a {
	padding: 10px 20px;
	color: #fff;
	border-radius: 50px;
	border: 1px solid #fff;
}

.viewmore a:hover {
	background: #ffe200;
	color: #000;
	box-shadow: 1px 1px 5px #ffffff;
}

/* header */
body {
	background-color: #051f09;
}



.full-header .primary-menu .menu-container,
.full-header #logo {
	border-right: none;
}

.menu-container {
	justify-content: center;
}

#logo a.standard-logo {
	justify-content: center;
	align-items: center;
	font-size: 38px;
}

@media (max-width:990px) {

	#logo a.standard-logo {
		font-size: 18px;
	}
}

#logo a.standard-logo img {
	margin-right: 20px;
}

.menu-link {
	padding: 20px 10px !important;
}

.cd-overlay {
	/* shadow layer visible when navigation is active */
	position: fixed;
	z-index: 2;
	height: 100%;
	width: 100%;
	top: 0;
	left: 0;
	cursor: pointer;
	background-color: rgba(0, 0, 0, 0.5);
	visibility: hidden;
	opacity: 0;
	-webkit-backface-visibility: hidden;
	backface-visibility: hidden;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
}

.cd-overlay.is-visible {
	opacity: 1;
	visibility: visible;
	-webkit-transition: opacity 0.3s 0s, visibility 0s 0s, -webkit-transform 0.3s 0s;
	-moz-transition: opacity 0.3s 0s, visibility 0s 0s, -moz-transform 0.3s 0s;
	transition: opacity 0.3s 0s, visibility 0s 0s, transform 0.3s 0s;
}

@media only screen and (max-width: 1169px) {
	.cd-overlay.is-visible {
		-webkit-transform: translateX(-200px);
		-moz-transform: translateX(-200px);
		-ms-transform: translateX(-200px);
		-o-transform: translateX(-200px);
		transform: translateX(-200px);
	}

	.nav-on-left .cd-overlay.is-visible {
		-webkit-transform: translateX(200px);
		-moz-transform: translateX(200px);
		-ms-transform: translateX(200px);
		-o-transform: translateX(200px);
		transform: translateX(200px);
	}

	.cd-overlay.is-visible.search-is-visible,
	.nav-on-left .cd-overlay.is-visible.search-is-visible {
		-webkit-transform: translateX(0);
		-moz-transform: translateX(0);
		-ms-transform: translateX(0);
		-o-transform: translateX(0);
		transform: translateX(0);
	}
}

.modderbg {
	background-position: right bottom;
}

.bg1 {
	background-image: url(../img/modder1.jpg);
	background-size: cover;
}

.bg2 {
	background-image: url(../img/modder2.jpg);
	background-size: cover;
}

.bg3 {
	background-image: url(../img/modder3.jpg);
	background-size: cover;
}

.bg4 {
	background-image: url(../img/modder4.jpg);
	background-size: cover;
}

.bg5 {
	background-image: url(../img/modder5.jpg);
	background-size: cover;
}

.bg6 {
	background-image: url(../img/modder6.jpg);
	background-size: cover;
}

.bg7 {
	background-image: url(../img/modder7.jpg);
	background-size: cover;
}

.bg8 {
	background-image: url(../img/modder8.jpg);
	background-size: cover;
}


/* index top banner */
.tp-caption.RotatingWords-TitleWhite,
.RotatingWords-TitleWhite {
	font-family: 'Squada One', sans-serif !important;
}


/* content */

.title,
.txt {
	font-family: 'Roboto', sans-serif;
	color: #fff;
}

.bigTi {
	font-size: 32px;
	font-family: 'Squada One', sans-serif;
	padding: 0 0 30px;
	text-align: center;
	color: #ffe200;
}



/* video */
.videoInner {
	display: grid;
	align-content: center;
	gap: 20px;
	grid-template-columns: repeat(3, 1fr);
	align-items: center;
	justify-content: center;
}

.videoInner .fancybox-media {
	overflow: hidden;
	position: relative;
}

.videoInner .fancybox-media:hover img {
	transform: scale(1.1);
}

.videoInner .fancybox-media img {
	transition: all 1s;
}

.videoTit {
	position: absolute;
	display: block;
	text-align: center;
	color: #fff;
	font-size: 2rem;
	font-weight: 700;
	z-index: 1;
	left: 50%;
	top: 50%;
}

.shadow01 {
	position: absolute;
	z-index: 0;
	left: 50%;
	top: 50%;
	transform: translateX(-50%) translateY(-50%);
	display: block;
	width: 40px;
	height: 40px;
	background: rgb(255 255 255 / 60%);
	border-radius: 50%;
	animation: pulse-border 1500ms ease-out infinite;
}

.shadow02 {
	position: absolute;
	z-index: 1;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	display: block;
	width: 40px;
	height: 40px;
	background: rgb(0 0 0 / 35%);
	border-radius: 50%;
	transition: all 200ms;
	box-shadow: 0 0 20px #000;
}

@keyframes pulse-border {
	0% {
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
		opacity: 1
	}

	100% {
		transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
		opacity: 0
	}
}

i.play-fill {
	position: absolute;
	z-index: 2;
	margin: -10px 0 10px -5px;
	border-style: solid;
	border-width: 10px 0 10px 15px;
	border-color: transparent transparent transparent rgb(255 255 255 / 80%);
}

@media (max-width: 996px) {
	.videoInner {
		grid-template-columns: repeat(1, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 10px;
	}
}

/* ------ Worklog------ */


.worklogInner {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	padding: 10px;
	/* background: linear-gradient(90deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 90%); */
	transition: 1s linear;
	-webkit-backdrop-filter: blur(0.5rem);
	backdrop-filter: blur(0.5rem);
}

/* .worklogInner:before {
	content: "";
	position: absolute;
	bottom: 10%;
	height: 80%;
	width: 100%;
	border: 2px solid #ffffff;
	box-shadow: 0px 0px 60px #ffffff;
} */


.worklogBox .txt {

	font-family: 'Oleo Script', 'Noto Serif', cursive;
	position: absolute;
	display: inline-block;
	width: 100%;
	bottom: -5%;
	left: 0;
	font-size: 30px;
	font-weight: 400;
	/* -webkit-text-stroke: 0.5px #ffffff; */
	/* color: #ffffff00; */
	z-index: 1;
	padding: 0 10px;
}

.worklogBox .txt p {
	font-family: 'Oleo Script', 'Noto Serif', cursive !important;
	margin: 0;
	line-height: 1 !important;
	font-size: 1.25rem;
}

.worklogBox .txt figure {
	margin: 0;
	width: 10%;
	height: 10px;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	align-content: center;

}



.worklogBox .modder {
	display: inline-block;
	margin: 0;
	background-color: dodgerblue;
	color: white;
	position: relative;
	text-align: center;
	transition: transform 0.8s;
	transform-style: preserve-3d;
	overflow: hidden;

}

.worklogBox .modder img {
	transition: all 1s;

}

.worklogBox:hover .modder img {
	transform: scale(1.2);
}

.worklogBox {
	position: relative;
	display: inline-block;
}

.worklogBox .modder:before {
	content: "";
	position: absolute;
	z-index: 0;
	display: block;
	width: 100%;
	height: 40%;
	bottom: -1px;
	background: linear-gradient(to top, #051f09 0%, #ffca5d00 100%);
}

@media (max-width: 996px) {
	.worklogInner {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 25px;
		padding: 0 20px;
	}

	.worklogBox .txt figure {
		width: 25%;
	}
}

/* Results */
.graph {
	/* background-color: #3b4150; */
	font-family: 'Roboto', sans-serif;
	color: #cdcdcd;
}

#bar-chart {
	height: auto;
	width: 100%;
	position: relative;
	margin: 50px auto 80px;
}

#bar-chart * {
	box-sizing: border-box;
}

#bar-chart .graph {
	height: 283px;
	position: relative;
}

#bar-chart .bars {
	height: 315px;
	/* padding: 0 2%; */
	position: absolute;
	width: 100%;
	right: 0;
	z-index: 10;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-column-gap: 0;
	justify-items: center;
}

#bar-chart .bar-group {
	display: block;
	float: left;
	height: 100%;
	position: relative;
	width: 30%;

	display: flex;
	align-items: center;
	justify-content: center;
}

#bar-chart .bar-group:last-child {
	margin-right: 0;
}

#bar-chart .bar-group .bar {
	visibility: hidden;
	height: 0;
	-webkit-animation: animate-height;
	-moz-animation: animate-height;
	animation: animate-height;
	animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
	-webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
	-moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
	animation-duration: 0.4s;
	-webkit-animation-duration: 0.4s;
	-moz-animation-duration: 0.4s;
	animation-fill-mode: forwards;
	-webkit-animation-fill-mode: forwards;
	box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
	border: 1px solid #ffffff;
	/* border-radius: 3px 3px 0 0; */
	bottom: 0;
	cursor: pointer;
	height: 0;
	position: absolute;
	text-align: center;
	width: 100%;
}

#bar-chart .bar-group .bar:nth-child(2) {
	left: 35%;
}

#bar-chart .bar-group .bar:nth-child(3) {
	left: 70%;
}

#bar-chart .bar-group .bar span {
	display: none;
}

#bar-chart .bar-group .bar-1 {
	animation-delay: 0.3s;
	-webkit-animation-delay: 0.3s;
}

#bar-chart .bar-group .bar-2 {
	animation-delay: 0.6s;
	-webkit-animation-delay: 0.6s;
}

#bar-chart .bar-group .bar-3 {
	animation-delay: 0.9s;
	-webkit-animation-delay: 0.9s;
}

#bar-chart .bar-group .bar-4 {
	animation-delay: 1.2s;
	-webkit-animation-delay: 1.2s;
}

#bar-chart .bar-group .bar-5 {
	animation-delay: 1.5s;
	-webkit-animation-delay: 1.5s;
}

#bar-chart .bar-group .bar-6 {
	animation-delay: 1.8s;
	-webkit-animation-delay: 1.8s;
}

#bar-chart .bar-group .bar-7 {
	animation-delay: 2.1s;
	-webkit-animation-delay: 2.1s;
}

#bar-chart .bar-group .bar-8 {
	animation-delay: 2.4s;
	-webkit-animation-delay: 2.4s;
}


#bar-chart ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

#bar-chart .x-axis {
	bottom: -35%;
	position: absolute;
	text-align: center;
	width: 100%;
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 20px;
}

#bar-chart .x-axis li {

	display: inline-block;
}

#bar-chart .x-axis li:last-child {
	margin-right: 0;
}

#bar-chart .y-axis {
	position: absolute;
	text-align: right;
	width: 100%;
}

#bar-chart .y-axis li {
	border-top: 1px solid #4e5464;
	display: block;
	height: 63.25px;
	width: 100%;
}

#bar-chart .y-axis li span {
	display: block;
	font-size: 12px;
	margin: -10px 0 0 -60px;
	padding: 0 0px;
	width: 40px;
}

#bar-chart .stat-1 {
	background: linear-gradient(to right, #00d5ff 0%, #00d5ff 47%, #0257cf 50%, #0257cf 100%);
	background: rgb(255 255 255 / 70%);
}

#bar-chart .stat-2 {
	background: linear-gradient(to right, #ff4500 0%, #ff4500 47%, #cf3a02 50%, #cf3a02 100%);
}

#bar-chart .stat-3 {
	background: linear-gradient(to right, #ff4500 0%, #ff4500 47%, #cf3a02 50%, #cf3a02 100%);
}


@media (max-width:996px) {
	#bar-chart .y-axis {
		left: 12%;
		background: transparent;
	}

	#bar-chart .x-axis li {
		position: relative;
		display: block;
		width: 100%;
		font-size: 12px;
		transform: rotateZ(-45deg);
		text-anchor: end;
	}

	#bar-chart .x-axis {
		display: inline-grid;

		justify-content: center;
		justify-items: center;
		align-items: center;
	}


	#bar-chart .bars {
		display: grid;
		grid-template-columns: repeat(9, 1fr);
		grid-column-gap: 10px;
		align-items: center;
		justify-content: center;
		justify-items: end;
		right: -10%;
	}
}




/* News */
#news {
	/* background: url('../img/news-bg.jpg') center no-repeat; */
	background-color: #000;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

.newsInner {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	margin: 20px 0;

}

.newsItem {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	flex-direction: row;
	align-items: center;
	margin-bottom: 10px;
}

.newsItem:hover {
	background: linear-gradient(90deg, rgba(255, 255, 255, .08) 50%, rgba(255, 255, 255, 0) 80%);
}

.newsItem:after {
	position: absolute;
	bottom: -10px;
	left: 0;
	display: block;
	width: 100%;
	height: 1px;
	content: "";
	background-color: #ffe200;
	transition: transform .8s cubic-bezier(.37, .16, .12, 1);
	transform: translateZ(0) scaleX(0);
	transform-origin: right top;
}

.newsItem:before {
	position: absolute;
	bottom: -10px;
	left: 0;
	display: block;
	width: 100%;
	height: 1px;
	content: "";
	background-color: #404040;
}

.newsItem:hover:after {
	transition: transform .6s cubic-bezier(.22, .11, .22, 1);
	transform: translateZ(0) scaleX(1);
	transform-origin: left top;
}

.newsItem figure {
	display: inline-block;
	position: relative;
	margin: 0;
	width: 40%;
	overflow: hidden;
}

.newsItem figure img {
	transition: all 1s;
	transform: scale(1);
}

.newsItem:hover figure img {
	transform: scale(1.2);
}

.newsItem .newsTxt {
	width: 60%;
	padding-left: 15px;
}

.newsItem .newsTxt h3 {
	color: #ffffff;
	margin: 0;
	max-height: 80px;
	/* display: -webkit-box; */
	/* -webkit-line-clamp: 2; */
	/* -webkit-box-orient: vertical; */
	overflow: hidden;
	line-height: 1;
	letter-spacing: 1px;
	margin-bottom: 5px;
	font-size: 20px;
}

.newsItem .newsTxt p {
	color: #dedede;
	line-height: 1.2 !important;
	letter-spacing: initial;
	max-height: 75px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
	font-size: 14px;
}

@media (max-width:996px) {
	.newsInner {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		margin: 20px 0;
	}

	.newsItem figure {
		margin: 0;
		display: inline-block;
		width: 40%;
	}


	.newsItem .newsTxt {
		width: 60%;
		padding-left: 15px;
	}
}

/* iDownBox */
#iDownWrap {
	background: #181818;
	padding: 30px 0;
}

.iDownBox {
	display: flex;
	justify-content: center;
	align-items: center;
}

.iDownBox .icon {
	padding: 0 5px;
}

/* Sponsors & Media Partners */
#sponsors {
	background-color: #101010;
}

.sponsorsInner {
	position: relative;
	display: flex;
	flex-direction: column;
	margin-bottom: 30px;
}

.sponsorsTxt h4 {
	color: #ffe200;
	margin-bottom: 10px;
	padding: 10px;
	border-bottom: 1px solid #404040;
}

.sponsorsItem {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	margin: 20px 0;
	align-items: center;
}


.sponsorsItem a {
	padding: 0 20px;
}

.mediapartnersItem {
	display: grid;
	grid-template-columns: repeat(10, 1fr);
	grid-column-gap: 10px;
	grid-row-gap: 10px;
	margin: 20px 0;
}

.mediapartnersItem a {
	display: flex;
	align-items: center;
	justify-content: center;
}

@media (max-width:996px) {
	.sponsorsItem {
		grid-template-columns: repeat(2, 1fr);
		grid-column-gap: 10px;
		grid-row-gap: 10px;
		margin: 20px 0;
	}

	.mediapartnersItem {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		grid-column-gap: 15px;
		grid-row-gap: 15px;
		margin: 20px 0;
		justify-items: start;
	}
}

/*  */
@-webkit-keyframes animate-width {
	0% {
		width: 0;
	}

	100% {
		visibility: visible;
	}
}

@-moz-keyframes animate-width {
	0% {
		width: 0;
	}

	100% {
		visibility: visible;
	}
}

@keyframes animate-width {
	0% {
		width: 0;
	}

	100% {
		visibility: visible;
	}
}

@-webkit-keyframes animate-height {
	0% {
		height: 0;
	}

	100% {
		visibility: visible;
	}
}

@-moz-keyframes animate-height {
	0% {
		height: 0;
	}

	100% {
		visibility: visible;
	}
}

@keyframes animate-height {
	0% {
		height: 0;
	}

	100% {
		visibility: visible;
	}
}



/*----PAGE 開始--------------------------------------------------------------------------------------------------- */
#content p span {
	font-family: 'Roboto', sans-serif;
	font-size: 1rem;
}


/* ----modder---- */
#modder1,
#modder2,
#modder3,
#modder4,
#modder5,
#modder6,
#modder7,
#modder8 {
	background: url(../img/modder-bg.jpg)center;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
}

.voteEvent_country {
	width: 100%;
	padding: 0 0 25px 0;
	margin: 0 0 25px 0;
	border-bottom: 1px dashed #ddd;
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	align-content: center;
	align-items: center;
}

.voteEvent_country figure {
	margin: 0;
	width: 10%;
}

.voteEvent_list {
	list-style: none;
}

.voteEvent_list ul {
	list-style: inside;
}

.voteEvent_txt {
	width: 90%;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
}

.voteEvent_txt h4,
.voteEvent_txt h3 {
	margin: 0;
}

.voteEvent_txt h4 {
	width: 90%;
	padding: 2px 0 0px 5px;
	color: #ffffff;
	font-weight: 200;
	font-size: 16px;
	font-family: 'Roboto', sans-serif;
	font-style: italic;
}

.voteEvent_txt h3 {
	color: #ffffff;
	font-size: 2rem;
}


.voteEvent_txt svg {
	width: 2%;
}

.descTxt {
	padding: 0;
	text-align: justify;
}


/* ----- Rules And Prizes ----- */
.EvenPrizes {
	display: block;
	margin: 60px 0;
	width: 100%;
}

.EvenPrizesItem01 {
	position: relative;
	margin: 0 40px 80px;
}

.EvenPrizesItem01:after {
	content: "";
	position: absolute;
	z-index: 0;
	display: block;
	width: 100%;
	height: 100%;
	left: 0;
	top: 10%;
	border: 4px solid #f80;
	border-radius: 20px;
	box-shadow: 0px 0px 20px rgb(255 255 255 / 40%);
}


.page_list {
	font-weight: lighter;
	color: #ffffff;
	background: transparent;
	padding: 0 10px;
	border-left: 10px solid #ffe200;
	/* border-bottom: 1px solid #ffe200;*/
}

.prizeReward {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 0;
	grid-row-gap: 20px;
}

.prizeReward_box {
	display: flex;
	flex-direction: column;
	align-items: center;
	align-content: center;
	z-index: 2;

}


.prizeReward_box:hover figure {
	transform: translateY(-10px);
}

.prizeReward_box figure {
	margin: 0;
	padding: 20px 0;
	transition: all 1s;
}

.prizeReward_box p {
	text-align: center;
	margin: 0;
	color: #fff;
}

.EvenPrizesTotal {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	position: relative;
	margin: auto;
	width: 40%;
	background: #051f09;
	z-index: 1;
}

.index .EvenPrizesTotal {
	background: #000000;

}

.EvenPrizesTotal .page_Subhead {
	color: #ff8e23;
	font-size: 2rem;
	font-weight: lighter;
	text-align: center;
}

.EvenPrizesItem02 {
	position: relative;
	display: inline-block;
	width: 100%;
	/* margin: 120px 0 0; */
	color: #ffffff;
	font-family: 'Roboto', sans-serif;
}

.EvenPrizesItem02 h4 {
	color: #fff;
	font-size: 1.5rem;
	font-weight: initial;
	padding: 10px 0;
	margin: 20px 0;
	border-bottom: 1px solid #ffe200;
}

.EvenPrizesItem02 ul {
	list-style: square;
	margin-left: 20px;
	line-height: 35px;
	color: #cae4ea;
}

.area02 .EvenPrizesItem02 {
	display: block;
	position: relative;
	margin: 0;
}

.area02 .EvenPrizesItem02 h5 {
	display: block;
	position: relative;
	margin: 10px;
	text-align: center;
	font-size: 1.5rem;
	font-weight: lighter;
	color: #ffe200;
}

.area02 .EvenPrizesItem02 p {
	display: block;
	position: relative;
}

.EvenPrizesItem02_inner {
	padding: 20px;
	background: rgb(0 0 0 / 56%);
}

.EvenPrizesItem02_inner figure {
	text-align: center;
}


.EvenPrizesItem02_product {
	padding: 20px;
	background: rgb(0 0 0 / 56%);
}

.productBox {
	width: 100%;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}

.productBox figure {
	width: 30%;
	transition: all 1s;
}

.productBox:hover figure {
	transform: scale(1.1);
}

.productBox_item {
	width: 70%;
}

.area02 .EvenPrizesItem02 .productBox_item h5 {
	text-align: left;
	margin: 10px 0;
}

.EvenPrizes li {
	font-weight: 700;
	color: #ffffff;
	line-height: 28px;
	margin: 20px 0;
}


.EvenPrizes li span {
	color: #cae4ea;
	font-weight: initial;
}

/* -------------Vote Procedure--------------- */

.VoteProcedure {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
}

.VoteProcedureBox {
	position: relative;
	padding: 20px;
	background: rgb(0 0 0 / 35%);
	border-radius: 10px;
	min-height: 580px;

}

.VoteProcedureBox .step {
	font-family: 'Squada One', sans-serif;
	font-size: 1.75rem;
	color: #ff8400 !important;
	height: auto;
}

.VoteProcedureBox figure {
	height: 35%;
}

.VoteProcedureBox_txt {
	height: 35%;
}

.VoteProcedureBox .btn {
	display: block;

}

@media (max-width:996px) {
	.VoteProcedure {

		grid-template-columns: repeat(1, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
	}
}

.barsconingsoon {
	position: absolute;
	top: -10%;
	left: -4%;
	width: 105%;
	height: 105%;
	background: rgb(148 97 138 / 10%);
}

.barsconingsoon p {
	font-family: 'Squada One', sans-serif;
	color: rgb(86 86 86 / 50%);
	text-align: center;
	font-size: 5rem;
}

/* ------------------------- */

.ProportionInner {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	grid-column-gap: 20px;
	grid-row-gap: 20px;
	margin: 60px 0;
}

.ProportionBox {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.ProportionBox p {
	color: #ffffff;
	margin: 10px 0;
}

.shanxing {
	position: relative;
	width: 100px;
	height: 100px;
	background: #90909063;
	border-radius: 50%;
}



.a1,
.a2,
.a3 {
	top: 0;
	left: 0;
	margin-left: 50px;
	position: absolute;
	width: 50px;
	height: 100px;
	overflow: hidden;
	border-radius: 0 50px 50px 0;

}

.a1:before,
.a1:after,
.a2:before,
.a2:after,
.a3:before,
.a3:after {
	content: "";
	box-sizing: border-box;
	position: absolute;
	top: 0;
	right: 0;
	width: 100px;
	height: 50px;
	background: #0ce;
	border-style: solid;
	border-color: #0ce;
	border-width: 6px 6px 0;
	border-radius: 50px 50px 0 0;
	transform-origin: 50px 50px;
}

.a1:before {
	z-index: 1;
	-webkit-animation: a1 3s infinite linear;
	transform: rotate(325deg);
}

.a2:before {
	z-index: 1;
	-webkit-animation: a1 3s infinite linear;
	transform: rotate(300deg);
}

.a3:before {
	z-index: 1;
	-webkit-animation: a1 3s infinite linear;
	transform: rotate(0deg);
}

.a1:after,
.a2:after,
.a3:after {
	opacity: 0;
	z-index: 2;
	transform: rotate(90deg);
	-webkit-animation: a2 3s infinite linear;
}

.shanxing:hover .a1:before,
.shanxing:hover .a2:before,
.shanxing:hover .a3:before {
	content: "";
	background: #f80;
	border-color: #f80;
	box-shadow: 2px 2px 8px #000;
}

/* index_Results */
.bar {
	position: relative;
}

.bar1_txt,
.bar2_txt,
.bar3_txt,
.bar4_txt,
.bar5_txt,
.bar6_txt,
.bar7_txt,
.bar8_txt {
	position: relative;
	opacity: 0;
}

.bar:hover .bar_txt {
	opacity: 1;
	position: absolute;
	display: block;
	width: 170px;
	text-align: left;
	left: -50%;
	background: rgb(255 255 255 / 30%);
	padding: 10px;
	border-radius: 5px;
}

.bar:hover .bar1_txt,
.bar:hover .bar2_txt,
.bar:hover .bar3_txt,
.bar:hover .bar4_txt,
.bar:hover .bar5_txt,
.bar:hover .bar6_txt,
.bar:hover .bar7_txt,
.bar:hover .bar8_txt {
	top: -150px;
}

.bar:hover .bar1_txt:before,
.bar:hover .bar2_txt:before,
.bar:hover .bar3_txt:before,
.bar:hover .bar4_txt:before,
.bar:hover .bar5_txt:before,
.bar:hover .bar6_txt:before,
.bar:hover .bar7_txt:before,
.bar:hover .bar8_txt:before {
	content: "";
	position: absolute;
	bottom: -70px;
	left: 28%;
	background: rgb(255 255 255 / 30%);
	width: 1px;
	height: 70px;
}


.bar .bar_txtName {
	margin: 0 !important;
}

.bar .bar_txtVote {
	margin: 0 !important;
}

@media (max-width:1280px) {
	.bar:hover .bar_txt {
		left: -70%;
	}
}

@media (max-width:1028px) {
	.bar:hover .bar_txt {
		left: -80%;
	}
}

@media (max-width:996px) {
	.bar:hover .bar_txt {
		left: -200%;
	}
}

@media (max-width:796px) {
	.bar:hover .bar_txt {
		left: -330%;
	}

	.ProportionInner {
		display: grid;
		grid-template-columns: repeat(1, 1fr);
		grid-column-gap: 20px;
		grid-row-gap: 20px;
		margin: 60px 0;
	}
}

@media (max-width:530px) {
	.bar:hover .bar_txt {
		left: -360%;
	}
}

@media (max-width:460px) {
	.bar:hover .bar_txt {
		opacity: 0;
	}
}