/**
************************************************************************************
* CSR  : https://lgecom.atlassian.net/browse/CSR-7324
* CODE : Dev - EV00021691 , Prod - EV00009235
* FILE : /kr/event/2026/06/08_big_promotion_evt/eventMainBigPromotionEvt.jsp
* DESC : 6월 빅판촉 참여형이벤트 개발 요청(출석/카톡콜백+즉석당첨)
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2026/06/02				신우용				Created
************************************************************************************
**/

@charset "utf-8";

/* ============================================
    스켈레톤 스타일
============================================ */
@keyframes skeleton-gradient {
    to {
        background-position: -100% 0
    }
}

/* 스켈레톤 활성화되면 요소 border 색상 변경 */
[data-skeleton-border="true"]::before,
[data-skeleton-border="true"]::after,
[data-skeleton-border="true"] {
    border-color: #f3f4f6 !important;
}

/* 스켈레톤 활성화되면 요소 background 초기화 */
[data-skeleton-background="true"]::before,
[data-skeleton-background="true"]::after,
[data-skeleton-background="true"] {
    background: transparent !important;
    filter: none !important;
}

/* 스켈레톤이 활성화되면 요소 skeleton 디자인으로 변경 */
[data-skeleton="true"] {
    color: transparent !important;
    background-image: none !important;
    position: relative !important;
    overflow: hidden !important;
    pointer-events: none !important;
    user-select: none !important;
}

[data-skeleton="true"]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, #f3f4f6 30%, #f0f1f2 38%, #f0f1f2 40%, #f3f4f6 48%);
    background-size: 200% 100%;
    background-position: 100% 0;
    animation: skeleton-gradient 1s infinite;
}

/* 스켈레톤이 활성화되면 내부 텍스트 숨김 */
[data-skeleton="true"] *,
[data-skeleton="true"] *::before,
[data-skeleton="true"] *::after {
    visibility: hidden !important;
}

/* header layout */
.header.helloBar .hello-bar-wrap.hello-app{
	display: none !important;
}
.header.helloBar .mobile-nav-wrap{
	top: 0;
}
.header.helloBar .header-wrap .utility {
    top: 6px;
}
.subRenewWrap.hellobar-wrap {
	padding-top: 46px;
}

/* Dimmed 오버레이 */
.event-benefit-template .c-product {
    position: relative;
}

.main-specials__dimmed {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    z-index: 5;
}

#timeDealOpenDimmed,
#timeDealCycleSoldOutDimmed{
	left: calc(-20 * var(--ratio));
    right: calc(-20 * var(--ratio));
}

.main-specials__dimmed-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(230, 226, 226, 0.5) 0%, rgba(253, 249, 247, 0.8) 100%);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    z-index: 0;
}

.main-specials__dimmed-background picture,
.main-specials__dimmed-background img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background-color: #4D4D4D;
}

.main-specials__dimmed.hidden {
    display: none;
}

.main-specials__dimmed-content {
    position: relative;
    z-index: 1;
    text-align: center;
}

.badge-comingsoon {
    position: relative;
    display: inline-flex;
    padding: var(--evt-size-2) var(--evt-size-14);
    justify-content: center;
    align-items: center;
    gap: var(--evt-size-6);
    border-radius: var(--evt-size-32);
    background: #FD312E;
    color: #FFF;
    text-align: center;
    font-size: var(--evt-size-18);
    font-weight: 500;
    line-height: 1.4;
}

.badge-comingsoon::before {
    content: '';
    display: inline-block;
    width: var(--evt-size-20);
    height: var(--evt-size-20);
    background: url('/kr/champion/images/icon_clock.svg') no-repeat 0 0 / 100% auto;
}

.main-specials__dimmed-title {
    margin-top: var(--evt-size-20);
    font-size: var(--evt-size-26);
    font-weight: 600;
    line-height: 1.4;
}

