/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-61668
* CODE : Dev-EV00019401 / Prod-EV00007251
* FILE : /kr/event/2024/05/01_LGXkakao_golf_SNS/css/event.css
* DESC : LG전자X카카오 골프 SNS 공유 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/04/24				정규진                 바닥페이지
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
    --width: 1380;
}
.evt-func {
    position: relative;
}
/* 이미지 다운로드 버튼 */
.evt-down-area {
	width: calc(262 / var(--width) * 100%);
	margin-bottom: calc(100 / var(--width) * 100%);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}
.evt-down-area a {
	display: block;
	width: 100%;
	padding-top: calc(52 / 262 * 100%);
}

/* 해시태그 */
.evt-hash-area{
    padding-bottom: calc(53 / var(--width) * 100%);
    margin-bottom: calc(236 / var(--width) * 100%);
    bottom: 0;
}
.evt-hash-area button{
	width: calc(262 / var(--width) * 100%);
}
/* sns 버튼 */
.evt-sns-area{
	margin-bottom: calc(138 / var(--width) * 100%);
	padding-top: calc(60 / var(--width) * 100%);
    bottom: 0;
}
.evt-sns-area a{
	width: calc(60 / var(--width) * 100%);
	margin: 0 calc(15 / var(--width) * 100%);
}
/* 참여버튼 */
.evt-btn-area.evt-join-btn {
	width: 100%;
	padding-top: calc(52 / var(--width) * 100%);
	margin-bottom: calc(161 / var(--width) * 100%);
	bottom: 0;
}
.evt-btn-area.evt-join-btn a {
	width: calc(262 / var(--width) * 100%);
	margin: 0 auto;
}
.evt-btn-area.btnlinkOut {
	width: 100%;
	padding-top: calc(52 / var(--width) * 100%);
	margin-bottom: calc(340 / var(--width) * 100%);
	bottom: 0;
}
.evt-btn-area.btnlinkOut a {
	width: calc(262 / var(--width) * 100%);
	margin: 0 auto;
}
.evt-acco-head.evt-btn-area {
    width: 100%;
    padding-top: calc(54 / var(--width) * 100%);
}
.evt-acco-head.evt-btn-area .evt-acco-btn {
    width: 100%;
    height: 100%;
}

/* 모바일 */
@media screen and (max-width: 767px){
    * {
        --width: 720;
    }
    .evt-down-area {
        width: calc(502 / var(--width) * 100%);
        margin-bottom: calc(80 / var(--width) * 100%);
    }
    .evt-down-area a {
        padding-top: calc(90 / 502 * 100%);
    }
    /* 해시태그 */
    .evt-hash-area{
        padding-bottom: calc(90 / var(--width) * 100%)!important;
        margin-bottom: calc(314 / var(--width) * 100%)!important;
    }
    .evt-hash-area button{
        width: calc(502 / var(--width) * 100%);
    }
    /* sns 버튼 */
    .evt-sns-area{
        margin-bottom: calc(138 / var(--width) * 100%)!important;
        padding-top: calc(98 / var(--width) * 100%)!important;
    }
    .evt-sns-area a{
        width: calc(98 / var(--width) * 100%);
        margin: 0 calc(19 / var(--width) * 100%)!important;
    }
    /* 참여버튼 */
    .evt-btn-area.evt-join-btn {
        padding-top: calc(90 / var(--width) * 100%)!important;
        margin-bottom: calc(137 / var(--width) * 100%)!important;
    }
    .evt-btn-area.evt-join-btn a {
        width: calc(502 / var(--width) * 100%);
    }
    .evt-btn-area.btnlinkOut {
        padding-top: calc(90 / var(--width) * 100%)!important;
        margin-bottom: calc(419 / var(--width) * 100%)!important;
    }
    .evt-btn-area.btnlinkOut a {
        width: calc(502 / var(--width) * 100%);
    }
    .evt-acco-head.evt-btn-area {
        width: 100%;
        padding-top: calc(98 / var(--width) * 100%);
    }
}