/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-51775
* CODE : Dev - EV00018821 , Prod - EV00006682 , 기획전 - PE00375002
* FILE : /kr/event/2023/11/18_twins_roulette/eventMaintwinsRoulette.jsp
* DESC : LG트윈스 우승 기념-LGE.COM 회원 즉석당첨 룰렛 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/11/16				정규진			    Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
.mdevice {
    --width: 720;
    }
.evt-func {
    position: relative;
}
/* 참여팝업 */
#agreeRoulette1_f table tbody tr td {
    font-weight: bold;
}
#agreeRoulette1_f table tbody tr td:last-child {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
/* 레이어 팝업 */
#popupTwinsRouletteGift.instant-draw-pop {
	max-width: 540px;
}
#popupTwinsRouletteGift.instant-draw-pop .btn-pop-close {
	bottom: 77px;
    width: 213px;
    height: 72px;
}
#popupTwinsRouletteGift.instant-draw-pop .evt-product-text {
	position:absolute;
	top: 236px;
    left: 43px;
    width: 455px;
    height: 85px;
	text-align:center;
	font-weight: bold;
    font-size: 24px;
    background-color: transparent;
}
#popupTwinsRouletteGift.instant-draw-pop .evt-product-serial {
	position: absolute;
	bottom: 10px;
	left: 0;
	width: 100%;
	padding: 0 20px;
	font-size: 12px;
	text-align: center;
    background-color: transparent;
    color: #666;
}
#popupTwinsRouletteGift.instant-draw-pop .evt-product-text:focus, #popupTwinsRouletteGift.instant-draw-pop .evt-product-serial:focus {
	outline:none;
}
#popupTwinsRouletteGift.instant-draw-pop .btn-close {position:absolute;top:calc(18 / 640 * 100%);right:calc(28 / 640 * 100%);width:calc(37 / 640 * 100%);padding-bottom:calc(38 / 640 * 100%);overflow:hidden;}

/* .twinsRoulette-container {margin:0 auto;max-width:1380px;font-size:0;} */
/* .twinsRoulette-container img {margin:0 auto;width:100%;height:auto;} */
/* .twinsRoulette-container .pc {display:block;}
.twinsRoulette-container .mobile {display:none;} */


.twinsRoulette-container .section01 {position:relative;}
.twinsRoulette-container .section01 .section-board {
    position: absolute;
    top: calc(555 / 1380 * 100%);
    left: 50%;
    margin-left: calc(294 / 1380 * -100%);
    width: calc(588 / 1380 * 100%);
    height: calc(588 / 1324 * 100%);
    overflow: hidden;
}
.twinsRoulette-container .section01 .section-board .rullet-pin {position:absolute;top:0;left:50%;margin-left:calc(20 / 588 * -100%);width:calc(43 / 588 * 100%);height:calc(54 / 588 * 100%);background:url(/kr/event/2023/11/18_twins_roulette/images/img_rullet_pin.png) no-repeat;background-size:100% auto;overflow:hidden;z-index:2;}
.twinsRoulette-container .section01 .section-board .rullet-board {position:absolute;top:calc(15 / 588 * 100%);left:50%;margin-left:calc(279 / 588 * -100%);width:calc(558 / 588 * 100%);height:calc(558 / 588 * 100%);background:url(/kr/event/2023/11/18_twins_roulette/images/img_rullet_board.png) no-repeat;background-size:100% auto;overflow:hidden;z-index:1;}
.twinsRoulette-container .section01 .section-board .btn-start-rullet {position:absolute;top:calc(205 / 588 * 100%);left:50%;margin-left:calc(88 / 588 * -100%);width:calc(170 / 588 * 100%);height:calc(175 / 588 * 100%);background:url(/kr/event/2023/11/18_twins_roulette/images/btn_start_rullet.png) no-repeat;background-size:100% auto;overflow:hidden;z-index:3;}
.twinsRoulette-container .section01 .section-board.on .rullet-board {
	animation-name:rullet-start;
	animation-duration:0.1s;
	animation-fill-mode:forwards;
	animation-iteration-count:infinite;
}
@keyframes rullet-start{
	0% {
		transform:rotate(0deg);
		transition-timing-function:ease-out;
	}
	100%{
		transform:rotate(360deg);
	}
}

.twinsRoulette-container .section01 .section-board.gift-Z8am9q .rullet-board {animation-name:rullet-gift1;animation-iteration-count:1;}
.twinsRoulette-container .section01 .section-board.gift-A4kf1N .rullet-board {animation-name:rullet-gift2;animation-iteration-count:1;}
.twinsRoulette-container .section01 .section-board.gift-Jr5fw3 .rullet-board {animation-name:rullet-gift3;animation-iteration-count:1;}
.twinsRoulette-container .section01 .section-board.gift-4kU1Nq .rullet-board {animation-name:rullet-gift4;animation-iteration-count:1;}
.twinsRoulette-container .section01 .section-board.gift-k46zO2 .rullet-board {animation-name:rullet-gift5;animation-iteration-count:1;}
.twinsRoulette-container .section01 .section-board.gift-m6V5i3 .rullet-board {animation-name:rullet-gift6;animation-iteration-count:1;}
@keyframes rullet-gift1 { 100%{transform:rotate(330deg);} }		/* 그램 */
@keyframes rullet-gift2 { 100%{transform:rotate(210deg);} }		/* 와인셀러미니 */
@keyframes rullet-gift3 { 100%{transform:rotate(150deg);} }		/* 튀운미니 */
@keyframes rullet-gift4 { 100%{transform:rotate(270deg);} }		/* 29만 할인 쿠폰 */
@keyframes rullet-gift5 { 100%{transform:rotate(90deg);} }		/* 2만9천 포인트 */
@keyframes rullet-gift6 { 100%{transform:rotate(30deg);} }		/* 꽝 */

.twinsRoulette-container .section01 .rouletteConfirmBtn {
    width: calc(484 / 1380 * 100%);
    height: calc(100 / 1380 * 100%);
    position: absolute;
    bottom: calc(82 / 1380 * 100%);
    left: 50%;
    transform: translateX(-50%);
}

/* 모바일 */
@media screen and (max-width: 767px){
    /* 참여팝업 */
    #agreeRoulette1_f table tbody tr td:last-child {
        font-size:16px;
        line-height:24px;
    }

	.twinsRoulette-container .section01 .section-board {margin-left:calc(294 / 720 * -100%);width:calc(588 / 720 * 100%); height: calc(588 / 1319 * 100%);}
	.twinsRoulette-container .section01 .rouletteConfirmBtn {
		width: calc(333 / 720 * 100%);
		height: calc(49 / 720 * 100%);
		position: absolute;
		bottom: calc(43 / 720 * 100%);
		left: 50%;
		transform: translateX(-50%);
	}


	#popupTwinsRouletteGift.instant-draw-pop .btn-pop-close {
		bottom: 59px;
		width: 166px;
		height: 55px;
	}
}