/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-94254
* CODE : Dev - EV00020721 , Prod - EV00008381 
* FILE : /kr/event/2025/05/26_dishwasher/css/event.css
* DESC : 식기세척기 디지털 캠페인 퀴즈 즉당 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/05/15				김기범				Created
************************************************************************************
**/
* {
    --width: 720;
}

.dish-container {
    max-width: 1380px;
    margin: 0 auto;
    background-color: #F9E9E9;
}

.evt-func,
.quiz-box {
    position: relative;
}

.quiz-item {
    position: absolute;
}

.quiz1,
.quiz2,
.quiz3 {
    width: calc(570 / 1380 * 100%);
    height: calc(125 / 1380 * 100%);
    left: calc(405 / 1380 * 100%);
}

.quiz1 {
    top: calc(290 / 1380 * 100%);
}

.quiz2 {
    top: calc(580 / 1380 * 100%);
}

.quiz3 {
    top: calc(870 / 1380 * 100%);
}

.quiz-selection {
    display: flex;
    justify-content: space-between;
    height: 100%;
}

.quiz-selection .rdo-wrap {
    width: calc(650 / 1380 * 100%);
    margin-left: 0;
}

.rdo-wrap input {
    z-index: 99;
    height: 24px;
}

/* 공통 css 제거 */
.rdo-wrap input:focus+label,
.chk-wrap input:focus+label {
    outline: none;
    outline-offset: 2px;
}

.quiz-item.on {
    border: 2px solid;
}

/* input 숨김 */
.rdo-wrap input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* OX 라벨 공통 */
.ox-label {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 0;
    padding-left: 0;
}

.quiz-item .rdo-wrap label.ox-label-o::after,
.quiz-item .rdo-wrap label.ox-label-x::after {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
}

/* ox 영역 */
.quiz-item .rdo-wrap input+label.ox-label-o::after {
    background-image: url('/kr/event/2025/05/26_dishwasher/images/btn_rd_Y_grey.png');
    border-radius: 20px;
}

.quiz-item .rdo-wrap input:checked+label.ox-label-o::after {
    background-image: url('/kr/event/2025/05/26_dishwasher/images/btn_rd_Y_blue.png');
    border-radius: 20px;
}

.quiz-item .rdo-wrap input+label.ox-label-x::after {
    background-image: url('/kr/event/2025/05/26_dishwasher/images/btn_rd_X_grey.png');
    border-radius: 20px;
}

.quiz-item .rdo-wrap input:checked+label.ox-label-x::after {
    background-image: url('/kr/event/2025/05/26_dishwasher/images/btn_rd_X_red.png');
    border-radius: 20px;
}

.quiz-box .layer-input {
    position: absolute;
    bottom: calc(287 / 1380 * 100%);
    height: calc(14 / 1380 * 100%);
    left: calc(220 / 1380 * 100%);
    width: calc(795 / 1380 * 100%);
}

.quiz-box .layer-input .chk-wrap {
    width: 100%;
    height: 100%;
}

.quiz-box .layer-input .chk-wrap input+label {
    width: 100%;
    height: 100%;
    padding-left: 50px;
}

.quiz-box .layer-input .chk-wrap input+label::after {
    background-image: url('/kr/event/2025/05/26_dishwasher/images/btn_checked_off.png');
    width: 20px;
    height: 20px
}

.quiz-box .layer-input .chk-wrap input:checked+label::after {
    background-image: url('/kr/event/2025/05/26_dishwasher/images/btn_checked_on.png');
}

.quiz-hint,
.quiz-chk-aws,
.quiz-confirm {
    position: absolute;
    width: calc(940 / 1380 * 100%);
    height: calc(46 / 1380 * 100%);
    left: calc(220 / 1380 * 100%);
}

.quiz-hint {
    bottom: calc(212 / 1380 * 100%);
}

.quiz-hint a {
    width: 100%;
    height: 100%;
    display: flex;
}

.quiz-chk-aws {
    bottom: calc(153 / 1380 * 100%);
}

.quiz-chk-aws button {
    width: 100%;
    height: 100%;
}

.quiz-confirm {
    bottom: calc(94 / 1380 * 100%);
}

.quiz-confirm .btn-wrap {
    width: 100%;
    height: 100%;
}

.quiz-confirm .btn-wrap button {
    width: 100%;
    height: 100%;
}

/* 팝업 영역 */
.gift-pop .pop-conts {
    padding: 0;
}

.gift-pop .gift-img,
.gift-pop .alert-img {
    position: relative;
}

.gift-pop>.btn-close {
    top: 55px;
    right: 57px;
    width: 34px;
    height: 34px;
}

.gift-pop>.btn-close::before {
    z-index: -1;
}

.gift-pop .btn-ok-close.alertBtn-close {
    position: absolute;
    width: 84%;
    height: calc(153 / var(--width) * 100%);
    bottom: calc(106 / var(--width) * 100%);
    left: calc(58 / var(--width) * 100%);
}

