/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-116356
* CODE : Dev - EV00021271 / PE00444001, Prod - EV00008931 / PE00860013
* FILE : /kr/event/2026/02/09_gram_roulette/eventMainGramRoulette.jsp
* DESC : 그램 신제품 구매 고객 룰렛 이벤트(주문연동)
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2026/01/30				김기범				Created
************************************************************************************
**/

.gram-roulette-container .section01 {
    position: relative;
}
.gram-roulette-container .section01 .section-content {
    position: relative;
    max-width: 1146px;
    margin: 0 auto;
}
.gram-roulette-container .section01 .section-content img {
    display: block;
    width: 100%;
}
.gram-roulette-container .section01 .section-board {
	position: absolute;
    top: calc(28 / 360 * 100%);
    left: 50%;
    transform: translateX(20%);
    width: calc(331 / 1146 * 100%);
    max-width: 331px;
    right: 0;
    /* height: calc(330 / 1146 * 100vw); */
	aspect-ratio: 1 / 1;
    max-height: 330px;
    overflow: hidden;
}
.gram-roulette-container .section01 .section-board .rullet-pin {
	position:absolute;
	top: calc(0 / 311 * 100%);
	left:50%;
	margin-left: calc(17 / 331 * -100%);
	width: calc(35 / 331 * 100%);
	height: calc(38 / 331 * 100%);
	background:url(/kr/event/2026/02/09_gram_roulette/images/img_roulette_pin.png) no-repeat;
	background-size:100% auto;
	overflow:hidden;
	z-index:2;
	/* border: 1px solid red; */
}
.gram-roulette-container .section01 .section-board .rullet-board {
	position: absolute;
	top: calc(25 / 331 * 100%);
	left: 0;
	right: 0;
	margin: 0 auto;                       
	width: calc(305 / 331 * 100%);        
	aspect-ratio: 1 / 1;                  
	background: url(/kr/event/2026/02/09_gram_roulette/images/img_roulette_board_0210.png) no-repeat center center;
	background-size: contain;             
	transform-origin: center center;      
	z-index: 1;
	transform: rotate(35.1deg) translateZ(0);  	/* GPU 가속 활성화 */
	will-change: transform;               		/* 브라우저에 transform 변경 예고 */
	backface-visibility: hidden;          		/* 렌더링 최적화 */
	-webkit-backface-visibility: hidden;  		/* Safari 호환 */
}
.gram-roulette-container .section01 .section-board .btn-start-rullet {
	position:absolute;
	top: calc(110 / 331 * 100%);
	left:50%;
	margin-left: calc(75 / 331 * -100%);
	width: calc(150 / 331 * 100%);
	height: calc(135 / 331 * 100%);
	background:url(/kr/event/2026/02/09_gram_roulette/images/btn_start_roulette.png) no-repeat;
	background-size:100% auto;
	overflow:hidden;
	z-index:3;
}
.gram-roulette-container .section01 .section-board.on .rullet-board {
	animation-name: rullet-start;
	animation-duration: 0.3s;                  
	animation-timing-function: linear;         
	animation-fill-mode: forwards;
	animation-iteration-count: infinite;
}
@keyframes rullet-start {
	from { transform: rotate(0deg) translateZ(0); }
	to   { transform: rotate(360deg) translateZ(0); }
}

.gram-roulette-container .section01 .section-board.nPayPoint100000 .rullet-board,
.gram-roulette-container .section01 .section-board.nPayPoint50000 .rullet-board,
.gram-roulette-container .section01 .section-board.nPayPoint10000 .rullet-board,
.gram-roulette-container .section01 .section-board.nextTime .rullet-board,
.gram-roulette-container .section01 .section-board.nPayPoint30000 .rullet-board {
	animation-duration: 4s;
	animation-timing-function: linear;  /* keyframes 내에서 구간별 timing 제어 */
	animation-fill-mode: forwards;
	animation-iteration-count: 1;
}
.gram-roulette-container .section01 .section-board.nPayPoint100000 .rullet-board { animation-name: rullet-gift1; }
.gram-roulette-container .section01 .section-board.nPayPoint50000 .rullet-board { animation-name: rullet-gift2; }
.gram-roulette-container .section01 .section-board.nPayPoint10000 .rullet-board { animation-name: rullet-gift3; }
.gram-roulette-container .section01 .section-board.nextTime .rullet-board { animation-name: rullet-gift4; }
.gram-roulette-container .section01 .section-board.nPayPoint30000 .rullet-board { animation-name: rullet-gift5; }

