/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-49329
* CODE : Dev - EV00018741 , Prod - EV00006617
* FILE : /kr/event/2023/11/12_twins_festival/eventMainTwinsFestival.jsp
* DESC : LG트윈스 우승 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/10/31				정규진			    Created
* 2023/11/15				정규진			    바닥페이지
************************************************************************************
**/

/* 이벤트 기본 설정 */
.mdevice {
    --width: 720;
    }
.evt-func {
    position: relative;
}
/* 참여팝업 */
#agreeShare1_f table tbody tr td {
    font-weight: bold;
}
#agreeShare1_f table tbody tr td:last-child {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
/* 바닥페이지 */
.twinsFestivalShare-container .evt-down-area {
    width: 100%;
    margin-bottom: calc(69 / 1380 * 100%);
    position: absolute;
    bottom: 0;
}
.twinsFestivalShare-container .evt-down-area a {
	width: calc(505 / 1380 * 100%);
	padding-top: calc(100 / 1380 * 100%);
	margin: 0 auto;
	display: block;
}
.twinsFestivalShare-container .evt-hash-area {
	width: 100%;
    padding-top: calc(266 / 1380 * 100%);
    margin-bottom: calc(278 / 1380 * 100%);
    position: absolute;
    bottom: 0;
}
.twinsFestivalShare-container .evt-hash-area button {
	width: calc(649 / 1380 *100%);
    height: 100%;
}
.twinsFestivalShare-container .evt-sns-area {
    width: 100%;
    margin-bottom: calc(138 / 1380 * 100%);
    position: absolute;
    bottom: 0;
}
.twinsFestivalShare-container .evt-sns-area > div {
	width: calc(230 / 1380 *100%);
    margin: 0 auto;
    justify-content: space-between;
    position: static;
}
.twinsFestivalShare-container .evt-sns-area > div a {
    width: calc(56 / 130 * 100%);
    padding-top: calc(56 / 130 * 100%);
}
.twinsFestivalShare-container .evt-join-group {
    width: 100%;
    margin-bottom: calc(292 / 1380 * 100%);
    position: absolute;
    bottom: 0;
}
.twinsFestivalShare-container .evt-join-group a {
	width: calc(490 / 1380 * 100%);
	padding-top: calc(100 / 1380 * 100%);
	margin: 0 auto;
	display: block;
}

/* 모바일 */
/* 바닥페이지 */
.mdevice .twinsFestivalShare-container .evt-down-area {
    margin-bottom: calc(69 / var(--width) * 100%);
}
.mdevice .twinsFestivalShare-container .evt-down-area a {
	width: calc(505 / var(--width) * 100%);
	padding-top: calc(100 / var(--width) * 100%);
}
.mdevice .twinsFestivalShare-container .evt-hash-area {
    padding-top: calc(309 / var(--width) * 100%);
    margin-bottom: calc(266 / var(--width) * 100%);
}
.mdevice .twinsFestivalShare-container .evt-hash-area button {
	width: calc(510 / var(--width) *100%);
}
.mdevice .twinsFestivalShare-container .evt-sns-area {
    margin-bottom: calc(130 / var(--width) * 100%);
}
.mdevice .twinsFestivalShare-container .evt-sns-area > div {
	width: calc(230 / var(--width) *100%);
}
.mdevice .twinsFestivalShare-container .evt-sns-area > div a {
    width: calc(56 / 130 * 100%);
    padding-top: calc(56 / 130 * 100%);
}
.mdevice .twinsFestivalShare-container .evt-join-group {
    margin-bottom: calc(230 / var(--width) * 100%);
    padding-top: calc(104 / var(--width) * 100%);
}
.mdevice .twinsFestivalShare-container .evt-join-group a {
	width: calc(490 / var(--width) * 100%);
	height: 100%;
}

/* mdevice 외에 반응형 레이아웃 */
@media screen and (max-width: 767px){
    .twinsFestivalShare-container .evt-down-area {
        margin-bottom: calc(69 / 720 * 100%);
    }
    .twinsFestivalShare-container .evt-down-area a {
        width: calc(505 / 720 * 100%);
        padding-top: calc(100 / 720 * 100%);
    }
    .twinsFestivalShare-container .evt-hash-area {
        padding-top: calc(309 / 720 * 100%);
        margin-bottom: calc(266 / 720 * 100%);
    }
    .twinsFestivalShare-container .evt-hash-area button {
        width: calc(510 / 720 *100%);
    }
    .twinsFestivalShare-container .evt-sns-area {
        margin-bottom: calc(130 / 720 * 100%);
    }
    .twinsFestivalShare-container .evt-sns-area > div {
        width: calc(230 / 720 *100%);
    }
    .twinsFestivalShare-container .evt-sns-area > div a {
        width: calc(56 / 130 * 100%);
        padding-top: calc(56 / 130 * 100%);
    }
    .twinsFestivalShare-container .evt-join-group {
        margin-bottom: calc(230 / 720 * 100%);
        padding-top: calc(104 / 720 * 100%);
    }
    .twinsFestivalShare-container .evt-join-group a {
        width: calc(490 / 720 * 100%);
        height: 100%;
    }
}