/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-57693
* CODE : Dev - EV00019141 , Prod - EV00007051
* FILE : /kr/event/2024/02/01_refrigerator_water_pipe/eventMainRefrigeratorWaterPipe.jsp
* DESC : 수도관 연결형 포토 리뷰 이벤트
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/02/06				신우용				Created
************************************************************************************
**/

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

#eventJoinRefrigeratorWaterPipe .input-info{
	-webkit-transform: none;
}

/* 레이어 팝업 아코디언 */
.layer-pop .evt-acco-area{
	margin-top:24px;
}
.layer-pop .pop-conts.academy-pop .form-wrap .forms .conts .evt-acco-area .sn-number-wrap{
	padding:12px 24px;
}
.layer-pop .evt-acco-head{
	top: 12px;
    height: 27px;
    padding: 0 12px;
	z-index:1;
}
.layer-pop .evt-btn-area .evt-acco-btn{
	width:100%;
}
.layer-pop .evt-acco-cont{
	position:relative;
}
.layer-pop .evt-acco-cont:after{
	content:'';
	position: absolute;
	top: 10px;
	right: 16px;
	width: 32px;
	height: 32px;
	background: url(/lg5-common/images/icons/btn-down-16-black.svg) no-repeat 50% 50%;
	transition: all .3s;
}
.layer-pop .evt-acco-cont.unfolded:after{
	transform: rotate(180deg);
}

/* 바닥페이지 */
.evt-btn-area {
    bottom: 0;
}

.evt-btn-area.eachLink{
	width: calc(900 / var(--width) * 100%);
    margin-bottom: calc(335 / var(--width) * 100%);
    padding-top: calc(580 / var(--width) * 100%);
    left: 50%;
    transform: translateX(-50%);
}
.evt-btn-area.eachLink > div{
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-start;
}
.evt-btn-area.eachLink a:nth-child(3), .evt-btn-area.eachLink a:nth-child(4) {
	margin-top: calc(33 / var(--width) * 100%);
}
.evt-btn-area.eachLink a{
	width: calc(675 / var(--width) * 100%);
    height: calc(665 / var(--width) * 100%);
}

.evt-btn-area.join-group{
	padding-top: calc(65 / var(--width) * 100%);
    margin-bottom: calc(140 / var(--width) * 100%);
}
.evt-btn-area.join-group a{
	width: calc(310 / var(--width) * 100%);
    margin: 0 calc(10 / var(--width) * 100%);
}

.evt-btn-area.evt-acco-head{
	bottom: auto;
	top: 0;
	padding-top: calc(58 / var(--width) * 100%);
	margin-bottom: 0;
}
.evt-btn-area.evt-acco-head button{
	width: 100%;
}

@media screen and (max-width: 767px){
    * {
		--width: 720;
	}

	.evt-btn-area.eachLink{
		width: calc(600 / var(--width) * 100%);
		margin-bottom: calc(345 / var(--width) * 100%);
		padding-top: calc(1610 / var(--width) * 100%);
	}
  	.evt-btn-area.eachLink > div{
        justify-content: start;
        flex-direction: column;
    }
	.evt-btn-area.eachLink a {
		width: calc(720 / var(--width) * 100%);
		height: calc(171 / var(--width) * 100%);
	}
	.evt-btn-area.eachLink a:nth-child(2){
		margin-top: calc(30 / var(--width) * 100%);
	}

	.evt-btn-area.join-group{
		padding-top: calc(235 / var(--width) * 100%);
    	margin-bottom: calc(125 / var(--width) * 100%);
	}
	.evt-btn-area.join-group div {
		flex-direction: column;
	}
	.evt-btn-area.join-group a{
		width: calc(500 / var(--width) * 100%);
    	margin: calc(15 / var(--width) * 100%) 0;
	}
	.evt-btn-area.evt-acco-head{
		padding-top: calc(78 / var(--width) * 100%);
	}
}