/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-71101
* CODE : Dev - EV00019661 , Prod - EV00007521
* FILE : /kr/event/2024/07/23_summer_coupon/eventMainSummerCoupon.jsp
* DESC : 여름맞이 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/07/12				신우용				Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
	--width: 1380;
}
.evt-func {
	position: relative;
}
.evt-btn-area{
    bottom: 0;
}
.evt-btn-area.coupon-type{
    margin-bottom: calc(132 / var(--width)* 100%);
    padding-bottom: calc(144 / var(--width)* 100%);
}
.evt-btn-area.coupon-type a{
    width: calc(250 / var(--width)* 100%);
}

.evt-btn-area.join-type{
    margin-bottom: calc(80 / var(--width)* 100%);
    padding-bottom: calc(58 / var(--width)* 100%);
}
.evt-btn-area.join-type a{
    width: calc(176 / var(--width)* 100%);
}

.air-list-group{
    display: flex;
    position: absolute;
    top: calc(176 / var(--width)* 100%);
    left: 50%;
    width: calc(1010 / var(--width)* 100%);
    height: calc(1120 / var(--width)* 100%);
    transform: translateX(-50%);
    flex-wrap: wrap;
}
.air-list-group li{
    position: relative;
    width: calc(315 / var(--width)* 100%);
    margin: 0 calc(15 / var(--width)* 100%);
}
.air-list-group li:nth-child(n+5){
    margin-top: calc(50 / var(--width)* 100%);
}
.air-list-group li a{
    display: block;
    position: absolute;
    bottom: calc(45 / var(--width)* 100%);
    left: 0;
    width:100%;
    height: calc(155 / var(--width)* 100%);
}
@media screen and (max-width: 767px){
    * {
		--width: 720;
	}

    .evt-btn-area.coupon-type{
        margin-bottom: calc(272 / var(--width)* 100%);
        padding-bottom: calc(190 / var(--width)* 100%);
    }
    .evt-btn-area.coupon-type a{
        width: calc(300 / var(--width)* 100%);
    }
    
    .evt-btn-area.join-type{
        margin-bottom: calc(100 / var(--width)* 100%);
        padding-bottom: calc(112 / var(--width)* 100%);
    }
    .evt-btn-area.join-type a{
        width: calc(620 / var(--width)* 100%);
    }

    .air-list-group{
        top: calc(32 / var(--width)* 100%);
        width: calc(620 / var(--width)* 100%);
        height: calc(680 / var(--width)* 100%);
        flex-wrap: wrap;
    }
    .air-list-group li{
        width: 100%;
        margin: calc(30 / var(--width)* 100%) 0 0;
    }
    .air-list-group li:first-child{
        margin-top:0;
    }
    .air-list-group li:nth-child(n+5){
        margin-top: calc(30 / var(--width)* 100%);
    }
    .air-list-group li a{
        bottom: calc(45 / var(--width)* 100%);
        height: calc(130 / var(--width)* 100%);
    }
}