/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-33618
* CODE : Dev - EV00018191 , Prod - EV00005511
* FILE : /kr/event/2023/05/01_puri_sns/eventMainPuriSns.jsp
* DESC : LG 퓨리케어 오브제컬렉션 정수기 신제품 사용후기 이벤트 
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/03/27				신우용				Created
* 2023/10/18				정규진				참여 내역 수정하기
* 2023/10/30				신우용				바닥페이지 작성
************************************************************************************
**/

/* 이벤트 기본 설정 */
.mdevice {
	--width: 720;
}
.evt-func {
	position: relative;
}
/* 참여 내역 수정하기 */
.pop-conts .btn-group {
    padding-top: 48px;
    text-align: center;
}
.layer-confirmModify-pop {
    padding-bottom: 48px;
}

/* 플라스틱 설문 레이어팝업 */
.plastic-sign {
    left: 50% !important;
    top: 50% !important;
    max-width: 540px;
    height: 540px;
    min-height: auto !important;
    transform: translate(-50%, -50%) !important;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% auto;
    background-image: url(/kr/event/2023/06/01_puri_swell/images/popup_sign_2.jpg);
}
.plastic-sign .pop-conts {
    position: relative;
    overflow: hidden;
    max-height: auto;
    height: 100%;
    padding: 0;
}
.plastic-sign.popup-wrap .pop-conts.no-footer:after{
    display: none;
}
.plastic-sign .chk-input{
    position: absolute;
    top: 158px;
    left: 75px;
    margin-top: 0;
    width: 390px;
}
.plastic-sign .chk-input .chk-wrap{
    display: block;
}
.plastic-sign .chk-input .chk-wrap + .chk-wrap{
	margin-top: 22px;
}
.plastic-sign .chk-input .chk-wrap input+label{
    display: block;
    height: 22px;
    padding-left: 0;
    line-height: 22px;
}
.plastic-sign .chk-input .chk-wrap input+label:after {
    width: 23px;
    height: 22px;
    background-size: auto 100%;
    background-image: url(/kr/event/2023/06/01_puri_swell/images/btn_chk.png);
}

.plastic-sign .chk-input .chk-wrap input:checked+label:after {
    background-image: url(/kr/event/2023/06/01_puri_swell/images/btn_chk_on.png);
}

.plastic-sign .btn-wrap{
    position: absolute;
    bottom: 135px;
    left: 50%;
    transform:translateX(-50%);
}

.plastic-sign .btn-wrap .btn{
    width: 420px;
    height: 80px;
    background-repeat: no-repeat;
    background-position: center center;
    background-color: transparent;
    background-size: 100% auto;
    border: 0 !important;
    background-image: url(/kr/event/2023/06/01_puri_swell/images/btn_submit_on.png);
    transition: all .3s ease-in-out;
}

.plastic-sign .btn-wrap .btn:disabled{
    background-image: url(/kr/event/2023/06/01_puri_swell/images/btn_submit.png);
    transition: all .3s ease-in-out;
}

.plastic-sign.popup-wrap>.btn-close{
    top: 25px;
    right: 25px;
    width: 38px;
    height: 38px;
}
.plastic-sign.popup-wrap>.btn-close:before{
    display: none;
}
@media screen and (max-width: 767px){
	.layer-confirmModify-pop {
        padding-bottom: 0;
    }
    .layer-confirmModify-pop .pop-footer.center {
      	position: fixed;
        width: 100%;
        bottom: 0;
        left: 0;
        z-index: 200;
        -webkit-transform: translateZ(0);
        background: #ea1917;
        padding-top: 0;
    }
    .btn-group.pop-footer.center .btn{
        border-radius: 0;
        background: #ea1917!important;
    }

    .plastic-sign {
        max-width: 88.89vw;
        height: 88.89vw;
        background-image: url(/kr/event/2023/06/01_puri_swell/images/m_popup_sign_2.jpg);
    }
    .plastic-sign.popup-wrap .pop-conts.no-footer {
        height: 100%;
        max-height: 100%;
    }
    .plastic-sign .chk-input {
        top: 29vw;
        left: 12.5vw;
        width: 66vw;
    }
    .plastic-sign .chk-input .chk-wrap + .chk-wrap {
        margin-top: 2vw;
    }
    .plastic-sign .chk-input .chk-wrap input+label {
        display: block;
        height: 5vw;
        padding-left: 0;
        line-height: 5vw;
    }
    .plastic-sign .chk-input .chk-wrap input+label:after {
        width: 3.9vw;
        height: 3.6vw;
        background-image: url(/kr/event/2023/06/01_puri_swell/images/m_btn_chk.png);
        top: 0.7vw;
    }
    .plastic-sign .chk-input .chk-wrap input:checked+label:after {
        background-image: url(/kr/event/2023/06/01_puri_swell/images/m_btn_chk_on.png);
    }
    .plastic-sign .btn-wrap {
        bottom: 21.5vw;
    }
    .plastic-sign .btn-wrap .btn {
        width: 69.4vw;
        height: 13.3vw;
        padding: 0;
        background-image: url(/kr/event/2023/06/01_puri_swell/images/m_btn_submit_on.png);
    }
    .plastic-sign .btn-wrap .btn:disabled {
        background-image: url(/kr/event/2023/06/01_puri_swell/images/m_btn_submit.png);
    }
    .plastic-sign.popup-wrap>.btn-close {
        top: 2.7vw;
        right: 2.7vw;
        width: 7.2vw;
        height: 7.2vw;
    }
}

/* 바닥페이지 */
.evt-btn-area{
    bottom: 0;
}

.sign-form{
	margin-bottom: calc(247 / 1380 * 100%);
    padding-bottom: calc(80 / 1380 * 100%);
}
.sign-form a{
	width: calc(400 / 1380 * 100%);
}

.join-form{
	margin-bottom: calc(80 / 1380 * 100%);
    padding-bottom: calc(70 / 1380 * 100%);
}
.join-form a{
	width: calc(230 / 1380 * 100%);
}

.card-form{
	margin-bottom: calc(100 / 1380 * 100%);
    padding-bottom: calc(80 / 1380 * 100%);
}
.card-form a{
	width: calc(400 / 1380 * 100%);
    margin: 0 calc(15 / 1380 * 100%);
}

.mdevice .sign-form{
	margin-bottom: calc(300 / var(--width) * 100%);
    padding-bottom: calc(95 / var(--width) * 100%);
}
.mdevice .sign-form a{
	width: calc(560 / var(--width) * 100%);
}

.mdevice .join-form{
	margin-bottom: calc(80 / var(--width) * 100%);
    padding-bottom: calc(70 / var(--width) * 100%);
}
.mdevice .join-form a{
	width: calc(270 / var(--width) * 100%);
}

.mdevice .card-form{
	margin-bottom: calc(80 / var(--width) * 100%);
    padding-bottom: calc(260 / var(--width) * 100%);
}
.mdevice .card-form > div{
    flex-direction: column;
}
.mdevice .card-form a{
	width: calc(560 / var(--width) * 100%);
    margin: calc(15 / var(--width) * 100%) 0;
}