#prdAlertPop {
    max-width: 405px;
    min-height: fit-content !important;
}

#prdCheckPop {
    max-width: 375px;
    min-height: fit-content !important;
}

#prdCheckPop .pop-conts {
    max-height: fit-content;
}

#prdCheckPop .vaccum-area {
    position: relative;
}

#prdCheckPop .response-btn-wrap {
    position: relative;
}

#prdCheckPop .btn-ok-close {
    position: absolute;
    top: 0;
    left: calc(58 / var(--width) * 100%);
    width: 84%;
    height: calc(273 / var(--width) * 100%);
}

#prdCheckPop .btn-close {
    position: absolute;
    /* bottom: -22px; */
    right: calc(64 / var(--width) * 100%);
    width: calc(45 / var(--width) * 100%);
    height: 24px;
    max-width: 40px;
    max-height: 38px;
    z-index: 99;
}

#tab01:target::before {
    content: "";
    display: block;
    height: 100px; /* 고정 헤더 높이와 동일하게 설정 */
    margin-top: -100px; /* 헤더 높이만큼 위로 이동 */
    visibility: hidden;
}

@media screen and (max-width:430px) {
    #prdCheckPop .btn-close {
        height: calc(155 / var(--width) * 100%);
    }
}

@media screen and (max-width: 767px) {
    .dish-container .card-coupon-list {
        position: absolute;
        top: calc(105 / 720 * 100%);
        margin: 0 calc(50 / 720 * 100%);
    }

    .dish-container .card-coupon-list .swiper-slide {
        width: calc(480 / 720 * 100%);
    }

    .quiz1 {
        top: calc(170 / 720 * 100%);
        left: calc(105 / 720 * 100%);
        width: calc(500 / 720 * 100%);
        height: calc(45 / 720 * 100%);
    }

    .quiz2 {
        top: calc(325 / 720 * 100%);
        left: calc(105 / 720 * 100%);
        width: calc(500 / 720 * 100%);
        height: calc(45 / 720 * 100%);
    }

    .quiz3 {
        top: calc(478 / 720 * 100%);
        left: calc(105 / 720 * 100%);
        width: calc(500 / 720 * 100%);
        height: calc(45 / 720 * 100%);
    }

    .quiz-item.on {
        border: 1px solid;
    }

    .quiz-selection .rdo-wrap {
        width: calc(330 / 720 * 100%);
    }

    .quiz-item .rdo-wrap input+label.ox-label:after {
        border-radius: 10px;
    }

    .quiz-item .rdo-wrap input:checked+label.ox-label:after {
        border-radius: 10px;
    }

    .quiz-box .layer-input {
        position: absolute;
        bottom: calc(127 / 720 * 100%);
        height: calc(33 / 720 * 100%);
        left: calc(100 / 720 * 100%);
        width: calc(515 / 720 * 100%);
    }

    .quiz-box .layer-input .chk-wrap {
        width: 100%;
        height: 100%;
    }

    .quiz-box .layer-input .chk-wrap input+label {
        width: 100%;
        height: 100%;
        padding-left: 30px;
    }

    .quiz-box .layer-input .chk-wrap input+label::after {
        background-image: url('/kr/event/2025/05/26_dishwasher/images/btn_checked_off.png');
        top: 3px;
        width: calc(50 / 720 * 100%);
        height: calc(270 / 720 * 100%);
    }

    .quiz-box .layer-input .chk-wrap input:checked+label::after {
        background-image: url('/kr/event/2025/05/26_dishwasher/images/btn_checked_on.png');
    }

    .quiz-hint,
    .quiz-chk-aws,
    .quiz-confirm {
        position: absolute;
        width: calc(520 / 720 * 100%);
        height: calc(21 / 720 * 100%);
        left: calc(100 / 720 * 100%);
    }

    .quiz-hint {
        bottom: calc(95 / 720 * 100%);
    }

    .quiz-chk-aws {
        bottom: calc(68 / 720 * 100%);
    }

    .quiz-chk-aws button {
        width: 100%;
        height: 100%;
    }

    .quiz-confirm {
        bottom: calc(40 / 720 * 100%);
    }

    .quiz-confirm .btn-wrap {
        width: 100%;
        height: 100%;
    }

    .quiz-confirm .btn-wrap button {
        width: 100%;
        height: 100%;
    }

    .gift-pop .btn-ok-close.alertBtn-close {
        bottom: calc(106 / 720 * 100%);
    }

    #prdAlertPop,
    #prdCheckPop {
        transform: translateX(-50%) translateY(-50%) !important;
        left: 50% !important;
        top: calc(350 / 720 * 100%) !important;
        width: 80%;
        height: auto;
        border-radius: 10px;
    }

    #prdCheckPop .response-top-area {
        position: absolute;
        width: 100%;
        height: calc(537 / 720 * 100%);
    }

    #prdCheckPop .response-btn-wrap {
        height: calc(123 / 720 * 100%);
    }

    #prdCheckPop .btn-close {
        height: calc(550 / 720 * 100%);
    }
}