/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-53213
* CODE : Dev - EV00018961 , Prod - EV00006801
* FILE : /kr/event/2024/01/15_dios_washer14/css/event.css
* DESC : 식기세척기 14인용 신제품 런칭 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/01/02				신우용				Created
************************************************************************************
**/

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

/* 참여팝업 */
#agreeWasher1_f table tbody td{
    font-weight: bold;
}
#agreeWasher1_f table tbody tr:first-child td:last-child{
	font-size:20px;
  	line-height:30px;
	text-decoration: underline;
}
/* 바닥페이지 작성 */
.event-header{
    
}
.dios-washer-slide{
	position: absolute;
    left: 50%;
    bottom: calc(75 / 1660 * 100%);
    width: 100%;
    transform: translateX(-50%);
    z-index: 10;
}
.dios-washer-slide .swiper-button-prev, .dios-washer-slide .swiper-button-next{
	width: calc(92 / var(--width) * 100%);
	height: calc(92 / 422 * 100%);
	margin-top: 0;
	background-image: url(/kr/event/2024/01/15_dios_washer14/images/btn_slide.png);
	background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
.dios-washer-slide .swiper-button-prev{
	left: calc(345 / var(--width) * 100%);
	transform: translateY(-50%);
}
.dios-washer-slide .swiper-button-next{
	transform: translateY(-50%) rotate(180deg);
	right: calc(345 / var(--width) * 100%);
}

.dios-washer-slide .swiper-slide{
	overflow: hidden;
	width: calc(600 / var(--width) * 100%);
    margin: 0 calc(14 / var(--width) * 100%);
	border-radius: 8px;
}

.dios-washer-slide .swiper-slide:after{
	content:'';
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.6);
	z-index: 1;
	transition: all .3s ease-in-out;
}

.dios-washer-slide .swiper-slide.swiper-slide-active:after{
	opacity:0;
}
.tab-container{
	position: relative;
}

.tabs-wrap{
	position: sticky;
    top: 0;
    z-index: 10;
}
.tabs-wrap.fixed{
	position: fixed;
    left: 40px;
    right: 40px;
    max-width: 1380px;
    margin: 0 auto;
}

.tabs-wrap .tabs {
    display: flex;
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	margin: 0;
    padding: 0;
}
.tabs-wrap .tabs > li {
    width: 33.3%;
    padding: 0;
    margin: 0;
}
.tabs-wrap .tabs > li a{
	display: block;
	width: 100%;
	height: 100%;
	background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.tabs-wrap .tabs > li.on:nth-child(1) a{
	background-image: url(/kr/event/2024/01/15_dios_washer14/images/tab_01_on.jpg);
}
.tabs-wrap .tabs > li.on:nth-child(2) a{
	background-image: url(/kr/event/2024/01/15_dios_washer14/images/tab_02_on.jpg);
}
.tabs-wrap .tabs > li.on:nth-child(3) a{
	background-image: url(/kr/event/2024/01/15_dios_washer14/images/tab_03_on.jpg);
}

.tab-contents{
	display: none;
}

[id*="couponGet"]:disabled{
	position: relative;
}

[id*="couponGet"]:disabled:before{
	content: 'SOLD OUT';
	position: absolute;
	left: 50%;
	width: calc(100% - 6px);
	background: #f4f4f4;
	text-align: center;
	z-index: 1;
	transform: translateX(-50%);
}

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

.evt-btn-area.coupon-pdp{
	margin-bottom: calc(120 / var(--width) * 100%);
	padding-bottom: calc(80 / var(--width) * 100%);
}
.evt-btn-area.coupon-pdp > div{
	flex-direction: column;
}
.evt-btn-area.coupon-pdp a{
	width: calc(480 / var(--width) * 100%);
}

.evt-btn-area.evt-down-area{
	margin-bottom: calc(150 / var(--width) * 100%);
	padding-bottom: calc(1820 / var(--width) * 100%);
}
.evt-btn-area.evt-down-area > div{
	flex-direction: column;
}
.evt-btn-area.evt-down-area a{
	width: calc(480 / var(--width) * 100%);
}
.evt-btn-area.evt-down-area a + a{
	margin-top: calc(790 / var(--width) * 100%);
}

.evt-btn-area.sns-after{
	margin-bottom: calc(310 / var(--width) * 100%);
    padding-bottom: calc(85 / var(--width) * 100%);
}
.evt-btn-area.sns-after a{
	width: calc(480 / var(--width) * 100%);
}

.evt-btn-area.sns-open{
	margin-bottom: calc(310 / var(--width) * 100%);
    padding-bottom: calc(85 / var(--width) * 100%);
}
.evt-btn-area.sns-open a{
	width: calc(480 / var(--width) * 100%);
}

.evt-hash-area{
	bottom: 0;
	margin-bottom: calc(705 / var(--width) * 100%);
    padding-bottom: calc(80 / var(--width) * 100%);
}
.evt-hash-area.evt-two-hash{
	margin-bottom: calc(700 / var(--width) * 100%);
}
.evt-hash-area .btn-hashtag-copy {
    width: calc(800 / var(--width) * 100%);
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
	/* 참여팝업 */
    #agreeWasher1_f table tbody tr:first-child td:last-child{
        font-size:16px;
        line-height:24px;
    }

	.dios-washer-slide {
		bottom: calc(75 / 1460 * 100%);
		width: calc(600 / var(--width) * 100%);
	}
	.dios-washer-slide .swiper-slide {
		width: 100%;
		margin: 0;
	}
	.dios-washer-slide .swiper-slide:after{
		display: none;
	}
	.dios-washer-slide .swiper-button-prev, .dios-washer-slide .swiper-button-next{
		width: calc(92 / 600 * 100%);
	}
	.dios-washer-slide .swiper-button-prev{
		left: calc(-56 / var(--width) * 100%);
	}
	.dios-washer-slide .swiper-button-next{
		right: calc(-56 / var(--width) * 100%);
	}

	.tabs-wrap {
        top: 46px;
    }
	.tabs-wrap.fixed{
        left: 0;
        right: 0;
    }
	.tabs-wrap .tabs > li.on:nth-child(1) a{
		background-image: url(/kr/event/2024/01/15_dios_washer14/images/m_tab_01_on.jpg);
	}
	.tabs-wrap .tabs > li.on:nth-child(2) a{
		background-image: url(/kr/event/2024/01/15_dios_washer14/images/m_tab_02_on.jpg);
	}
	.tabs-wrap .tabs > li.on:nth-child(3) a{
		background-image: url(/kr/event/2024/01/15_dios_washer14/images/m_tab_03_on.jpg);
	}

	.evt-btn-area.coupon-pdp {
		margin-bottom: calc(85 / var(--width) * 100%);
	}

	.evt-btn-area.evt-down-area {
		margin-bottom: calc(90 / var(--width) * 100%);
		padding-bottom: calc(1865 / var(--width) * 100%);
	}
	.evt-btn-area.evt-down-area a + a {
		margin-top: calc(810 / var(--width) * 100%);
	}

	.mdevice .evt-hash-area {
		margin-bottom: calc(685 / var(--width) * 100%);
		padding-bottom: calc(80 / var(--width) * 100%);
	}
}