/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-17893
* CODE : Dev - EV00018101, Prod - EV00005381  
* FILE : /kr/event/2023/04/03_puri_panel/eventMainPuriPanel.jsp
* DESC : 정수기 프론트패널 교체 이벤트-1차
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR					DESCRIPTION
************************************************************************************
* 2023/02/27				김기범					Created
* 2023/05/03				신우용					Modify	
************************************************************************************
**/

/* 이벤트 기본 설정 */
.mdevice {
	--width: 720;
}
.evt-func {
	position: relative;
}
.popup-wrap .input-info {
    -webkit-transform: none;
}

/* 정수기 선택 */
.evt-select-area {
	position: absolute;
    bottom: calc(200 / 1380 * 100%);
    left: 0;
    width: 100%;
    height: calc(623 / 1380 * 100%);
}
.evt-card-list {
	position: absolute;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    top: calc(210 / 1380 * 100%);
    right: calc(127 / 1380 * 100%);
    width: calc(641 / 1380 * 100%);
    height: calc(365 / 1380 * 100%);
    padding: 0 calc(45 / 1380 * 100%) 0 calc(50 / 1380 * 100%);
	justify-content: flex-start
}
.evt-card-list.panel {
	top: auto;
	bottom: calc(188 / 1380 * 100%);
}
.evt-card-list li {
	position: relative;
	display: block;
	width: 20%;
	margin: 0;
}
.evt-card-list li input {
	visibility: hidden;
	position: absolute;
	left: 0;
	top: 0;
}
.evt-card-list label {
	position: absolute;
	left: 0;
	top: 0;
	display: block;
	width: 100%;
	height: 100%;
	cursor: pointer;
}
.evt-card-list label:before {
	content: '';
    position: absolute;
    left: 50.2%;
    top: 0;
    width: 52%;
    height: 48%;
    z-index: 1;
    border-radius: 42%;
    transform: translateX(-50%);
}
.evt-card-list input:checked + label:before {
    border: 1px solid #000;
}
.evt-select-area .evt-select-img {
	position: absolute;
    bottom: calc(-12 / 1380 * 100%);
    left: calc(189 / 1380 * 100%);
    width: calc(272 / 1380 * 100%);
}
.mdevice .evt-select-area {
	bottom: calc(67 / var(--width) * 100%);
    height: calc(480 / var(--width) * 100%);
}
.mdevice .evt-card-list {
	top: calc(390 / var(--width) * 100%);
	right: calc(40 / var(--width) * 100%);
	width: calc(640 / var(--width) * 100%);
	height: calc(100 / var(--width) * 100%);
	padding: 0 calc(42 / var(--width) * 100%) 0 calc(49 / var(--width) * 100%);
}
.mdevice .evt-card-list.panel {
	top: auto;
    bottom: calc(68 / var(--width) * 100%);
}
.mdevice .evt-select-area .evt-select-img {
	top: calc(-10 / var(--width) * 100%);
	bottom: auto;
	left: calc(219 / var(--width) * 100%);
	width: calc(279 / var(--width) * 100%);
}
.mdevice .evt-select-img img{
	width: calc(720 / var(--width) * 100%);
}
.mdevice .evt-card-list label:before {
    top: 1px;
    left: 49.5%;
	width: calc(465 / var(--width) * 100%);
    height: calc(350 / var(--width) * 100%);
}

/* 버튼 영역 */
.each-btn-group{
	top: 0;
    padding-top: calc(100 / 1380 * 100%);
}
.each-btn-group a{
    width: calc(380 / 1380 * 100%);
    margin: 0 calc(10 / 1380 * 100%);
}

.mdevice .each-btn-group{
	top: calc(-20 / var(--width) * 100%);
	padding-top: calc(360 / var(--width) * 100%);
}
.mdevice .each-btn-group > div{
	flex-direction: column;
}
.mdevice .each-btn-group a {
    width: calc(640 / var(--width) * 100%);
    margin: calc(10 / var(--width) * 100%) 0;
}

@media screen and (max-width: 767px){
	.layer-join-pop .pop-footer{
		position: fixed;
		bottom: 0;
		width: 100%;
		z-index:100;
	}
  
	.win-popup-wrap .pop-footer {
    	left:0;
    }
}