/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-58112
* CODE : Dev - EV00019161 , Prod - EV00007071
* FILE : /kr/event/2024/03/15_dios_cooking/css/event.css
* DESC : LG쿠킹 클래스와 떠나는 전세계 미식여행 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/02/07				정규진			    Created
* 2024/03/11				정규진			    바닥페이지
************************************************************************************
**/
/* 이벤트 기본 설정 */
* {
    --width: 1380;
}
.evt-func {
    position: relative;
}
/* 참여팝업 */
#agreeShare1_f table tbody td {
    font-weight: bold;
}
#agreeShare1_f table tbody tr td:nth-child(3) {
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
/* 탭 */
.tabs-wrap{
	width: 100%;
	position: absolute;
	transform: translateY(50%);
    bottom: 0;
    z-index: 10;
}

.tabs-wrap .tabs {
    display: flex;
	justify-content: space-evenly;
}
.tabs-wrap .tabs > li {
	width: calc(667 / var(--width) * 100%);
	margin: 0;
}

.tabs-wrap .tabs > li:first-child {
	background: url(/kr/event/2024/03/15_dios_cooking/images/tab_01_off.png) no-repeat 0 0;
	background-size: 100%;
}
.tabs-wrap .tabs > li:nth-child(2) {
	background: url(/kr/event/2024/03/15_dios_cooking/images/tab_02_off.png) no-repeat 0 0;
	background-size: 100%;
}
.tabs-wrap .tabs > li:first-child.on {
	background: url(/kr/event/2024/03/15_dios_cooking/images/tab_01_on.png) no-repeat 0 0;
	background-size: 100%;
}
.tabs-wrap .tabs > li:nth-child(2).on {
	background: url(/kr/event/2024/03/15_dios_cooking/images/tab_02_on.png) no-repeat 0 0;
	background-size: 100%;
}
.tabs-wrap .tabs li a {
	width: 100%;
	padding-top: calc(209 / 667 * 100%);
	display: block;
}

/* 참여팝업 버튼 */
.evt-join-btn-A {
	width: 100%;
	padding-top: calc(90 / var(--width) * 100%);
	margin-bottom: calc(79 / var(--width) * 100%);
	bottom: 0;
}
.evt-join-btn-A a {
	width: calc(964 / var(--width) * 100%);
	margin: 0 auto;
}

/* 이미지 다운로드 버튼 */
.evt-down-area {
	width: calc(800 / var(--width) * 100%);
	margin-bottom: calc(80 / var(--width) * 100%);
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: 0;
}
.evt-down-area a {
	display: block;
	width: 100%;
	padding-top: calc(61 / 800 * 100%);
}

/* 해시태그 버튼 */
.evt-hash-area {
	width: 100%;
	padding-top: calc(61 / var(--width) * 100%);
	margin-bottom: calc(289 / var(--width) * 100%);
	position: absolute;
	left: 0;
	bottom: 0;
}
.evt-hash-area button {
	width: calc(321 / var(--width) * 100%);
	margin: 0 auto;
}

/* 참여팝업 버튼 */
.evt-join-btn-B {
	width: 100%;
	padding-top: calc(90 / var(--width) * 100%);
	margin-bottom: calc(79 / var(--width) * 100%);
	bottom: 0;
}
.evt-join-btn-B a {
	width: calc(964 / var(--width) * 100%);
	margin: 0 auto;
}

@media screen and (max-width: 767px){
	* {
		--width: 720;
	}
    /* 참여팝업 */
    #agreeShare1_f table tbody tr td:nth-child(3) {
        font-size:16px;
        line-height:24px;
    }
	/* 탭 */
	.tabs-wrap .tabs > li {
		width: calc(334 / var(--width) * 100%);
	}
	
	.tabs-wrap .tabs > li:first-child {
		background: url(/kr/event/2024/03/15_dios_cooking/images/m_tab_01_off.png) no-repeat 0 0;
		background-size: 100%;
	}
	.tabs-wrap .tabs > li:nth-child(2) {
		background: url(/kr/event/2024/03/15_dios_cooking/images/m_tab_02_off.png) no-repeat 0 0;
		background-size: 100%;
	}
	.tabs-wrap .tabs > li:first-child.on {
		background: url(/kr/event/2024/03/15_dios_cooking/images/m_tab_01_on.png) no-repeat 0 0;
		background-size: 100%;
	}
	.tabs-wrap .tabs > li:nth-child(2).on {
		background: url(/kr/event/2024/03/15_dios_cooking/images/m_tab_02_on.png) no-repeat 0 0;
		background-size: 100%;
	}
	.tabs-wrap .tabs li a {
		padding-top: calc(149 / 334 * 100%);
	}

	/* 참여팝업 버튼 */
	.evt-join-btn-A {
		padding-top: calc(88 / var(--width) * 100%)!important;
		margin-bottom: calc(79 / var(--width) * 100%)!important;
	}
	.evt-join-btn-A a {
		width: calc(641 / var(--width) * 100%);
	}

	.evt-down-area {
		width: calc(681 / var(--width) * 100%);
		margin-bottom: calc(80 / var(--width) * 100%)!important;
	}
	.evt-down-area a {
		padding-top: calc(61 / 681 * 100%)!important;
	}

	.evt-hash-area {
		padding-top: calc(61 / var(--width) * 100%)!important;
		margin-bottom: calc(289 / var(--width) * 100%)!important;
	}
	.evt-hash-area button {
		width: calc(321 / var(--width) * 100%);
	}

	.evt-join-btn-B {
		padding-top: calc(88 / var(--width) * 100%)!important;
		margin-bottom: calc(79 / var(--width) * 100%)!important;
	}
	.evt-join-btn-B a {
		width: calc(641 / var(--width) * 100%);
	}
}