/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-63399
* CODE : Dev - EV00019441 , Prod - EV00007301
* FILE : /kr/event/2024/05/01_lg_present/eventMainLgPresent.jsp
* DESC : [5월 통합프로모션]선물 가전 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/04/15				신우용				Created
************************************************************************************
**/

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

.present-container .tab_wrap {
    position: relative;
    overflow: hidden;
}
.present-container .tab_wrap .tab_inner ul {
    width: 100%;
    display: flex;
    height: 80px;
}
.present-container .tab_wrap .tab_inner li {
    flex: 1;
    background-color: #FDF8F9;
    border-right: solid 1px #eee;
    border-bottom: solid 1px #eee;
}
.present-container .tab_wrap .tab_inner li:first-child {
    border-left: solid 1px #eee;
}
.present-container .tab_wrap .tab_inner li.active {
    background-color: #F15755;
    border-color: #F15755 !important;
}

.present-container .tab_wrap .tab_inner li span {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 22px;
    font-weight: 500;
    color: rgba(0, 0, 0, 0.7);
    line-height: 1.4em;
    letter-spacing: -0.02em;
}

.present-container .tab_wrap .tab_inner li.active span {
    color: #fff;
}


.present-container .btn-pop-open {
    text-decoration: underline;
    display: inline;
}
.present-container .btn-pop-open:hover {
    text-decoration-line: underline;
}
#presentCntPop{
	max-width: 495px;
	border-radius: 8px;
}
#presentCntPop .pop-conts.academy-pop{
	padding: 0;
}
#presentCntPop .prd-list{
	display: none;
	position: relative;
}

#presentCntPop.home .prd-list.prd-home, #presentCntPop.away .prd-list.prd-away{
	display: block;
}
#presentCntPop .prd-list .eachLink{
	display: flex;
	position: absolute;
	bottom: 55px;
	left: 0;
	width: 100%;
	height: 200px;
	z-index: 1;
}
#presentCntPop .prd-list .eachLink a{
	flex: 1;
}
#presentCntPop.popup-wrap>.btn-close{
	top: 20px;
	right: 20px;
	width: 35px;
	height: 35px;
}
#presentCntPop.popup-wrap>.btn-close:before{
	display: none;
}

.present-container .present-prd-chk{
    position: absolute;
    bottom: 0;
    left: 50%;
    width: calc(600 / var(--width) * 100%);
    height: calc(86 / var(--width)* 100%);
    text-align: center;
    transform: translateX(-50%);
    z-index: 1;
}
.present-container .present-prd-chk > div{
    display:flex;
    height: 100%;
}
.present-container .present-prd-chk .chk-wrap{
    width: 50%;
}
.present-container .present-prd-chk .chk-wrap input{
    top: 0;
    left: 0;
}
.present-container .present-prd-chk .chk-wrap label{
    width: calc(120 / 600 * 100%);
    height: 100%;
    padding: 0;
}
.present-container .present-prd-chk .chk-wrap input+label::after{
    top: 0;
    width: 100%;
    height: 100%;
    background-image:url(/kr/event/2024/05/01_lg_present/images/btn_chk.jpg);
}
.present-container .present-prd-chk .chk-wrap input:checked+label::after{
    background-image:url(/kr/event/2024/05/01_lg_present/images/btn_chk_on.jpg);
}

.present-container .layer-input{
    position:absolute;
    bottom: calc(470 / var(--width) * 100%);
    left: 50%;
    width: calc(600 / var(--width)* 100%);
    z-index: 1;
    transform: translateX(-50%);
}

.present-container .layer-input .chk-wrap input+label{
    padding-left: calc(100 / var(--width) * 100%);
    font-size: 18px;
    text-align: left;
    line-height: 1.6;
}
.present-container .layer-input input+label::after{
    background-image:url(/kr/event/2024/05/01_lg_present/images/btn_layer_chk.jpg);
    width: calc(66 / var(--width) * 100%);
    height: calc(690 / var(--width) * 100%);
}
.present-container .layer-input input:checked+label::after{
    background-image:url(/kr/event/2024/05/01_lg_present/images/btn_layer_chk_on.jpg);
}
.present-container .joinChkBtn{
    position: absolute;
    bottom: calc(245 / var(--width) * 100%);
    width: calc(600 / var(--width) * 100%);
    height: calc(135 / var(--width) * 100%);
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.present-container .evt-btn-area.evt-acco-head {
    bottom: auto;
    top: 0;
    padding-top: calc(110 / var(--width)* 100%);
}
.present-container .evt-btn-area.evt-acco-head button {
    width: 100%;
}


@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
    
    .present-container .tab_wrap .tab_inner ul {
        height: 13.05vw;
    }
  
  	.present-container .tab_wrap .tab_inner li span {
        font-size: 3.05vw;
        letter-spacing: -0.03em;
        font-weight: 500;
    }
    
	#presentCntPop{
		max-width: 90%;
		height: auto;
		left: 50% !important;
		top: 50% !important;
		transform: translate(-50%,-50%) !important;
	}
	#presentCntPop .pop-conts.academy-pop{
		padding: 0;
	}
	#presentCntPop .prd-list .eachLink{
		bottom: 10vw;
		height: 35.9vw;
	}
	#presentCntPop.popup-wrap>.btn-close{
		top: 3.3vw;
		right: 3.3vw;
		width: 6.6vw;
		height: 6.6vw;
	}

    .present-container .present-prd-chk{
    	height: auto;
    }
	.present-container .present-prd-chk .chk-wrap label{
		width: 8vw;
		height: 8vw;
	}

	.present-container .layer-input{
		bottom: 44vw;
		left: 50%;
	}

	.present-container .layer-input .chk-wrap input+label{
		padding-left: 6.2vw;
		font-size: 3.2vw;
	}
	.present-container .layer-input input+label::after{
		width: 4vw;
		height: 4vw;
		top: 0.5vw;
	}
	.present-container .joinChkBtn{
		bottom: 24.8vw;
		width: 80vw;
		height: 13.8vw;
	}
}