/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-47073
* CODE : Dev - EV00018991 , Prod - EV00006851
* FILE : /kr/event/2023/10/04_lg_daily/css/event.css
* DESC : 출석체크 이벤트 10월
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/09/13				정규진			    Created
* 2023/12/28				정규진			    바닥페이지
************************************************************************************
**/

/* 이벤트 기본 설정 */
.evt-func {
    position: relative;
}
/* 참여팝업 */
.daily-event-join-popup #dailyAgree1_f table tbody tr td {
    font-weight: bold;
}
.daily-event-join-popup #dailyAgree1_f table tbody tr td:last-child {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
.daily-event-join-popup #dailyAgree1_f table tbody tr td:last-child {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
.daily-event-join-popup .pop-conts.academy-pop.no-footer {
    padding: 0;
}

/* 임시 테스트용 css */
.daily-event-container .daily-calendar-area.test-area {
    position: static;
    margin: 50px auto 20px;
    transform: translateX(0);
}
/* 출석 체크 달력 */
.daily-event-container .daily-calendar-area .calendar th, .daily-event-container .daily-calendar-area .calendar td {
    padding: 18px;
}
.daily-event-container .daily-calendar-area .calendar td {
    position: relative;
}
.daily-event-container .daily-calendar-area .calendar td.checked::after {
    content: '';
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    background: url(/kr/event/2023/10/04_lg_daily/images/checked.png) no-repeat 50% 50%;
    background-size: 85%;
}
/* 캘린더 */
.daily-event-container .daily-calendar-area {
    width: calc(640 / 1380 * 100%);
    margin-bottom: calc(600 / 1380 * 100%);
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.daily-event-container .daily-calendar-area .calendar table{
    width: 100%;
    color: #464444;
    border-collapse: collapse;
}
.daily-event-container .daily-calendar-area .calendar thead {
    font-size: 18px;
    border-bottom: 1px solid #464444;
}
.daily-event-container .daily-calendar-area .calendar tbody {
    font-size: 35px;
}
.daily-event-container .daily-calendar-area .calendar th, 
.daily-event-container .daily-calendar-area .calendar td {
    padding: calc(25 / 640 * 100%);
}
.daily-event-container .daily-calendar-area .calendar td {
    line-height: 40px;
}
/* 행운권 및 출석체크 카운트 */
.daily-event-container p {
    background: transparent!important;
}
.daily-event-container .available-lucky-card {
    width: calc(90 / 1380 * 100%);
    margin-bottom: calc(466 / 1380 * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(157%);
    bottom: 0;
    color: #fff;
    font-size: 45px;
    text-align: right;
}
.daily-event-container .attendance-count {
    width: calc(90 / 1380 * 100%);
    margin-bottom: calc(374 / 1380 * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-131%);
    bottom: 0;
    font-size: 45px;
    text-align: center;
}
.daily-event-container .used-lucky-card {
    width: calc(90 / 1380 * 100%);
    margin-bottom: calc(374 / 1380 * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(228%);
    bottom: 0;
    font-size: 45px;
    text-align: center;
}
/* 레이어팝업 input */
.daily-event-container .layer-input5 {
    width: calc(620 / 1380 * 100%);
    margin-bottom: calc(237 / 1380 * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    text-align: left;
}
/* 체크 박스 */
.daily-event-container .chk-wrap input+label {
    font-size: 18px;
    line-height: 29px;
}
/* 체크박스 포커스 */
.daily-event-container #layerchk5-1:focus+label::after {
    outline: 1px auto #000;
    outline-offset: 1px;
}
.daily-event-container .layer-agree5 {
    font-weight: 700;
    text-decoration-line: underline;
    text-underline-position: under;
    display: inline;
}
.daily-event-container .layer-agree5:hover {
	text-decoration-line: underline;
}
/* 출석체크하기 버튼 */
.daily-event-container .joinChkBtn5 {
    width: calc(595 / 1380 * 100%);
    padding-top: calc(105 / 1380 * 100%);
    margin-bottom: calc(87 / 1380 * 100%);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
}

/* 출석 체크 카운트*/
/* 경품 응모하기 */
.daily-event-container .application-status-area {
    display: none;
    width: calc(725 / 1380 * 100%);
    padding-top: calc(269 / 1380 * 100%);
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    font-size: 35px;
    color: #fff;
}
.daily-event-container .application-status-area ul.application-status {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
.daily-event-container .application-status-area ul.application-status li {
    width: calc(230 / 725 * 100%);
}
/* 응모하기 버튼 */
.daily-event-container .application-btn-area {
    width: calc(725 / 1380 * 100%);
    height: auto;
    margin-bottom: calc(630 / 1380 * 100%);
    display: flex;
    justify-content: space-around;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}
.daily-event-container .application-btn-area a {
    width: calc(167 / 725 * 100%);
    padding-top: calc(62 / 725 * 100%);
}
.daily-event-container .application-btn-area a:nth-of-type(2) {
    margin: 0 calc(16 / 725 * 100%);
}

@media screen and (max-width: 1460px){
    .daily-event-container .daily-calendar-area .calendar thead {
        font-size: 1.3vw;
    }
    .daily-event-container .daily-calendar-area .calendar tbody {
        font-size: 2.5vw;
    }
    .daily-event-container .daily-calendar-area .calendar td {
        line-height: 3vw;
    }
    /* 행운권 및 출석체크 카운트 */
    .daily-event-container .available-lucky-card {
        font-size: 3.5vw;
    }
    .daily-event-container .attendance-count {
        font-size: 3.5vw;
    }
    .daily-event-container .used-lucky-card {
        font-size: 3.5vw;
    }
    /* 체크 박스 */
    .daily-event-container .chk-wrap input+label {
        font-size: 1.5vw;
        line-height: 2vw;
    }
    /* 경품 응모하기 */
    .daily-event-container .application-status-area {
        font-size: 2.3vw;
    }
}

/* 모바일 */
@media screen and (max-width: 767px){
    /* 캘린더 */
    .daily-event-container .daily-calendar-area {
        width: calc(640 / 720 * 100%);
        margin-bottom: calc(551 / 720 * 100%);
    }
    .daily-event-container .daily-calendar-area .calendar thead {
        font-size: 2vw;
    }
    .daily-event-container .daily-calendar-area .calendar tbody {
        font-size: 6vw;
    }
    .daily-event-container .daily-calendar-area .calendar th, 
    .daily-event-container .daily-calendar-area .calendar td {
        padding: calc(25 / 640 * 100%) calc(15 / 640 * 100%);
    }
    .daily-event-container .daily-calendar-area .calendar td {
        line-height: 1.3;
    }
    /* 행운권 및 출석체크 카운트 */
    .daily-event-container .available-lucky-card {
        width: calc(85 / 720 * 100%);
        margin-bottom: calc(456 / 720 * 100%);
        transform: translateX(173%);
        font-size: 7vw;
    }
    .daily-event-container .attendance-count {
        width: calc(60 / 720 * 100%);
        margin-bottom: calc(365 / 720 * 100%);
        transform: translateX(-148%);
        font-size: 7vw;
    }
    .daily-event-container .used-lucky-card {
        width: calc(60 / 720 * 100%);
        margin-bottom: calc(365 / 720 * 100%);
        transform: translateX(365%);
        font-size: 7vw;
    }
    /* 레이어팝업 input */
    .daily-event-container .layer-input5 {
        width: calc(620 / 720 * 100%);
        margin-bottom: calc(228 / 720 * 100%);
    }
    .daily-event-container .layer-input5 .chk-wrap input+label {
        font-size: 3vw;
        line-height: 1.5;
        text-align: left;
    }
    /* 출석체크하기 버튼 */
    .daily-event-container .joinChkBtn5 {
        width: calc(595 / 720 * 100%);
        padding-top: calc(103 / 720 * 100%);
        margin-bottom: calc(79 / 720 * 100%);
    }

    /* 응모하기 현황 */
    .daily-event-container .application-status-area {
        width: calc(645 / 720 * 100%);
        padding-top: calc(330 / 720 * 100%);
        font-size: 5vw;
    }
    .daily-event-container .application-status-area ul.application-status li {
        width: calc(208 / 645 * 100%);
    }
    /* 응모하기 버튼 */
    .daily-event-container .application-btn-area {
        width: calc(645 / 720 * 100%);
        margin-bottom: calc(620 / 720 * 100%);
        display: flex;
        justify-content: space-around;
    }
    .daily-event-container .application-btn-area a {
        width: calc(167 / 645 * 100%);
        padding-top: calc(62 / 645 * 100%);
    }
}