/**
************************************************************************************
* CSR      : http://clm.lge.com/issue/browse/BTOCSITE-82960
* CODE     : Dev - EV00020242 , Prod - EV00008053
* FILE     : /kr/event/2025/01/27_1class_dishwasher/eventMainClassDishwasher.jsp
* DESC     : 식기세척기 에너지효율1등급 신모델 출시 이벤트
* PROJ     : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/12/12				김미선				Created
* 2025/01/20				김미선				바닥페이지
************************************************************************************
**/

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

.event-container{
	max-width: 1380px;
}
.evt-func {
	position: relative;
}

/* 탭 */
.tabs-wrap{
	position: sticky;
    top: 0;
  	background-color:#fefcf3;
    z-index: 10;
}

.tabs-wrap .tabs {
    display: flex;
    width: 100%;
    max-width: 900px;
    height: 50px;
    margin: 0 auto;
    gap: 1px;
}
.tabs-wrap .tabs > li {
    flex: 1;
    margin: 0;
	padding: 0;
	background-color: #fefcf3;
}

.tabs-wrap .tabs > li:first-child {
	border-left:0;
}
.tabs-wrap .tabs li a {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    font-size: 19px;
    font-weight: 500;
    color: #898989;
    line-height: 1.4em;
    letter-spacing: -0.03em;
    background-color: #fefcf3;
}
.tabs-wrap .tabs li span {
    color: #898989;
    background-color: #fefcf3;
}
.tabs-wrap .tabs li.on a,
.tabs-wrap .tabs li.on span {
	color:#fff;
	background-color:#4dad89;
}

/* 이미지 다운로드 */
.evt-down-area {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(975 / var(--width)* 100%);
    margin-bottom: calc(70 / var(--width)* 100%);
}
.evt-down-area li {
    position: relative;
    flex: 1 1 30%;
    padding-top: calc(81 / var(--width)* 100%);
    margin-top: calc(527 / var(--width) * 100%);
    margin-right: 0;
}
.evt-down-area li:nth-child(1),
.evt-down-area li:nth-child(2),
.evt-down-area li:nth-child(3) {
    margin-top: 0;
}
.evt-down-area li a {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 72%;
    height: 100%;
}

/* 해시태그 */
.evt-hash-area {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(542 / var(--width) * 100%);
    padding-top: calc(77 / var(--width) * 100%) !important;
    margin-bottom: calc(294 / var(--width) * 100%) !important;
}
.evt-hash-area .btn-hashtag-copy {
    width: 100%;
}

/* sns버튼 */
.evt-sns-area {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(379 / var(--width) * 100%);
    padding-top: calc(121 / var(--width) * 100%) !important;
    margin-bottom: calc(133 / var(--width) * 100%) !important;
}
.evt-sns-area a {
    width: 50%;
    margin: 0 calc(120 / var(--width)* 100%);
}

/* 참여버튼 */
.evt-btn-area.evt-btn-join {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: calc(542 / var(--width) * 100%);
    padding-bottom: calc(77 / var(--width)* 100%);
    margin-bottom: calc(218 / var(--width)* 100%);
}
.evt-btn-area.evt-btn-join a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
/* 자세히보기 */
.evt-dishwasher-boon .evt-btn-area.evt-acco-head {
	padding-top: calc(58 / var(--width)* 100%);
	width: calc(750 / var(--width)* 100%);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
.evt-dishwasher-boon .evt-btn-area.evt-acco-head button {
	width: 100%;
}

/* 제품 */
.goods_link {
    position: absolute;
    display: flex;
    left: 50%;
    top: calc(189 / var(--width)* 100%);
    width: calc(1108 / var(--width)* 100%);
    height: calc(804 / var(--width)* 100%);
    transform: translateX(-50%);
    justify-content: space-between;
    flex-wrap: wrap;
}
.goods_link li {
    position: relative;
    width: calc(672 / var(--width)* 100%);
    height: calc(556 / var(--width)* 100%);
    margin-top: calc(48 / var(--width)* 100%);
}
.goods_link li:nth-child(1),
.goods_link li:nth-child(2) {
    margin-top: 0;
}
.goods_link li a {
    position: absolute;
    left: 50%;
    bottom: calc(120 / var(--width)* 100%);
    width: calc(645 / var(--width)* 100%);
    height: calc(171 / var(--width)* 100%);
    transform: translateX(-50%);
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}
    /* 탭 */
    .tabs-wrap {
        top: 45px;
    }
    .tabs-wrap .tabs {
        height: 45px;
        max-width: 100%;
        padding: 0;
    }
    .tabs-wrap .tabs li a {
        font-size: 15px;
    }
    /* 이미지 다운로드 */
    .evt-down-area {
        width: calc(663 / var(--width)* 100%);
    }
    .evt-down-area li {
        flex: 1 1 40%;
        padding-top: calc(63 / var(--width)* 100%);
        margin-top: calc(403 / var(--width)* 100%);
    }
    .evt-down-area li:nth-child(3) {
        margin-top: calc(403 / var(--width)* 100%);
    }

    /* sns */
    .evt-sns-area a {
        margin: 0 calc(60 / var(--width)* 100%);
    }
    /* 참여버튼 */
    .evt-btn-area.evt-btn-join {
        margin-bottom: calc(222 / var(--width)* 100%);
    }
    /* 자세히보기 */
    .evt-dishwasher-boon .evt-btn-area.evt-acco-head {
        width: 87%;
    }

    /* 제품 */
    .goods_link {
        top: calc(88 / var(--width)* 100%);
        width: calc(657 / var(--width)* 100%);
        height: calc(445 / var(--width)* 100%);
    }
    .goods_link li {
        width: calc(350 / var(--width)* 100%);
        height: calc(298 / var(--width)* 100%);
        margin-top: calc(32 / var(--width)* 100%);
    }
    .goods_link li a {
        bottom: calc(29 / var(--width)* 100%);
        width: 88%;
        height: calc(70 / var(--width)* 100%);
    }
}