.main-specials__dimmed-title.comming {
    margin-top: 0;
    color: #EA1917;
    font-weight: 600;
    line-height: 1.4;
    letter-spacing: -0.52px;
}

.main-specials__open-notice {
    margin-top: var(--evt-size-10);
    font-size: var(--evt-size-16);
    font-weight: 500;
    line-height: 1.4;
}

/* 타임딜 타이틀 */
.time-deal__title {
    position: relative;
    z-index: 1;
}

.next-deal__timer {
    position: absolute;
    bottom: calc(-20 * var(--ratio));
    left: 50%;
    z-index: 11;
    width: calc(256 * var(--ratio));
    height: calc(40 * var(--ratio));
    padding: 0 calc(20 * var(--ratio));
    border-radius: 100px;
    background: #111;
    color: #fff;
    text-align: center;
    font-size: var(--evt-size-14);
    font-weight: 500;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transform: translateX(-50%);
	opacity: 1;
	transition: opacity .3s ease-in-out;
	visibility: visible;
}

.next-deal__timer.hidden {
    opacity: 0;
	visibility: hidden;
	transition: opacity .3s ease-in-out;
}

.main-specials__dimmed-content .next-deal__timer--open {
    position: relative;
    bottom: auto;
    left: auto;
    transform: none;
    margin: var(--evt-size-16) auto 0;
    width: calc(280 * var(--ratio));
}

.next-deal__timer .timer-content {
    display: inline-flex;
    color: #FFF;
    align-items: center;
    justify-content: center;
    font-size: var(--evt-size-18);
    font-weight: 600;
    letter-spacing: -0.36px;
    line-height: 1.4;
}

.next-deal__timer .timer-content::before {
    content: '';
    display: inline-block;
    margin-right: var(--evt-size-6);
    width: var(--evt-size-20);
    height: var(--evt-size-20);
    background: url('/kr/champion/images/icon_clock_white.svg') no-repeat 0 0 / 100% auto;
}

#timeDealInitialOpenTimer.next-deal__timer .timer-value.hidden,
#timeDealInitialOpenTimer.next-deal__timer .timer-value-unit.hidden{
	display: none;
}

/* 다음 특가 */
.time-deal__next-content {
    overflow: hidden;
    position: relative;
    display: flex;
    width: 100%;
    height: calc(128 * var(--ratio));
    align-items: center;
    justify-content: center;
    border-radius: var(--evt-size-8);
}

.time-deal__background {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    align-items: center;
    justify-content: center;
    z-index: -1;
}

.time-deal__next-content-inner {
    color: #fff;
    font-size: var(--evt-size-18);
    font-weight: 600;
    letter-spacing: -0.32px;
    line-height: 1.4;
}

.time-deal__next-content-inner .next-date {
    display: inline-flex;
    margin-bottom: var(--evt-size-8);
    padding: var(--evt-size-4) var(--evt-size-14);
    font-size: var(--evt-size-16);
    border: 1px solid #fff;
    border-radius: 100px;
    align-items: center;
    justify-content: center;
}

.time-deal__next-content-inner .next-date::before {
    content: '';
    display: inline-block;
    margin-right: var(--evt-size-3);
    width: var(--evt-size-14);
    height: var(--evt-size-14);
    background: url('/kr/champion/images/icon_clock_white2.svg') no-repeat 0 0 / 100% auto;
}

.time-deal__next-content.hidden {
    display: none;
}

/* 선착순 갯수 표시 */
.badge-black-limited {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: var(--evt-size-25);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    color: #FFF;
    text-align: center;
    font-size: var(--evt-size-11);
    font-weight: 600;
    letter-spacing: -0.22px;
}

/* 타임딜 탭 */
#championDealProductList{
	min-height: calc(120 * var(--ratio));
}

