/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-71543
* CODE : Dev - EV00019761 , Prod - EV00007621
* FILE : /kr/event/2024/08/12_lg_review/eventMainLgReview.jsp
* DESC : 8월 LG 가전 구독 서비스 리뷰 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/07/16				신우용				Created
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
    --width: 1380;
}
.evt-func {
    position: relative;
}

.tab-container {
}
.tabs-wrap {
    position: relative;
    width: 100%;
    z-index: 10;
}

.tabs-wrap .tabs {
    display: flex;
    position: absolute;
    top: 0;
    left: 50%;
    width: calc(680 / var(--width)* 100%);
    height: 100%;
    margin: 0;
    padding: 0;
    transform: translateX(-50%);
}

.tabs-wrap .tabs>li {
    flex: 1;
    margin: 0;
  	padding: 0;
}

.tabs-wrap .tabs li a {
    overflow: hidden;
    display: block;
  	width:100%;
	height:100%;
	background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
}

.tabs-wrap .tabs li:nth-child(1).on a {
    background-image: url(/kr/event/2024/08/12_lg_review/images/tab01_on.jpg);
}
.tabs-wrap .tabs li:nth-child(2).on a {
    background-image: url(/kr/event/2024/08/12_lg_review/images/tab02_on.jpg);
}

.tab-contents{
	display: none;
}

#lge_evt .evt-hash-area{
	bottom: 0;
	margin-bottom: calc(435 / var(--width) * 100%);
	padding-bottom: calc(79 / var(--width) * 100%);
}
#lge_evt .evt-hash-area button{
	width: calc(680 / var(--width) * 100%);
}
.evt-btn-area.evt-lge-btn{
	bottom: 0;
	margin-bottom: calc(340 / var(--width) * 100%);
	padding-bottom: calc(55 / var(--width) * 100%);
}
.evt-btn-area.evt-lge-btn a{
	width: calc(180 / var(--width) * 100%);
}

#sns_evt .evt-hash-area{
	bottom: 0;
	margin-bottom: calc(550 / var(--width) * 100%);
	padding-bottom: calc(79 / var(--width) * 100%);
}
#sns_evt .evt-hash-area button{
	width: calc(680 / var(--width) * 100%);
}
.evt-sns-area{
	bottom: 0;
	margin-bottom: calc(427 / var(--width)* 100%);
    padding-bottom: calc(72 / var(--width)* 100%);
}
.evt-sns-area a{
	width: calc(80 / var(--width) * 100%);
	margin:0 calc(20 / var(--width)* 100%);
}
.evt-btn-area.evt-join-btn{
	bottom: 0;
	margin-bottom: calc(321 / var(--width) * 100%);
	padding-bottom: calc(55 / var(--width) * 100%);
}
.evt-btn-area.evt-join-btn a{
	width: calc(180 / var(--width) * 100%);
}

.evt-acco-head.evt-btn-area{
	top: 0;
	padding-top: calc(80 / var(--width) * 100%);
}
.evt-acco-head.evt-btn-area button{
	width: 100%;
}
/* 모바일 */
@media screen and (max-width: 767px){
    * {
        --width: 720;
    }

	.tabs-wrap .tabs {
	    width: calc(600 / var(--width)* 100%);
	}

	.tabs-wrap .tabs li:nth-child(1).on a {
	    background-image: url(/kr/event/2024/08/12_lg_review/images/m_tab01_on.jpg);
	}
	.tabs-wrap .tabs li:nth-child(2).on a {
	    background-image: url(/kr/event/2024/08/12_lg_review/images/m_tab02_on.jpg);
	}

	#lge_evt .evt-hash-area{
		bottom: 0;
		margin-bottom: calc(605 / var(--width) * 100%);
		padding-bottom: calc(125 / var(--width) * 100%);
	}
	#lge_evt .evt-hash-area button{
		width: calc(480 / var(--width) * 100%);
	}
	.evt-btn-area.evt-lge-btn{
		bottom: 0;
		margin-bottom: calc(470 / var(--width) * 100%);
		padding-bottom: calc(75 / var(--width) * 100%);
	}
	.evt-btn-area.evt-lge-btn a{
		width: calc(240 / var(--width) * 100%);
	}
	
	#sns_evt .evt-hash-area{
		bottom: 0;
		margin-bottom: calc(728 / var(--width) * 100%);
		padding-bottom: calc(125 / var(--width) * 100%);
	}
	#sns_evt .evt-hash-area button{
		width: calc(480 / var(--width) * 100%);
	}
	.evt-sns-area{
		bottom: 0;
		margin-bottom: calc(580 / var(--width)* 100%) !important;
		padding-bottom: calc(104 / var(--width)* 100%) !important;
	}
	.evt-sns-area a{
		width: calc(110 / var(--width) * 100%);
		margin:0 calc(20 / var(--width)* 100%);
	}
	.evt-btn-area.evt-join-btn{
		bottom: 0;
		margin-bottom: calc(438 / var(--width) * 100%);
		padding-bottom: calc(78 / var(--width) * 100%);
	}
	.evt-btn-area.evt-join-btn a{
		width: calc(240 / var(--width) * 100%);
	}

	.evt-acco-head.evt-btn-area{
		padding-top: calc(110 / var(--width) * 100%);
	}
}