/* 
	파일명 : joinnum.css 
	하는일 :
	   - 위캔드모들에서 joinnum에서 참여인원선택후 
	     선 선택을 위해 카드 돌리는 애니메이션 할때 사용함.
*/

 .joinnum_container {
        width: 192px;
        height: 255px;
        perspective: 300px;
    }


.joinnum_container .joinnum_item {
	width: 192px;
	height: 255px;
/*	border: 1px solid #828282;*/
	font-size: 35px;
	backface-visibility: hidden;/*카드의 뒷면을 안보이게 처리-카드가 뒤집히면 뒷면이 안보임*/
	transition: 0.5s;
}

.joinnum_container .joinnum_item.joinnum_front {
	position: absolute;
	transform: rotateY(0deg);
}

/*.joinnum_container:hover .joinnum_item.joinnum_front {*/
/*	transform: rotateY(180deg);*/
/*}*/

.joinnum_container .joinnum_item.joinnum_back {

	transform: rotateY(-180deg);
}

/*.joinnum_container:hover .joinnum_item.joinnum_back {*/
/*	transform: rotateY(0deg);*/
/*}
		

/* keyframe 관련 */
@keyframes joinnum_p1 {100% {left : 1550px;	top : 680px;}}
@keyframes joinnum_p2 {100% {left : 178px;		top : 680px;}}
@keyframes joinnum_p3 {100% {left : 178px;		top : 195px;}}
@keyframes joinnum_p4 {100% {left : 1550px;	top : 195px;}}

@keyframes joinnum_p3_weekend {100% {left : 178px;	top : 145px; transform: rotate(90deg);}}
@keyframes joinnum_p4_weekend {100% {left : 1550px;	top : 145px; transform: rotate(-90deg);}}

.joinnum_p1 { animation: joinnum_p1 0.4s ease-out forwards;}
.joinnum_p2 { animation: joinnum_p2 0.4s ease-out forwards;}
.joinnum_p3 { animation: joinnum_p3 0.4s ease-out forwards;}
.joinnum_p4 { animation: joinnum_p4 0.4s ease-out forwards;}

.joinnum_p3_weekend { animation: joinnum_p3_weekend 0.4s ease-out forwards;}
.joinnum_p4_weekend { animation: joinnum_p4_weekend 0.4s ease-out forwards;}

/* 커졌다 작아졌다 하기 : 선이선정되어 해당 사용자를 커졌다 작아졌다 하기*/
.joinnum_select_sun {
	animation-name				: joinnum_select_sun;
	animation-duration			: 2s;
	animation-iteration-count	: 1;
	animation-timing-function	:ease-in;
	animation-direction			: normal;
	animation-fill-mode			: backwards;
	animation-play-state			: running;		
}
@keyframes joinnum_select_sun 
{
/*    from {-webkit-transform: scale(1.0);	transform: scale(1.0);}*/
/*    50% {-webkit-transform: scale(1.5);	transform: scale(1.5);}*/
/*	to		{-webkit-transform: scale(1.0);	transform: scale(1.0);}*/

    0% {opacity: 0;}
   20% {opacity: 1.0;}
   40% {opacity: 0.0;}
   60% {opacity: 1.0;}
   80% {opacity: 0.0;}
   100% {opacity: 1.0;}
}