/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-87197
* CODE     : Dev - EV00020471 , Prod - EV00008161
* FILE     : /kr/event/2025/03/26_Cuisine_evt/eventMainCuisineEvt.jsp
* DESC     : 쉐프들과 함께하는 House of LG Cuisine 쿠킹가전 이벤트
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2025/02/24				김미선				Created
* 2025/03/20				신우용				Modify
************************************************************************************
**/

/* 이벤트 기본 설정 */
* {
	--width: 1380;
}

.event-wrap{
	position: relative;
}

.tabs-wrap{
	position: sticky;
	top: 0;
	background-color:#fff;
	text-align: center;
	border-bottom: 1px solid #DCDCDC;
	z-index: 10;
}

.tabs-wrap .tabs {
    display: flex;
    width: 100%;
    max-width: 720px;
    height: 56px;
    margin:0 auto;
    padding: 0;
}
.tabs-wrap .tabs > li {
    flex: 1;
    /* width: 100%; */
    background-color:#fff;
    margin: 0;
    padding: 0;
}

.tabs-wrap .tabs li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-family: "Pretendard";
    font-size: 14px;
    font-weight: 600;
    color:#767676;
    line-height: 1.4em;
    letter-spacing: -0.03em;
    background-color: #fff;
}
.tabs-wrap .tabs li.on a {
	font-weight: 800;
	color:#1F2530;
}
.tabs-wrap .tabs li a span{
	height: 24px;
}
.tabs-wrap .tabs li.on a span:after{
	content: "";
	display: block;
	background: #1F2530;
	width: 100%;
	height: 2px;
	margin-top: 2px;
}

.video-play{
    overflow: hidden;
    position: absolute;
    right: calc(300 / var(--width) * 100%);
    top: calc(100 / var(--width) * 100%);
    width: calc(350 / var(--width) * 100%);
    height: calc(944 / var(--width) * 100%);
}
.video-play.type2{
	left: calc(300 / var(--width) * 100%);
	right: auto;
	height: calc(899 / var(--width)* 100%);
}
.video-play a{
	display: block;
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}
.video-play video{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.evt-hash-area.cuisine-hash{
	bottom: 0;
	margin-bottom: calc(424 / var(--width) * 100%);
	padding-bottom: calc(56 / var(--width) * 100%);
}
.evt-hash-area.cuisine-hash button{
	width: calc(200 / var(--width) * 100%);
}

.evt-sns-area.cuisine-sns{
	bottom: 0;
	margin-bottom: calc(353 / var(--width) * 100%);
	padding-bottom: calc(56 / var(--width) * 100%);
}
.evt-sns-area.cuisine-sns a{
	width: calc(56 / var(--width) * 100%);
	margin: 0 calc(20 / var(--width) * 100%);
}

.evt-btn-area.cuisine-join{
	bottom: 0;
	margin-bottom: calc(30 / var(--width) * 100%);
	padding-bottom: calc(40 / var(--width) * 100%);
}
.evt-btn-area.cuisine-join a{
	width: calc(200 / var(--width) * 100%);
	margin: 0 calc(15 / var(--width) * 100%);
}

.cuisine-list{
	position: absolute;
	bottom: calc(100 / var(--width) * 100%);
	left: 50%;
	width: calc(900 / var(--width) * 100%);
	height: calc(1204 / var(--width) * 100%);
	transform:translateX(-50%);
}

.cuisine-list ul {
    display: flex;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: calc(40 / var(--width) * 100%) 0;
}
.cuisine-list li{
	display: flex;
	position: relative;
	width: calc(665 / var(--width) * 100%);
	height: calc(312 / var(--width) * 100%);
	justify-content: flex-end;
	align-items: flex-end;
}
.cuisine-list li a{
	display: inline-block;
	width: calc(565 / var(--width) * 100%);
	height: calc(400 / var(--width) * 100%);
}

.notice-area{
	background-color: #fffcf7;
}
.notice-area .evt-acco-head{
	top: 0;
	padding-top: calc(66 / var(--width)* 100%);
}
.notice-area .evt-acco-head button{
	width: 100%;
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
	
    .tabs-wrap {
        top: 46px;
    }
  	.header.helloBar~.mobile-nav-wrap ~ #content .event-container .tabs-wrap {
		top: 88px;
	}

	.tabs-wrap .tabs{
		height: calc(110 /var(--width)*100vw);
		max-width: 100%;
	}
    .tabs-wrap .tabs li a {
		font-size:calc(24/var(--width)*100vw);
		letter-spacing:-0.03em;
		font-weight:800;
	}
    .tabs-wrap .tabs li a span {
		height: auto;
	}
	.tabs-wrap .tabs li.on a span:after{
		position: absolute;
		bottom: 0;
		left: 0;
		margin-top: 0;
	}

	.video-play{
		left: 50%;
		right: auto;
		top: calc(370 / var(--width) * 100vw);
		width: calc(400 / var(--width) * 100vw);
		height: calc(544 / var(--width) * 100vw);
		transform:translateX(-50%);
	}
	.video-play.type2{
		left: 50%;
		height: calc(544 / var(--width)* 100vw);
	}

	.evt-hash-area.cuisine-hash{
		margin-bottom: calc(840 / var(--width) * 100%);
		padding-bottom: calc(70 / var(--width) * 100%);
	}
	.evt-hash-area.cuisine-hash button{
		width: calc(300 / var(--width) * 100%);
	}
	
	.evt-sns-area.cuisine-sns{
		margin-bottom: calc(715 / var(--width) * 100%);
		padding-bottom: calc(80 / var(--width) * 100%);
	}
	.evt-sns-area.cuisine-sns a{
		width: calc(80 / var(--width) * 100%);
		margin: 0 calc(24 / var(--width) * 100%);
	}
	
	.evt-btn-area.cuisine-join{
		margin-bottom: calc(40 / var(--width) * 100%);
		padding-bottom: calc(200 / var(--width) * 100%);
	}
	.evt-btn-area.cuisine-join > div{
		flex-direction: column;
		justify-content: space-between;
	}
	.evt-btn-area.cuisine-join a{
		width: calc(520 / var(--width) * 100%);
		height: calc(290 / var(--width) * 100%);
		margin: 0;
	}

	.cuisine-list{
		bottom: calc(80 / var(--width) * 100vw);
		width: calc(600 / var(--width) * 100vw);
		height: calc(2174 / var(--width) * 100vw);
	}
	.cuisine-list ul {
	    gap: calc(50 / var(--width) * 100vw) 0;
	}
	.cuisine-list li{
		width: calc(290 / var(--width) * 100vw);
		height: calc(514 / var(--width) * 100vw);
		justify-content: flex-end;
		align-items: flex-end;
	}
	.cuisine-list li:nth-child(7){
		height: calc(480 / var(--width) * 100vw);
	}
	.cuisine-list li a{
		width: 100%;
		height: calc(60 / var(--width) * 100vw);
	}

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