/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-70865
* CODE : Dev - EV00020072 , Prod - EV00007882
* FILE : /kr/event/2024/11/18_dishwashers_tips/eventMainDishwashers.jsp
* DESC : 세기의 사랑을 찾아요 - sns공유
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/11/05				김미선				Created
* 2024/11/08				김미선				바닥페이지
************************************************************************************
**/

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

/* 참여팝업 */
#agree2_f .gray_box {
    padding: 24px;
    border-radius: 8px;
    background-color: #f4f4f4;
    font-size: 16px;
    line-height: 26px;
}
#agree2_f .gray_box ul {
    padding: 20px 0;
}
#agree2_f .gray_box ul li {
    position: relative;
    padding-left: 20px;
}
#agree2_f .gray_box ul li::before {
    content:'■';
    display:inline-block;
    position: absolute;
    top: 0;
    left: 0;
}
#agree2_f .gray_box ul li .list_box p {
    position:relative;
    padding-left:11px;
    word-break: keep-all;
}
#agree2_f .gray_box ul li .list_box p::before {
    content:' ';
    display:inline-block;
    width:3px;
    height:3px;
    margin-top:11px;
    margin-left:-11px;
    margin-right:6px;
    border-radius:50%;
    background:#000;
    vertical-align:top;
}

.evt-func {
	position: relative;
}
/* 탭­ */
/* .tabs-wrap{
	position: sticky;
	top: 0;
	z-index: 11;
} */
.tabs-wrap .tabs {
    display: flex;
    /* justify-content: space-between; */
	position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
	margin: 0;
    padding: 0;
}
.tabs-wrap .tabs > li {
    width: 33.33%;
    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/11/18_dishwashers_tips/images/tab01_on.jpg);
}
.tabs-wrap .tabs > li.on:nth-child(2) a{
	background-image: url(/kr/event/2024/11/18_dishwashers_tips/images/tab02_on.jpg);
}
.tabs-wrap .tabs > li.on:nth-child(3) a{
	background-image: url(/kr/event/2024/11/18_dishwashers_tips/images/tab03_on.jpg);
}
.tab_hidden {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 33.33%;
    height: 100%;
}
.tab_hidden span {
    display: block;
    width: 100%;
    height: 100%;
    font-size: 0;
    text-indent: 0;
    cursor: pointer;
}

.tab-contents {
    display: none;
}

/* 해시태그 */
.evt-hash-area {
    width: 100%;
    padding-top: calc(80 / var(--width) * 100%) !important;
    margin-bottom: calc(50 / var(--width) * 100%) !important;
    position: absolute;
    bottom: 0;
}
.evt-hash-area .btn-hashtag-copy {
    width: calc(540 / var(--width) * 100%);
    margin: 0 auto;
}

/* sns버튼 */
.evt-sns-area{
    bottom: 0;
    margin-bottom: calc(445 / var(--width)* 100%) !important;
    padding-bottom: calc(100 / var(--width)* 100%) !important;
}
.evt-sns-area a {
    width: calc(100 / var(--width)* 100%);
    margin: 0 calc(10 / var(--width)* 100%);
}

/* 참여버튼 */
.evt-btn-area.dishwasher-join {
    bottom: 0;
    margin-bottom: calc(130 / var(--width)* 100%);
    padding-bottom: calc(87 / var(--width)* 100%);
}
.evt-btn-area.dishwasher-join a {
    width: calc(550 / var(--width)* 100%);
}

/* 제품 */
.dishwasher-benefit {
    position: absolute;
    display: flex;
    left: 50%;
    top: calc(228 / var(--width)* 100%);
    width: calc(1275 / var(--width)* 100%);
    height: calc(804 / var(--width)* 100%);
    transform: translateX(-50%);
    justify-content: space-between;
    flex-wrap: wrap;
}
.dishwasher-benefit li{
    position: relative;
    width: calc(672 / var(--width)* 100%);
    height: calc(428 / var(--width)* 100%);
    margin-top: calc(55 / var(--width)* 100%);
}
.dishwasher-benefit li:nth-child(1), .dishwasher-benefit li:nth-child(2){
    margin-top: 0;
}
.dishwasher-benefit li a{
    position: absolute;
    left: 50%;
    bottom: calc(128 / var(--width)* 100%);
    width: calc(680 / var(--width)* 100%);
    height: calc(170 / var(--width)* 100%);
    transform: translateX(-50%);
}



@media screen and (max-width: 767px){
* {
    --width: 720;
}
    /* 참여팝업 */
    #agree2_f .gray_box {
        font-size: 14px;
        line-height: 22px;
    }

    /* 탭­ */
    /* .tabs-wrap {
        top: 46px;
    }
  	.header.helloBar~.mobile-nav-wrap ~ #content .event-container .tabs-wrap {
		top: 88px;
	} */
    .tabs-wrap .tabs > li.on:nth-child(1) a{
        background-image: url(/kr/event/2024/11/18_dishwashers_tips/images/m_tab01_on.jpg);
    }
    .tabs-wrap .tabs > li.on:nth-child(2) a{
        background-image: url(/kr/event/2024/11/18_dishwashers_tips/images/m_tab02_on.jpg);
    }
    .tabs-wrap .tabs > li.on:nth-child(3) a{
        background-image: url(/kr/event/2024/11/18_dishwashers_tips/images/m_tab03_on.jpg);
    }

    /* 제품 */
    .dishwasher-benefit{
        top: calc(98 / var(--width)* 100%);
        width: calc(648 / var(--width)* 100%);
        height: calc(445 / var(--width)* 100%);
    }
    .dishwasher-benefit li{
        width: calc(350 / var(--width)* 100%);
        height: calc(230 / var(--width)* 100%);
        margin-top: calc(42 / var(--width)* 100%);
    }
    .dishwasher-benefit li a{
        bottom: calc(36 / var(--width)* 100%);
        width: 100%;
        height: calc(70 / var(--width)* 100%);
    }

}