@charset "UTF-8";
	/* 이벤트 등록하기 */
	

	/* 회원가입완료 */
	.success-checkmark {
		width: 80px;
		height: 115px;
		margin: 0 auto;
		
		.check-icon {
			width: 80px;
			height: 80px;
			position: relative;
			border-radius: 50%;
			box-sizing: content-box;
			border: 4px solid #7dade7;
			
			&::before {
				top: 3px;
				left: -2px;
				width: 30px;
				transform-origin: 100% 50%;
				border-radius: 100px 0 0 100px;
			}
			
			&::after {
				top: 0;
				left: 30px;
				width: 60px;
				transform-origin: 0 50%;
				border-radius: 0 100px 100px 0;
				animation: rotate-circle 5.25s ease-in;
			}
			
			&::before, &::after {
				content: '';
				height: 100px;
				position: absolute;
				background: #FFFFFF;
				transform: rotate(-45deg);
			}
			
			.icon-line {
				height: 5px;
				background-color:#7dade7;
				display: block;
				border-radius: 2px;
				position: absolute;
				z-index: 10;
				
				&.line-tip {
					top: 46px;
					left: 14px;
					width: 25px;
					transform: rotate(45deg);
					animation: icon-line-tip 1.75s;
				}
				
				&.line-long {
					top: 38px;
					right: 8px;
					width: 47px;
					transform: rotate(-45deg);
					animation: icon-line-long 1.75s;
				}
			}
			
			.icon-circle {
				top: -4px;
				left: -4px;
				z-index: 10;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				position: absolute;
				box-sizing: content-box;
				border: 4px solid rgba(125,173,231,0.5);
			}
			
			.icon-fix {
				top: 8px;
				width: 5px;
				left: 26px;
				z-index: 1;
				height: 85px;
				position: absolute;
				transform: rotate(-45deg);
				background-color: #FFFFFF;
			}
		}
	}

	@keyframes rotate-circle {
		0% {
			transform: rotate(-45deg);
		}
		5% {
			transform: rotate(-45deg);
		}
		12% {
			transform: rotate(-405deg);
		}
		100% {
			transform: rotate(-405deg);
		}
	}

	@keyframes icon-line-tip {
		0% {
			width: 0;
			left: 1px;
			top: 19px;
		}
		54% {
			width: 0;
			left: 1px;
			top: 19px;
		}
		70% {
			width: 50px;
			left: -8px;
			top: 37px;
		}
		84% {
			width: 17px;
			left: 21px;
			top: 48px;
		}
		100% {
			width: 25px;
			left: 14px;
			top: 45px;
		}
	}

	@keyframes icon-line-long {
		0% {
			width: 0;
			right: 46px;
			top: 54px;
		}
		65% {
			width: 0;
			right: 46px;
			top: 54px;
		}
		84% {
			width: 55px;
			right: 0px;
			top: 35px;
		}
		100% {
			width: 47px;
			right: 8px;
			top: 38px;
		}
	}

	/* 막대그래프 */
		section#results {
			width:100%;
			max-width:680px;
			margin:40px 0 0 0;
		    float: none;
		}
		.poll-results {
			width: 100%;
			box-sizing: border-box;
			padding: 0 50px;
				
		}
		.poll-results h3 {
			background: none;
			color: #9c2d49;
			font-size: 1.25em;
			font-weight: bold;
			width: 100%;
			height: auto;
			margin-bottom: -1em;
			padding: .75em 0;
		}
		.poll-results .item {
			position: relative;
			width: 100%;
			height: 65px;
			margin: 23px 0;
		}
		/* .poll-results .item::after {
			content: '';
			display: block;
			position: absolute;
			bottom: 50%;
			z-index: 0;
			border-bottom: 1px solid #abadaf;
			width: 79%;
			left: 11%;
		} */

		.poll-results .label, .poll-results .vote-title {
			float: left;
			top: 50%;
			position: relative;
			transform: translateY(-50%);
			max-width: 30%;
			text-align: left;
			font-size:1.05em;
			color:#fff5e6;
			z-index:11;
			left: 4%;
			font-weight:600;
		}

		.poll-results .label, .poll-results .number {
			position: relative;
			z-index: 1;
			padding: 0 5px;
			font-weight:700;
			font-size: 1.7em;
			line-height: 30px;
		}
		.poll-results .label {
			font-weight: bold;
		}
		.poll-results #bar-001 .number{color:#11009E;}
		.poll-results #bar-002 .number{color:#4942E4;}
		.poll-results #bar-003 .number{color:#fff; text-shadow:-1px 2px 10px rgb(98 80 239 / 28%);}
		.poll-results #bar-003 .vote-title{color:#11009E;}
		.poll-results .number {
			float: right;
			text-align: right;
			transform: translateY(-50%);
			top:50%;
		}
		.poll-results .number span.count {min-width: 36px;text-align: left;}
		.poll-results .bar{float:left; height:100%;	width:auto;	background-color: white;}
		.poll-results .bar-track {position: absolute;top: 0;left:0%;height: 100%;z-index: 1;}
		.poll-results .bar-fill {
			border-radius:0 8px 8px 0;
			position: relative;
			height: 100%;
			width: 0;
			transition: width 3s;
		}
		.poll-results.active .bar-fill {
			width: 100%;
			box-shadow: 2px 2px 5px 2px rgb(199 199 199 / 41%), -3px -2px 3px 0px rgb(137 137 137 / 50%) inset;

		}
		.poll-results .bar-fill::after {
			content: '';
			display: block;
			width:2px;
			height: 140%;
			position: absolute;
			left:0;
			top:-8px;
			background:#e3e3e3;
			
		}
		#bar-001.item .bar-fill,#bar-004.item .bar-fill {
			background-color:#11009E;
		}
		#bar-002.item .bar-fill {
			background-color:#4942E4;
		}
		#bar-003.item .bar-fill {
			background-color:#fff;
		}


	/* 원형 그래프 */
		.circle_graph{position:relative; height:650px;}
		.wheel {
			width: 600px;
			height: 600px;
			border-radius: 100%;
			position:relative;
			transition-delay: 0s;
			transition-property: transform;
			transition-duration: 0.5s;
			transition-timing-function: ease-in-out;
			margin:0 auto;
		}
		  
		.wheel ul {margin:0;padding:0;}
			
		.wheel ul li {
			width: 332px;
			height: 329px;
			margin: 0;
			padding: 0;
			list-style-type: none;
			display: block;
			position: absolute;
			top: 0;
			left: 0;
			border-top-left-radius: 350px;
			border-top-right-radius: 0px;
			transform-origin: 100% 100%;
			pointer-events: none;
			transition-delay: 0s;
			transition-property: transform;
			transition-duration: 3s;
			transition-timing-function: ease-in-out;
		}
		  
		 .wheel ul li:nth-child(1) {
			transform: rotate(0deg);
			z-index: 8;
			background-image:url("/common/img/membership03_1_1.png?ver=202307311827");
		}
	
		/* .wheel ul li:nth-child(2) {
			transform: rotate(45deg);
			z-index: 7;
			  background-image:url("/common/img/membership03_1_1.png?ver=202307311827");
		} */

		.wheel ul li:nth-child(3) {
			transform: rotate(90deg);
			z-index: 6;
			 background-image:url("/common/img/membership03_1_2.png?ver=202307311827");
		} 

		/* .wheel ul li:nth-child(4) {
			transform: rotate(135deg);
			z-index: 5;
			  background-image:url("/common/img/membership03_1_2.png?ver=202307311827");
		} */

		.wheel ul li:nth-child(5) {
			transform: rotate(180deg);
			z-index: 4;
			   background-image:url("/common/img/membership03_1_3.png?ver=202307311827");
		}

		/* .wheel ul li:nth-child(6) {
			transform: rotate(225deg);
			z-index: 3;
			 background-image:url("/common/img/membership03_1_3.png?ver=202307311827");
		} */

		.wheel ul li:nth-child(7) {
			transform: rotate(270deg);
			z-index: 2;
			background-image:url("/common/img/membership03_1_4.png?ver=202307311827");
		}

		/* .wheel ul li:nth-child(8) {
			transform: rotate(315deg);
			z-index: 1;
			background-image:url("/common/img/membership03_1_4.png?ver=202307311827");
		} */
		.wheel.closed li:nth-child(1) { transform: rotateX(0deg); }
		.wheel.closed li:nth-child(2) { transform: rotateX(0deg); }
		.wheel.closed li:nth-child(3) { transform: rotateX(0deg); }
		.wheel.closed li:nth-child(4) { transform: rotateX(0deg); }
		.wheel.closed li:nth-child(5) { transform: rotateX(0deg); }
		.wheel.closed li:nth-child(6) { transform: rotateX(0deg); }
		.wheel.closed li:nth-child(7) { transform: rotateX(0deg); }
		.wheel.closed li:nth-child(8) { transform: rotateX(0deg); }


		.graph_wrap{display:flex; gap:5px;}
			.graph_wrap .tl-item{background:rgba(233,233,233,0.5); border-radius:15px; width:33.33%; border-right: 2px solid #fff; height:600px; overflow:hidden; transform:translate3d(0, 0, 0); position:relative; transition: width 0.5s ease;}
			.graph_wrap .tl-item:last-child{border-right:0;}
			.graph_wrap .tl-item:after, .graph_wrap .tl-item:before{transform: translate3d(0, 0, 0); content: ''; position:absolute; left:0; top:0; width:100%; height:100%;}
			.graph_wrap .tl-item:after{opacity:1; transition:opacity 0.5s ease;}
			.graph_wrap .tl-item:before{background:linear-gradient(to bottom, rgba(244, 244, 244, 0%), rgba(0, 115, 255, 10%)); z-index: 1; z-index:1; opacity:0; transform:translate3d(0, 0, 0) translateY(50%); transition: opacity 0.5s ease, transform 0.5s ease;}
		.graph_wrap .tl-item .tl-content{transform: translate3d(0, 0, 0) translateY(30px) scale(0.8);position:relative; z-index:1; text-align:center; margin:0 1.618em; top:40%; opacity:0.2;}
		.graph_wrap .tl-item .tl-content img{margin-top:30px;}
		.graph_wrap .tl-item:hover .tl-content img{}
		.graph_wrap .tl-item:hover{width:60%; transition:all 0.5s ease 0.2s;}}
		.graph_wrap .tl-item:hover:after{opacity:0;}
		.graph_wrap .tl-item:hover:before{opacity:1; transform:translate3d(0, 0, 0) translateY(0); transition:opacity 1s ease, transform 1s ease 0.25s;}
		.graph_wrap .tl-item:hover .tl-content{opacity:1; transform:translateY(-20%); transition:all 0.75s ease 0.5s;}
		.tl-year{position:absolute; width:100%; font-size:1.1em; transition:all 0.5s ease 0.1s; text-align:center; top:40%; left:50%; transform: translateX(-50%) translateY(-50%); z-index:1;}
		.tl-year .cont_text_title{margin-bottom:0; color:#838383; opacity:1; font-size:1.5em; transition:all 0.5s ease 0.2s;}
		.tl-year .cont_text_title p{transition:all 0.5s ease 0.2s;}
		.tl-year p{position:relative; display:inline-block; padding-bottom:13px;}
		.tl-year p:after{content:''; position:absolute; bottom:0; width:0%; height:3px; transition:all 0.5s ease 0.2s; background:#11009E; left:50%; transform:translateX(-50%);}
		.graph_wrap .tl-item:hover .tl-year{top:30%;}
		.graph_wrap .tl-item:hover .tl-year p:after{width:40%;}
		.graph_wrap .tl-item:hover .tl-year .cont_text_title{opacity:0; margin:0;}



	@media screen and (max-width:760px){

	.graph_wrap{flex-direction:column;}
	.graph_wrap .tl-item:hover .tl-year{top:20%;}
	.graph_wrap .tl-item{width:100%; height:300px;}
	.graph_wrap .tl-item:hover{width:100%; height:350px;}
	.tl-year .cont_text_title{margin-top:0;}
	.graph_wrap .tl-item .tl-content{margin:0 10px; top:32%; transform: translate3d(0, 0, 0) translateY(30px) scale(0.7);}
	.graph_wrap .tl-item .tl-content img{margin-top:20px;}
	.graph_wrap .tl-item:hover .tl-content img{margin-top:0px; width: 95%;}
	.tl-year p{padding-bottom:9px;}
	.graph_wrap .tl-item:hover .tl-content{top:40%;}

	/* 막대 그래프 */
		section#results{margin:0 auto auto;}
		.poll-results{padding:0}
		.poll-results .item{height:40px; margin:20px 0;}
		.poll-results .number{font-size:1.5em;}
		.poll-results .vote-title{font-size:1em;}

	


	/* 원형 그래프 */
		.circle_graph{height:320px;}
		.wheel{width:320px; height:320px;}
		.wheel ul li{width:308px; height:305px; background-size:contain; background-repeat:no-repeat; border-top-left-radius:inherit; transform-origin:inherit;}
	

	
}