@keyframes rullet-gift1 { 
	0% {transform: rotate(0deg) translateZ(0);}
	60% {transform: rotate(3600deg) translateZ(0); animation-timing-function: cubic-bezier(0, 0, 0.25, 1);}
	100% {transform: rotate(3960deg) translateZ(0);}  /* 10만원 네이버페이 (10바퀴 + 360도) */
}
@keyframes rullet-gift2 {
	0% {transform: rotate(0deg) translateZ(0);}
	60% {transform: rotate(3312deg) translateZ(0); animation-timing-function: cubic-bezier(0, 0, 0.25, 1);}
	100% {transform: rotate(3672deg) translateZ(0);}  /* 5만원 네이버페이 (10바퀴 + 72도) */
}
@keyframes rullet-gift3 { 
	0% {transform: rotate(0deg) translateZ(0);}
	60% {transform: rotate(3384deg) translateZ(0); animation-timing-function: cubic-bezier(0, 0, 0.25, 1);}
	100% {transform: rotate(3744deg) translateZ(0);}  /* 1만원 네이버페이 (10바퀴 + 144도) */
}
@keyframes rullet-gift4 { 
	0% {transform: rotate(0deg) translateZ(0);}
	60% {transform: rotate(3456deg) translateZ(0); animation-timing-function: cubic-bezier(0, 0.97, 0.62, 1.32);}
	100% {transform: rotate(3816deg) translateZ(0);}  /* 꽝 (10바퀴 + 216도) */
}
@keyframes rullet-gift5 { 
	0% {transform: rotate(0deg) translateZ(0);}
	60% {transform: rotate(3600deg) translateZ(0); animation-timing-function: cubic-bezier(0, 0.97, 0.46, 1.37);}
	100% {transform: rotate(3888deg) translateZ(0);}  /* 3만원 네이버페이 (10바퀴 + 288도) */
}
.gram-roulette-container .section02 {
	text-align: center;
    margin: calc(32 / 1380 * 100%) 0;
}
.gram-roulette-container .section02 .rouletteConfirmBtn {
    border-radius: 8px;
    width: calc(260 / 1146 * 100%);
    background: #111;
    color: #fff;
    height: 56px;
	font-size: 16px;
}
/* 이벤트 참여 팝업 */
#eventJoinGramRoulette.popup-wrap .pop-conts {
	max-height: 610px;
    padding: 20px 40px 0;
}
#eventJoinGramRoulette.popup-wrap .input-info .bullet-list.mb-24 {
	margin-bottom: 24px;
}
/* 즉석 경품 팝업 */
#prdCheckPopGramRoulette.popup-wrap {
	max-width: 300px;
}
#prdCheckPopGramRoulette .pop-conts {
	position: relative;
	padding: 0;
}
#prdCheckPopGramRoulette.popup-wrap .btn-close::before {
	z-index: -1;
}
#prdCheckPopGramRoulette .gram-roulette-btn {
	position: absolute;
	width: calc(260 / 300 * 100%);
	left: calc(20 / 300 * 100%);
	bottom: 20px;
    height: calc(40 / 300 * 100%);
    max-height: 40px;
}
#prdCheckPopGramRoulette .gram-roulette-btn .btnGramRouletteClose {
	width: 100%;
	height: 100%;
}
#prdCheckPopGramRoulette.popup-wrap>.btn-close {
	position: absolute;
	top: 10px;
	right: 19px;
	width: 18px;
	height: 20px;
}
@media screen and (max-width: 1146px) {
	.gram-roulette-container .section02 .rouletteConfirmBtn {
		width: calc(260 / 1146 * 100vw);
		height: calc(56 / 1146 * 100vw);
		font-size: calc(16 / 1146 * 100vw);
	}
}
@media screen and (max-width: 767px){
	.gram-roulette-container .section01 .section-board {
		top: calc(215 / 720 * 100%);
        left: 50%;
        transform: translateX(-50%);
        margin-left: 0;
        width: calc(660 / 720 * 100%);
        height: calc(480 / 720 * 100%);
		max-width: none;
        max-height: none;
	}
	.gram-roulette-container .section01 .section-board .rullet-board {
		transform: rotate(35.9deg);
	}
	.gram-roulette-container .section02 {
		margin: calc(45 / 720 * 100%) 0;
	}
	.gram-roulette-container .section02 .rouletteConfirmBtn {
		height: calc(89 / 720 * 100vw);
        width: calc(645 / 720 * 100%);
        font-size: calc(28 / 720 * 100vw);
		border-radius: 6px;
	}
	/* 참여팝업 */
	#eventJoinGramRoulette.popup-wrap .pop-conts {
		max-height: calc(100% - 122px);
		padding: 9px 16px 60px;
	}
	#eventJoinGramRoulette.popup-wrap .input-info .tit-wrap {
		margin-bottom: 0px;
	}
	#eventJoinGramRoulette.popup-wrap .bullet-list {
		margin: 9px 0;
	}
	#eventJoinGramRoulette.popup-wrap .input-info .bullet-list.mb-24 {
		margin-bottom: 9px;
	}
	#eventJoinGramRoulette.popup-wrap .tb_row table td {
		padding: 5px 10px;
		line-height: 20px !important;
	}
	#eventJoinGramRoulette.popup-wrap .form-wrap {
		margin-top: 9px;
	}
	/* 경품 팝업 */
	#prdCheckPopGramRoulette.popup-wrap {
		max-width: 300px;
		min-height: auto !important;
		height: auto;
		transform: translateX(-50%) translateY(-50%) !important;
		left: 50% !important;
		top: 50% !important;
		border-radius: 8px;
	}
	#prdCheckPopGramRoulette.popup-wrap>.btn-close {
		top: 10px;
		right: 19px;
		width: 18px;
		height: 20px;
	}
}