/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-109370
* CODE     : Dev - EV00021021 , Prod - ....
* FILE     : /kr/event/2025/11/07_winwin/event.jsp
* DESC     : 11월 윈윈페스티벌 - 프로모션 테스트 페이지
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/10/30				신우용				Created
************************************************************************************
**/

/* 프로모션 이벤트 설정 */
.evt-func {
    position: relative;
}

/* 타이머 */
.win-specials{
	display: block;
	margin: 0 auto;
	text-align: center;
}
.win-specials .c-timer__label{
	display: block;
	margin-bottom: 24px;
	font-size: 24px;
	font-weight: 600;
}
.win-specials .c-timer__contents{
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.win-specials .c-timer__num{
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
}
.win-specials .c-timer__contents .c-timer__unit{
	display: inline-flex;
	width: 28px;
	font-size: 30px;
	font-weight: 500;
	justify-content: center;
}
.win-specials .c-timer__num-inner{
	display: inline-flex;
	width: 62px;
	height: 50px;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 28px;
	font-weight: 600;
	border-radius: 8px;
	background: linear-gradient(180deg, #505050 0%, #000 100%);
}
@media screen and (max-width: 767px) {
    .win-specials .c-timer__label{
        margin-bottom: calc(12 / 390 * 100vw);
        font-size: calc(16 / 390 * 100vw);
    }
    .win-specials .c-timer__contents{
        gap: calc(4 / 390 * 100vw);
    }
    .win-specials .c-timer__num{
        gap: calc(4 / 390 * 100vw);
    }
    .win-specials .c-timer__contents .c-timer__unit{
        width: calc(16 / 390 * 100vw);
        font-size: calc(18 / 390 * 100vw);
    }
    .win-specials .c-timer__num-inner{
        width: calc(45 / 390 * 100vw);
        height: calc(36 / 390 * 100vw);
        font-size: calc(20 / 390 * 100vw);
    }
}

/* 룰렛이벤트 영역 */
.roulette__inner {
	padding-bottom: 0px !important;
}
.rouletteVideo-container {
    padding-top: 20px;
}
.video-list {
    display: flex;
    justify-content: center;
}
.video-list li {
    display: none;
}
.video-list li.on {
    display: flex;
    width: 100%;
    max-width: 1380px;
  	justify-content: center;
}
.video-list video {
    width: calc(840 / 1380 * 100%);
}

.roulette-evt-btn-wrap {
    margin-top: 30px;
}
.roulette-evt-btn-wrap .evt-func{
	display: flex;
    justify-content: center;
    align-items: center;
}
.rouletteCoupon {
    display: inline-block;
    width: calc(640 / 1380 * 100%);
    height: 56px;
    text-align: center;
    border-radius: 10px;
    background-image: url(/kr/event/2025/11/07_roulette_coupon/images/chkBtn.png) !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
}
.rouletteCoupon.join {
    pointer-events: none;
    background-image: url('/kr/event/2025/11/07_winwin/images/chkBtn_disabled.png') !important;
}
.roulette-btn_desc {
	display: flex;
  	justify-content: center; 
}
.roulette_notice {
	margin-top: 15px !important;
}
#prdCheckPop_win, #prdCheckPop_lose {
	max-width:300px;
	border-radius: 12px;
	background-color: transparent;
}
#prdCheckPop_win.popup-wrap .pop-conts,
#prdCheckPop_lose.popup-wrap .pop-conts {
	overflow: hidden;
	position: relative;
	padding: 0;
}
#prdCheckPop_lose.popup-wrap .closeBtn {
	position: absolute;
	bottom: 20px;
    left: 50%;
    width: 90%;
    height: 40px;
    transform: translateX(-50%);
    cursor: pointer;
}
#prdCheckPop_win.popup-wrap .closeBtn {
	position: absolute;
	bottom: 20px;
    left: 50%;
    width: 90%;
    height: 40px;
    transform: translateX(-50%);
    cursor: pointer;
}
#prdCheckPop_win.popup-wrap>.btn-close:before,
#prdCheckPop_lose.popup-wrap>.btn-close:before {
	width: 100%;
	height: 100%;
	background-size: 100%;
}

.coupon-pick__box .rouletteVideo-container{
	padding-top: 0;
}
.coupon-pick__box .roulette-evt-btn-wrap {
    margin-top: 0;
    width: calc(640 / 1380 * 100%);
}
.coupon-pick__box .rouletteCoupon {
    width: 100%;
}

