/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-104971
* CODE     : Dev - EV00020921 , Prod - EV00008591
* FILE     : /kr/event/2025/09/22_refrigerators_matching/eventMainRefrigeratorsMatching.jsp
* DESC     : 25년 김치냉장고 런칭 이벤트 개발 요청 - 참여형(즉석 경품)
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/09/02				신우용				Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
	--width: 1380;
}
.evt-func {
	position: relative;
}

.kimchi-container{
	max-width: 1380px;
	margin: 0 auto;
	font-family: 'Pretendard', sans-serif;
}
.kimchi-container .kimchi-matching {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 48px;
}

.kimchi-container .today-evt-count {
	display: flex;
	width: calc(300 / var(--width) * 100%);
	height: 60px;
	border: 3px solid #C44343;
	border-radius: 15px;
	justify-content: center;
	align-items: center;
}
.kimchi-container .today-evt-count p{
	display: inline-flex;
    font-size: 24px;
    line-height: 1.2;
	color: #c44343;
    column-gap: 6px;
}
.kimchi-container .today-evt-count strong{
	display: inline-block;
    /*width: 55px;*/
    text-align: right;
  	font-weight: 600;
  	vertical-align: middle;
}
.kimchi-cards-cnt {
	width: calc(820 / var(--width) * 100%);
	margin: 0 auto;
}

.kimchi-cards {
	display: grid;
	width: 100%;
	margin: 0 auto;
	grid-template-columns: repeat(3, minmax(calc((100% - 40px) / 3), auto));
	gap: 0 20px;
}
.kimchi-cards li {
	position: relative;
	height: 390px;
	perspective: 1000px;
	transform-style: preserve-3d;
}
.kimchi-cards li:first-child{
	cursor: pointer;
}
.kimchi-cards li:first-child::before{
	content:'카드를 선택해 보세요.';
	position: absolute;
	bottom: 42px;
    right: 20px;
    width: 65px;
    height: 65px;
	background-image: url('/kr/event/2025/09/22_refrigerators_matching/images/ico_mouse.svg');
	background-repeat: no-repeat;
	background-position: 50% 50%;
	background-size: 100% auto;
	text-indent: -9999px;
	opacity: 1;
	animation: btnOpen 1s linear infinite alternate;
  	transition: opacity .3s ease-in-out;
	z-index: 11;
}
.kimchi-cards li .view {
	position: absolute;
	top: 0;
	left: 0;
  	width: 100%;
	height: 100%;
	transition: transform 0.5s linear;
	backface-visibility: hidden;
	user-select: none;
	pointer-events: none;
}

.kimchi-cards li .view.front {
	z-index: 10;
	transform: rotateY(0deg);
}
.kimchi-cards li .view.front img{
	opacity: 0.5;
}
.kimchi-cards li:first-child .view.front img{
	opacity: 1;
}
.kimchi-cards li .view.back {
	transform: rotateY(180deg);
}
.kimchi-cards.result-card li .view.front {
	transform: rotateY(-180deg);
}
.kimchi-cards.result-card li .view.back {
	transform: rotateY(0deg);
}
/* 시간 설정 */
.kimchi-cards.result-card li:before{
	opacity: 0;
}
.kimchi-cards.result-card li:nth-child(1) .view{
	transition-delay: 0.5s;
}
.kimchi-cards.result-card li:nth-child(2) .view{
	transition-delay: 1s;
}
.kimchi-cards.result-card li:nth-child(3) .view{
	transition-delay: 1.5s;
}

.kimchi-container .kimchi-matching .evt-btn-area{
	top: 0;
	padding-top: calc(180 / var(--width) * 100%);
}
.kimchi-container .kimchi-matching .evt-btn-area > div{
	flex-direction: column;
	justify-content: space-between;
}
.kimchi-container .kimchi-matching .evt-btn-area a{
	width: calc(300 / var(--width) * 100%);
    height: calc(620 / var(--width) * 100%);
}

