/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-95972
* CODE : Dev - EV00020761 , Prod - EV00008422
* FILE : /kr/event/2025/07/01_kakao_friend_sns/eventMainKakaoFriendSns.jsp
* DESC : 하반기 카플친 이벤트 페이지 개선 요청
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/05/28				김기범				Created
************************************************************************************
**/

* {
	--width: 1380;
}
.evt-func {
	position: relative;
}

.event-header {
    width: 100%;
    height: 100%;
}
.evt-btn-area.kakao-friend{
    margin-top: calc(597 / var(--width)* 100%);
    padding-top: calc(75 / var(--width)* 100%);
    top: 0;
}
.evt-btn-area.kakao-friend a{
    width: calc(480 / var(--width) * 100%);
}

/* floating */
.float {
	position: fixed;
    right: 48px;
    bottom: 128px;
    width: 120px;
    height: 120px;
    background-image: url(/kr/event/2025/07/01_kakao_friend_sns/images/floating.gif);
    background-repeat: no-repeat;
    background-size: contain;
    background-color: rgba(255, 0, 0, 0.0);
    z-index: 97;
}
.float.scroll-move{
	bottom: 208px;
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
	[class*="focus-set"] {
    	bottom: calc(220 / var(--width)* 100%);
    }
    
	.evt-btn-area.evt-acco-head {
	    padding-top: calc(120 / var(--width)* 100%);
	}
    .evt-btn-area.kakao-friend{
        margin-top: calc(723 / var(--width)* 100%);
        padding-top: calc(100 / var(--width)* 100%);
    }
	.evt-btn-area.kakao-friend a{
        width: calc(480 / var(--width) * 100%);
    }
	.float {
		width: 80px;
		height: 80px;
		right: 14px;
		bottom: 145px;
	}
    .float.scroll-move {
		bottom: 195px;
	}
    .app .float {
		bottom: 85px;
	}
	.app .float.scroll-move {
		bottom: 130px;
	}
}