@media screen and (max-width: 767px) {
    .roulette-timer {
        margin-top: 15px;
    }
    .timer-wrap {
        display: flex;
        justify-content: left;
        margin-left: 10px;
    }
    .timer {
        font-size: 14px;
    }
    .video-list video {
        width: 100%;
    }
    .rouletteCoupon {
        width: 100%;
        height: calc(48 / 390 * 100vw);
        min-width: 120px;
        aspect-ratio: 14/2;
      	background-image: url('/kr/event/2025/11/07_winwin/images/m_chkBtn.png') !important;
    }
    .rouletteCoupon.join {
        background-image: url('/kr/event/2025/11/07_winwin/images/m_chkBtn_disabled.png') !important;
    }
    .roulette_notice {
        margin-top: 22px !important;
    }
    #prdCheckPop_win, #prdCheckPop_lose {
		top: 50% !important;
		left: 50% !important;
		width: 75%;
		height: auto !important;
		transform: translate(-50%, -50%) !important;
	}
    #prdCheckPop_lose.popup-wrap .closeBtn {
        bottom: 6%;
        height: 18.4%;
    }
    #prdCheckPop_win.popup-wrap .closeBtn {
        bottom: 6%;
        height: 11.8%;
    }
    .coupon-pick__box .roulette-evt-btn-wrap {
        width: 100%;
    }
}

/* 앱 쿠폰 영역 */
.winwin-coupon .article__inner {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 40px;
}
.event-benefit-template .winwin-coupon .coupon-benefit__coupon-pack-btn{
	top: 77.4%;
	left: 42.5%;
	width: 25.1%;
	height: 10.8%;
}
.event-benefit-template .winwin-coupon .coupon-benefit__app-only-btn{
	top: 77.4%;
	left: 68.6%;
	width: 25.2%;
	height: 10.8%;
    cursor: pointer;
}

.event-benefit-template .winwin-coupon .card-benefit__img-linker--benefit{
	top: 77.2%;
	left: 42.5%;
	width: 25.1%;
	height: 10.8%;
	bottom: auto;
}
.event-benefit-template .winwin-coupon .card-benefit__img-linker--detail{
	top: 77.2%;
	left: 68.6%;
	width: 25.2%;
	height: 10.8%;
	right: auto;
	bottom: auto;
}

.winwin-coupon .payment-benefits-lists{
	display: flex;
}
.winwin-coupon .payment-benefits-lists li{
	position: relative;
	flex: 1;
}
.winwin-coupon .payment-benefits-lists li + li:after{
	content:'';
	position: absolute;
	left: 0;
	top: 0;
	width: 1px;
	height: 100%;
	background-image: url('/kr/event/2025/11/07_winwin/images/card_line.png');
	background-repeat: repeat-y;
	background-position: left top;
	background-size: auto 100%;
}

@media screen and (max-width: 767px) {
	.winwin-coupon .article__inner{
		padding: calc(50 / 390 * 100vw) calc(20 / 390 * 100vw) calc(40 / 390 * 100vw);
	}
	.event-benefit-template .winwin-coupon .coupon-benefit__coupon-pack-btn{
		top: 89.3%;
		left: 5.6%;
		width: 43.2%;
		height: 6.7%;
	}
	.event-benefit-template .winwin-coupon .coupon-benefit__app-only-btn{
		top: 89.3%;
		left: 51.2%;
		width: 43.2%;
		height: 6.7%;
	}

	.event-benefit-template .winwin-coupon .card-benefit__img-linker--benefit{
		top: 89.5%;
		left: 5.6%;
		width: 43.2%;
		height: 6.7%;
		bottom: auto;
	}
	.event-benefit-template .winwin-coupon .card-benefit__img-linker--detail{
		top: 89.5%;
		left: 51.2%;
		width: 43.2%;
		height: 6.7%;
		right: auto;
		bottom: auto;
	}
  	.winwin-coupon .payment-benefits-lists{
		flex-direction: column;
	}
	.winwin-coupon .payment-benefits-lists li + li:after{
		left: 0;
		top: 0;
		width: 100%;
		height: 1px;
      	background-image: url('/kr/event/2025/11/07_winwin/images/m_card_line.png');
        background-repeat: repeat-x;
        background-size: 100% auto;
	}
}

/* 윈윈 포인트 이벤트 */
.winwin-payback{
	background-color: #EFEFEF;
}
.winwin-payback .c-sub-title{
	align-items: center;
}
.winwin-payback .c-sub-title__title{
	font-size: 28px;
  	line-height: 1.2;
}
.winwin-payback .c-sub-title__desc{
	text-align: center;
}
.winwin-payback .coupon-benefit__payback-content {
    position: relative;
}

.winwin-payback .coupon-benefit__payback-link {
    position: absolute;
  	top: auto;
    bottom: 0;
    left: 50%;
    width: 46.2%;
    height: 8.6%;
    transform: translateX(-50%);
}
.winwin-payback .l-notice--payback-event {
    margin-bottom: 0;
}

@media screen and (max-width: 767px) {
  	.winwin-payback .c-sub-title{
        align-items: flex-start;
    }
    .winwin-payback .c-sub-title__title{
        font-size: calc(19 / 390 * 100vw);
        line-height: 1.2;
    }
    .winwin-payback .c-sub-title__desc{
        text-align: left;
    }
    .winwin-payback .coupon-benefit__payback-content {
        margin: 0 calc(20 / 390 * 100vw);
    }

    .winwin-payback .coupon-benefit__payback-link {
        width: 100%;
        height: 7.2%;
    }
    .winwin-payback .l-notice--payback-event .c-toggle__data{
        margin: 0 calc(20 / 390 * 100vw);
    }
}