.kimchi-container .evt-acco-head.evt-btn-area{
	top: 0;
	padding-top: calc(42 / var(--width)* 100%);
}
.kimchi-container .evt-acco-head.evt-btn-area button{
	width: 100%;
}

#prdCheckPop{
	max-width: 420px;
	border-radius: 16px;
	background-color: transparent;
}
#prdCheckPop.popup-wrap .pop-conts{
	position: relative;
	padding: 0;
}
#prdCheckPop.popup-wrap>.btn-close{
	top: 10px;
    right: 12px;
    width: 36px;
    height: 36px;
}
#prdCheckPop.popup-wrap>.btn-close:before{
	display: none;
}

@media screen and (max-width: 1480px) {
	.kimchi-container .today-evt-count {
		height: 4.0541vw;
		border-radius: 1.0135vw;
	}
	.kimchi-container .today-evt-count p{
		font-size: 1.6216vw;
	}
  	.kimchi-container .today-evt-count strong{
        /*width: calc(52 / var(--width) * 100vw);*/
    }
	.kimchi-cards li{
    	height: calc(385 / var(--width) * 100vw);
    }
  	.kimchi-cards li:first-child::before{
        bottom: calc(42 / var(--width) * 100vw);
        right: calc(20 / var(--width) * 100vw);
        width: calc(65 / var(--width) * 100vw);
        height: calc(65 / var(--width) * 100vw);
    }
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}

    .kimchi-container .kimchi-matching {
        row-gap: calc(48 / var(--width) * 100vw);
    }

	.kimchi-container .today-evt-count {
		width: calc(440 / var(--width) * 100vw);
		height: calc(70 / var(--width) * 100vw);
		border-width: calc(3 / var(--width) * 100vw);
		border-radius: calc(15 / var(--width) * 100vw);
	}
    .kimchi-container .today-evt-count p{
		margin-top: calc(4 / var(--width) * 100vw);
		font-size: calc(32 / var(--width) * 100vw);
	}
	.kimchi-container .today-evt-count strong {
        /*width: calc(72 / var(--width) * 100vw);*/
    }
    .kimchi-cards-cnt {
		width: calc(680 / var(--width) * 100%);
	}
  	.kimchi-cards {
      	grid-template-columns: repeat(3, minmax(calc((100% - 20px) / 3), auto));
		gap: 0 10px;
    }
  	.kimchi-cards li {
        height: calc(315 / var(--width) * 100vw);
    }
	.kimchi-cards li:first-child::before{
      	bottom: calc(20 / var(--width) * 100vw);
        right: calc(-20 / var(--width) * 100vw);
        width: calc(80 / var(--width) * 100vw);
        height: calc(80 / var(--width) * 100vw);
    }
	.kimchi-container .kimchi-matching .evt-btn-area {
		padding-top: calc(210 / var(--width) * 100%);
	}

	.kimchi-container .kimchi-matching .evt-btn-area a {
		width: calc(300 / var(--width) * 100%);
		height: calc(620 / var(--width) * 100%);
	}
	.kimchi-container .kimchi-matching .evt-btn-area a {
		width: calc(480 / var(--width) * 100vw);
		height: calc(98 / var(--width) * 100vw);
	}
  
  	.kimchi-container .evt-acco-head.evt-btn-area{
		padding-top: calc(60 / var(--width)* 100%);
	}
  
    #prdCheckPop{
		top: 50% !important;
		left: 50% !important;
		width: 80%;
		height: auto !important;
		transform: translate(-50%, -50%) !important;
	}
	#prdCheckPop.popup-wrap>.btn-close{
		top: calc(14 / var(--width) * 100vw);
        right: calc(16 / var(--width) * 100vw);
        width: calc(48 / var(--width) * 100vw);
        height: calc(48 / var(--width) * 100vw);
	}
}

@keyframes btnOpen {
    0% {
        -webkit-transform: scale(1);
        transform: scale(1);
    }

    100% {
        -webkit-transform: scale(1.12);
        transform: scale(1.12);
    }
}