/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-50729
* CODE : Dev - EV00018861 , Prod - EV00006711
* FILE : /kr/event/2023/12/13_newyear_evt/eventMainNewyearEvt.jsp
* DESC : LGE.COM 신년 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/12/06				신우용				Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
.mdevice {
	--width: 720;
}
.evt-func {
	position: relative;
}
/* 참여팝업 */
#agreeDelivery1_f table tbody tr td {
	font-weight: bold;
}
#agreeDelivery1_f table tbody tr td:last-child {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}

/* 즉석당첨 레이어팝업 */
.instant-draw-pop {
	max-width: 600px;
}

.instant-draw-pop >.btn-close {
    right: 28px;
}

.instant-draw-pop #showGift{
	display: none;
}
.instant-draw-pop #giftCheckBtn {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
}
.instant-draw-pop .btn-pop-close, .instant-draw-pop #giftCheckBtn {
	bottom: 60px;
    width: 320px;
    height: 70px;
}
.mdevice .instant-draw-pop {
	max-width: 90%;
}
.mdevice .instant-draw-pop .btn-pop-close, .mdevice .instant-draw-pop #giftCheckBtn {
	bottom: calc(65 / var(--width) * 100%);
    width: calc(390 / var(--width) * 100%);
    height: calc(70 / var(--width) * 100%);
}
.instant-draw-pop >.btn-close {
    right: 28px;
}

.calendar-evt{
	position: absolute;
	top: calc(180 / 1380 * 100%);
	left: 50%;
	display:flex;
	width: calc(755 / 1380 * 100%);
	height: calc(630 / 1062 * 100%);
	flex-wrap: wrap;
	justify-content: center;
	transform: translateX(-50%);
}

.calendar-evt li{
	position: relative;
	width: calc(20% - (18 / 1380 * 100%));
    margin: calc(27 / 1380 * 100%) calc(11 / 1380 * 100%);
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
}

.calendar-evt li[data-time="20231222"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_22.png');
}
.calendar-evt li[data-time="20231223"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_23.png');
}
.calendar-evt li[data-time="20231224"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_24.png');
}
.calendar-evt li[data-time="20231225"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_25.png');
}
.calendar-evt li[data-time="20231226"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_26.png');
}
.calendar-evt li[data-time="20231227"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_27.png');
}
.calendar-evt li[data-time="20231228"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_28.png');
}
.calendar-evt li[data-time="20231229"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_29.png');
}

.calendar-evt li[data-time="20231230"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_30.png');
}
.calendar-evt li[data-time="20231231"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_31.png');
}
.calendar-evt li:after{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-position: center top;
	background-repeat: no-repeat;
	background-size: 100% auto;
	z-index: 1;
	text-indent: -9999px;
}

.calendar-evt li.check:after{
	content:'지난 선물';
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/calendar_close.png');
}

.calendar-evt li.next:after{
	content:'다음 선물';
}
.calendar-evt li.check:after{
	content:'참여 완료';
}

.mdevice .calendar-evt {
    top: calc(70 / var(--width) * 100%);
    width: calc(670 / var(--width) * 100%);
    height: calc(500 / var(--width) * 100%);
}
.mdevice .calendar-evt li {
    width: calc(33% - (16 / var(--width) * 100%));
    margin: calc(25 / var(--width) * 100%) calc(6 / var(--width) * 100%);
}
.mdevice .calendar-evt li:nth-child(5n+4){
	margin-left: calc(120 / var(--width) * 100%);
}
.mdevice .calendar-evt li:nth-child(5n+5){
	margin-right: calc(120 / var(--width) * 100%);
}
.mdevice .calendar-evt li[data-time="20231222"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_22.png');
}
.mdevice .calendar-evt li[data-time="20231223"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_23.png');
}
.mdevice .calendar-evt li[data-time="20231224"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_24.png');
}
.mdevice .calendar-evt li[data-time="20231225"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_25.png');
}
.mdevice .calendar-evt li[data-time="20231226"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_26.png');
}
.mdevice .calendar-evt li[data-time="20231227"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_27.png');
}
.mdevice .calendar-evt li[data-time="20231228"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_28.png');
}
.mdevice .calendar-evt li[data-time="20231229"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_29.png');
}
.mdevice .calendar-evt li[data-time="20231230"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_30.png');
}
.mdevice .calendar-evt li[data-time="20231231"]{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_31.png');
}
.mdevice .calendar-evt li.check:after{
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/m_calendar_close.png');
}

.evt-btn-area.evt-join-group{
	bottom: 0;
	margin-bottom: calc(109 / 1380 * 100%);
    padding-bottom: calc(160 / 1380 * 100%);
}
.evt-btn-area.evt-join-group > div{
	flex-direction: column;
}
.evt-btn-area.evt-join-group a{
	width: calc(400 / 1380 * 100%);
    margin: calc(8 / 1380 * 100%) 0;
}

.mdevice .evt-btn-area.evt-join-group{
	margin-bottom: calc(125 / var(--width) * 100%);
    padding-bottom: calc(230 / var(--width) * 100%);
}
.mdevice .evt-btn-area.evt-join-group a{
	width: calc(660 / var(--width) * 100%);
    margin: calc(8 / var(--width) * 100%) 0;
}

.newyear-slide{
	position: absolute;
	top: calc(450 / 1380 * 100%);
    left: 50%;
    width: calc(720 / 1380 * 100%);
	padding: 0 calc(120 / 1380 * 100%);
	transform: translateX(-50%);
}

.newyear-slide .swiper-pagination{
	position: static;
	margin-top: calc(30 / 1380 * 100%);
}
.newyear-slide .swiper-pagination-bullet{
	width: 9px;
	height: 9px;
	margin: 0 3px;
	opacity: 1;
	background: #fff;
	border: 1px solid #e0cec2;
}
.newyear-slide .swiper-pagination-bullet-active {
    background: #e0cec2;
}
.newyear-slide .swiper-button-next, .newyear-slide .swiper-button-prev{
	display: block;
	width: calc(56 / 1380 * 100%);
    height: calc(286 / 1380 * 100%);
    margin-top: calc(-100 / 1380 * 100%);
	background-image: url('/kr/event/2023/12/13_newyear_evt/images/newyear_slide_btn.png');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% 100%;
}
.newyear-slide .swiper-button-prev{
	left: 0;
}
.newyear-slide .swiper-button-next{
	right: 0;
	transform: rotate(180deg);
}

.evt-btn-area.gift-calendar{
	bottom: 0;
	margin-bottom: calc(97 / 1380 * 100%);
	padding-bottom: calc(60 / 1380 * 100%);
}
.evt-btn-area.gift-calendar a{
	width: calc(340 / 1380 * 100%);
}
.mdevice .evt-btn-area.gift-calendar{
	margin-bottom: calc(110 / var(--width) * 100%);
	padding-bottom: calc(100 / var(--width) * 100%);
}
.mdevice .evt-btn-area.gift-calendar a{
	width: 100%;
}
                
.mdevice .newyear-slide{
	top: calc(230 / var(--width) * 100%);
	width: calc(534 / var(--width) * 100%);
	padding: 0;
}
.mdevice .newyear-slide .swiper-pagination {
    margin-top: 0;
}
.mdevice .newyear-slide .swiper-pagination-bullet {
    width: 6px;
    height: 6px;
    margin: 0 2px;
}
.mdevice .newyear-slide .swiper-button-next, .mdevice .newyear-slide .swiper-button-prev{
	display: none;
}

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