.event-benefit-template .c-product__actions button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    padding: calc(5 * var(--ratio)) calc(10 * var(--ratio));
    overflow: hidden;
    font-size: calc(12 * var(--ratio));
    font-weight: 400;
    line-height: 133.333%;
    color: #111;
    text-decoration: none;
    cursor: pointer;
    background-color: #fff;
    border: calc(1 * var(--ratio)) solid #dee1e5;
    border-radius: 32px;
    transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}

.event-benefit-template .c-product__actions button.active {
    border-color: #111;
}

.event-benefit-template .c-product__actions button:disabled,
.event-benefit-template .c-product__actions button.sold-out,
.event-benefit-template .c-product__actions button.active:disabled {
  	border-color: #dee1e5;
    cursor: not-allowed;
    opacity: 0.3;
    pointer-events: none;
}

.event-benefit-template #championDealProductList.c-product__list--only-horizontal .c-product__actions {
    margin: 0 0 calc(10 * var(--ratio));
}

/* 선착순 딜 디스클라이머 */
.time-deal__description{
    margin-top: var(--evt-size-16);
    padding-top: var(--evt-size-16);
    border-top: var(--evt-size-1) solid #cacaca;
}

.time-deal__description .bullet-list{
    margin-top: 0;
    font-size: var(--evt-size-12);
    line-height: 1.4;
}
.time-deal__description .bullet-list .b-txt{
    padding-left: var(--evt-size-13);
}
.time-deal__description .bullet-list .b-txt::before {
    width: var(--evt-size-2);
    height: var(--evt-size-2);
    margin-top: var(--evt-size-8);
    margin-left: calc(-10 * var(--ratio));
    margin-right: var(--evt-size-8);
    border-radius: 50%;
    background: #000;
    vertical-align: top;
}

/* 유의사항 */
.evt-acco-area.acco-text-type{
    margin-top: var(--evt-size-12);
}
.evt-acco-area.acco-text-type .evt-acco-head{
    text-align: center;
}
.evt-acco-area.acco-text-type .evt-acco-btn {
    font-size: var(--evt-size-13);
}

.evt-acco-area.acco-text-type .evt-acco-btn:after {
    width: var(--evt-size-12);
    height: var(--evt-size-12);
}

.evt-acco-area.acco-text-type .evt-acco-cont.unfolded {
    margin-top: var(--evt-size-16);
    padding: calc(20 * var(--ratio)) calc(16 * var(--ratio));
    border-radius: calc(8 * var(--ratio));
    background-color: #f4f4f4;
}

.evt-acco-area.acco-text-type .evt-acco__title{
    margin-bottom: calc(2 * var(--ratio));
    color: #111;
    font-size: calc(13 * var(--ratio));
    font-weight: 600;
    line-height: 140%;
    letter-spacing: -0.04em;
}
.evt-acco-area.acco-text-type .evt-acco__list{
    display: flex;
    flex-direction: column;
    row-gap: var(--evt-size-2);
}
.evt-acco-area.acco-text-type .evt-acco__list .evt-acco__item{
    position: relative;
    padding-left: calc(12 * var(--ratio));
    color: var(--gray-g40);
    font-size: calc(12 * var(--ratio));
    font-weight: 400;
    line-height: 140%;
    letter-spacing: -0.04em;
}

.evt-acco-area.acco-text-type .evt-acco__list .evt-acco__item:before{
    content: '';
    position: absolute;
    top: calc(7 * var(--ratio));
    left: calc(3 * var(--ratio));
    width: calc(2 * var(--ratio));
    height: calc(2 * var(--ratio));
    background-color: var(--gray-g40);
  	border-radius: 100px;
}

/* 가전 베스트, 구독 베스트 배너 수정작업  */
.l-article__banner-container.banner_txt_type02 .l-article__banner-content {
    height: calc(120 * var(--ratio));
}

.l-article__banner-container.banner_txt_type02 .l-article__banner-content .l-article__banner-inner .l-article__banner-inner-top .l-banner__title .l-banner_title_desc {
    font-family: 'Google Sans Flex';
    font-weight: 600;
}