/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-60195
* CODE : Dev - EV00019411 , Prod - EV00007271
* FILE : /kr/event/2024/04/29_kakao_friend_sns/eventMainKakaoFriendSns.jsp
* DESC : LGE.COM X 카카오톡 친구 추가
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/04/03				신우용				Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.min.css");
* {
	--width: 1380;
}
.evt-func {
	position: relative;
}

.evt-btn-area{
    bottom: 0;
}

.event-header {
    width: 100%;
    height: 100%;
}   
.event-header video{
    width: 100%;
}

#prdCheckPop .share-limit .btn-pop-close{
    display: none;
}
#prdCheckPop .share-limit[data-count="3"] #reShowGift, #prdCheckPop .share-limit.share-out #reShowGift{
    display: none;
}
#prdCheckPop .share-limit[data-count="3"] .btn-pop-close, #prdCheckPop .share-limit.share-out .btn-pop-close{
    display: inline-block;
}

.scroll-tab{
    position: relative;
    top: -80px;
    background-image: url(/kr/event/2024/04/29_kakao_friend_sns/images/bg.jpg);
    background-repeat: no-repeat;
    background-size: 100% auto;
    background-position: center 75px;
    z-index: 5;
}
.tabs-wrap{
	position: absolute;
	top: -120px;
	left: 50%;
	width: 270px;
	padding: 10px;
	background: rgba(255, 255, 255, .6);
	z-index: 1;
	transform: translateX(-50%);
	border-radius: 25px;
	backdrop-filter: blur(12px);
	transition: all .5s ease-in-out;
}
.tabs-wrap.fixed{
    position:fixed;
    top: 24px;
}
.tabs-wrap .tabs {
    display: flex;
    margin: 0;
    padding: 0;
}
.tabs-wrap .tabs > li {
    flex: 1;
    width: 50%;
    margin: 0;
    padding: 0;
    border-radius: 25px;
}
.tabs-wrap .tabs > li.on{
	background-color:#000;
}
.tabs-wrap .tabs li a {
    overflow: hidden;
    display: block;
    color:#555555;
    font-size: 18px;
    padding: 8px 0;
    line-height: 1.2;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    font-family: "Pretendard Variable", Pretendard;
}
.tabs-wrap .tabs li.on a {
	color:#fff;
}
[id^=evtTab]{
	width: calc(720 / var(--width)* 100%);
	margin: 0 auto;
}

.evt-btn-area.evt-acco-head {
    bottom: auto;
    top: 0;
    padding-top: calc(160 / var(--width)* 100%);
}
.evt-btn-area.evt-acco-head button {
    width: 100%;
}
.evt-btn-area.kakao-friend{
    margin-bottom: 0;
    padding-bottom: calc(140 / var(--width) * 100%);
}
.evt-btn-area.kakao-friend a{
    width: 100%;
}
.evt-btn-area.join-group{
	margin-bottom: calc(180 / var(--width)* 100%);
    padding-bottom: calc(450 / var(--width)* 100%);
}
.evt-btn-area.join-group > div{
	flex-direction: column;
}
.evt-btn-area.join-group a{
	width: 100%;
	margin: calc(10 / var(--width) * 100%);
}

#prdCheckPop{
	max-width:380px;
	border-radius: 40px;
}
#prdCheckPop.popup-wrap .pop-conts{
	padding: 0;
}

#prdCheckPop.popup-wrap .pop-conts .btn-group{
	position: absolute;
	bottom: 40px;
	left:0;
	width:100%;
	text-align: center
}

#prdCheckPop.popup-wrap .pop-conts .btn-group button{
	width: 316px;
	height: 72px;
	padding: 8px 24px;
	border-radius: 40px;
	border: 2px solid #DDD;
	color: #333;
	font-family: Pretendard;
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.64px;
}

#prdCheckPop.popup-wrap>.btn-close{
	top: 24px;
	right: 24px;
	width: 40px;
	height: 40px;
}
#prdCheckPop.popup-wrap>.btn-close:before{
	display: none;
}
@media screen and (max-width: 1460px){
    .scroll-tab{
        top: -5.6vw;
        background-position: center 5vw;
    }
	.tabs-wrap{
		top: -8.6vw;
		width: 18.5vw;
		padding: .7vw;
	}
	.tabs-wrap.fixed{
	    position:fixed;
	    top: 2.1vw;
	}
	.tabs-wrap .tabs li a {
	    font-size: 1.1vw;
	    padding: .6vw 0;
	}
}
@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
	
    .scroll-tab{
        top: -1px;
        background-image: none;
      	background-color: #ffe353;
    }
    .tabs-wrap{
        position: absolute;
        top: -17.6vw;
        width: 72vw;
        padding: 3vw;
        backdrop-filter: blur(24px);
    }
    .tabs-wrap.fixed{
        top: 15vw;
    }
  	.header.helloBar~.mobile-nav-wrap ~ #content .event-container .tabs-wrap.fixed {
		top: 26.8vw;
	}
    .tabs-wrap .tabs li a {
        font-size: 4.2vw;
        padding: 2.4vw 0;
    }
	[id^=evtTab]{
        width: 100%;
    }
	.evt-btn-area.evt-acco-head {
	    padding-top: calc(120 / var(--width)* 100%);
	}
    .evt-btn-area.kakao-friend{
        margin-bottom: calc(56 / var(--width)* 100%);
        padding-bottom: calc(100 / var(--width)* 100%);
    }
    .evt-btn-area.join-group{
        margin-bottom: calc(115 / var(--width)* 100%);
        padding-bottom: calc(350 / var(--width)* 100%);
    }
    .evt-btn-area.join-group a{
        margin: calc(5 / var(--width) * 100%) 0;
    }

	#prdCheckPop{
		top: 50% !important;
		left: 50% !important;
		width: 75%;
		height: auto !important;
		transform: translate(-50%, -50%) !important;
	}

	#prdCheckPop.popup-wrap .pop-conts .btn-group{
		bottom: 5.8vw;
	}
	
	#prdCheckPop.popup-wrap .pop-conts .btn-group button{
		width: 63.8vw;
		height: 13.9vw;
		padding: 0;
		border-radius: 40px;
		font-size: 4.6vw;
	}
	
	#prdCheckPop.popup-wrap>.btn-close{
		top: 5vw;
		right: 4vw;
		width: 10vw;
		height: 8vw;
	}
}