/**
************************************************************************************
* 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;
}

/* .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(502 / 1134 * 100%);
    left: 50%;
    margin-left: calc(294 / 1380 * -100%);
    width: calc(588 / 1380 * 100%);
    height: calc(588 / 1134 * 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(546 / 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(170 / 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);} }		/* 꽝 */

#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;}

#popupEventRequest {display:none;border-style:none;outline:none;}
#popupEventRequest .pop-conts {height:auto;max-height:80vh;padding:48px 40px 0;overflow-y:auto;}
#popupEventRequest .pop-conts .agree-input {margin-top:12px;}
#popupEventRequest .pop-conts .input-info-wrap {margin-top:15px;}
#popupEventRequest .pop-conts .input-info-wrap .tb-tit.req::after {content:'*';display:inline-block;margin-left:1px;color:#ec455a;font-size:inherit;line-height:inherit;vertical-align:top;}
#popupEventRequest .pop-conts .form-wrap {margin-top:34px;}
#popupEventRequest .pop-conts #agree2_f .bullet-list {margin-top:0;margin-bottom:24px;}
#popupEventRequest .pop-conts #uiSubmit {padding:10px 31px 12px;}

#popupRulletGift .btn-close {top:0;right:0;width:calc(78 / 640 * 100%);padding-bottom:calc(77 / 640 * 100%);}

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

	.twinsRoulette-container .section01 .section-board {margin-left:calc(294 / 720 * -100%);width:calc(588 / 720 * 100%);}

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