/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-51255
* CODE : Dev - EV00018831 , Prod - EV00006692
* FILE : /kr/event/2024/01/02_pc_preorder/eventMainPcPreorder.jsp
* DESC : 24년 gram프로 신모델 출시기념 : 예약판매 보유제품 API 적용(PC아카데미 용)
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2023/11/23				신우용				Created
* 2023/12/28				신우용				바닥페이지 작성
************************************************************************************
**/

/* 이벤트 기본 설정 */
.mdevice {
	--width: 720;
}
.evt-func {
	position: relative;
}
#eventJoinPcPreorder .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-acco-btn{
	width: 100%;
}

.evt-btn-area.evt-join{
	margin-bottom: calc(400 / 1380 * 100%);
    padding-bottom: calc(90 / 1380 * 100%);
}

.evt-btn-area.evt-join a{
	width: calc(290 / 1380 * 100%);
    margin: 0 calc(10 / 1380 * 100%);
}
.evt-btn-area.start-gram{
	margin-bottom: calc(120 / 1380 * 100%);
    padding-bottom: calc(90 / 1380 * 100%);
}

.evt-btn-area.start-gram a{
	width: calc(600 / 1380 * 100%);
}

[class*="gram-slide"]{
	background-color: #201e1f;
}
[class*="gram-slide"] .swiper-button-next, [class*="gram-slide"] .swiper-button-prev{
	width: calc(92 / 1380 * 100%);
	margin-top: 0;
	background-image: url(/kr/event/2024/01/02_pc_preorder/images/btn_slide.png);
	background-size: 100% 100%;
    background-position: center;
    background-repeat: no-repeat;
}
[class*="gram-slide"] .swiper-button-next{
	transform: rotate(180deg);
}

[class*="gram-slide"] .evt-btn-area{
  	display: none;
	margin-bottom: calc(160 / 1380 * 100%);
    padding-bottom: calc(70 / 1380 * 100%);
}

[class*="gram-slide"] .evt-btn-area a{
	width: calc(300 / 1380 * 100%);
}

.gram-slide-pro .swiper-button-next, .gram-slide-pro .swiper-button-prev{
	height: calc(92 / 1246 * 100%);
    margin-top: calc(-46 / 1246 * 100%);
}

.gram-slide-pro .swiper-button-prev{
	left: calc(96 / 1380 * 100%);
}
.gram-slide-pro .swiper-button-next{
	right: calc(96 / 1380 * 100%);
}

.gram-slide-popup{
	position: absolute;
	top: calc(290 / 1380 * 100%);
	left: 50%;
	width: calc(900 / 1380 * 100%);
	padding: 0 calc(50 / 1380 * 100%);
	background-color: transparent;
	transform: translateX(-50%);
}
.gram-slide-popup .swiper-container{
	border-radius: 16px;
}
.gram-slide-popup .swiper-button-next, .gram-slide-popup .swiper-button-prev{
	width: calc(92 / 900 * 100%);
	height: calc(92 / 420 * 100%);
	margin-top: calc(-22 / 420 * 100%);
}

.gram-slide-popup .swiper-button-prev{
	left: calc(0 / 1380 * 100%);
}
.gram-slide-popup .swiper-button-next{
	right: calc(0 / 1380 * 100%);
}

.evt-btn-area.intel-prd{
	margin-bottom: calc(95 / 1380 * 100%);
    padding-bottom: calc(90 / 1380 * 100%);
}

.evt-btn-area.intel-prd a{
	width: calc(210 / 1380 * 100%);
}
.evt-btn-area.jammy-go{
	margin-bottom: calc(205 / 1380 * 100%);
    padding-bottom: calc(60 / 1380 * 100%);
}

.evt-btn-area.jammy-go a{
	width: calc(300 / 1380 * 100%);
}

.evt-btn-area.evt-acco-head{
	bottom: auto;
	top: 0;
	padding-top: calc(110 / 1380 * 100%);
}

.mdevice .evt-btn-area.evt-join{
	margin-bottom: calc(420 / var(--width) * 100%);
    padding-bottom: calc(90 / var(--width) * 100%);
}

.mdevice .evt-btn-area.evt-join a{
	width: calc(290 / var(--width) * 100%);
    margin: 0 calc(10 / var(--width) * 100%);
}

.mdevice [class*="gram-slide"] .swiper-button-next, .mdevice [class*="gram-slide"] .swiper-button-prev{
	width: calc(92 / var(--width) * 100%);
}

.mdevice [class*="gram-slide"] .swiper-button-prev{
	left: calc(16 / var(--width) * 100%);
}
.mdevice [class*="gram-slide"] .swiper-button-next{
	right: calc(16 / var(--width) * 100%);
}

.mdevice [class*="gram-slide"] .evt-btn-area{
	margin-bottom: calc(140 / var(--width) * 100%);
	padding-bottom: calc(85 / var(--width) * 100%);
}

.mdevice [class*="gram-slide"] .evt-btn-area a{
	width: calc(400 / var(--width) * 100%);
}

.mdevice .gram-slide-pro .swiper-button-next, .mdevice .gram-slide-pro .swiper-button-prev{
	height: calc(92 / 1527 * 100%);
	margin-top: calc(-46 / 1527 * 100%);
}

.mdevice .gram-slide-popup{
	top: calc(150 / var(--width) * 100%);
    width: calc(700 / var(--width) * 100%);
	padding: 0 calc(50 / var(--width) * 100%);
}
.mdevice .gram-slide-popup .swiper-container{
	border-radius: 8px;
}
.mdevice .gram-slide-popup .swiper-button-next, .mdevice .gram-slide-popup .swiper-button-prev{
	width: calc(92 / 700 * 100%);
    height: calc(92 / 400 * 100%);
    margin-top: calc(-22 / 400 * 100%);
}

.mdevice .evt-btn-area.start-gram{
	margin-bottom: calc(100 / var(--width) * 100%);
    padding-bottom: calc(90 / var(--width) * 100%);
}

.mdevice .evt-btn-area.start-gram a{
	width: calc(600 / var(--width) * 100%);
}

.mdevice .evt-btn-area.intel-prd{
	margin-bottom: calc(130 / var(--width) * 100%);
    padding-bottom: calc(90 / var(--width) * 100%);
}

.mdevice .evt-btn-area.intel-prd a{
	width: calc(280 / var(--width) * 100%);
}
.mdevice .evt-btn-area.jammy-go{
	margin-bottom: calc(155 / var(--width) * 100%);
    padding-bottom: calc(60 / var(--width) * 100%);
}

.mdevice .evt-btn-area.jammy-go a{
	width: calc(330 / var(--width) * 100%);
}

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

#gramIntel{
	max-width: 960px;
}
#gramIntel .pop-conts {
	padding: 0;
}
#gramIntel .pop-conts.no-footer {
	max-height: 645px;
}

#gramIntel .pop-cont::-webkit-scrollbar {
    width: 10px;  
}

#gramIntel .pop-cont::-webkit-scrollbar-thumb {
    background: rgba(220, 20, 60); /* 스크롤바 색상 */
    border-radius: 10px; /* 스크롤바 둥근 테두리 */
}

#gramIntel .pop-cont::-webkit-scrollbar-track {
    background: rgba(220, 20, 60, .1);/*스크롤바 뒷 배경 색상*/
}

#gramIntel .pop-conts.no-footer:after {
	display: none;
}
#gramIntel img {
	width: 100%;
	height: auto;
}
#gramIntel .btn-pop-close {
	position: absolute;
	right: 2%;
	top: 0;
	display: block;
	width: 7.24%;
	height: 10.27%;
	margin: 0 auto;
	background-color: rgba(0,0,0,0);
}

#gramIntel .btn-pop-close::before,
#gramIntel .btn-pop-close::after {
    content: "";
    width: 25px;
    height: 1px;
    position: absolute;
    top: 50%;
    left: 50%;
    background-color: #fff;
      -webkit-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
    -webkit-transform-origin: center;
    transform-origin: center;
  }
#gramIntel .btn-pop-close::after {
  -webkit-transform: translate(-50%, -50%) rotate(-45deg);
  transform: translate(-50%, -50%) rotate(-45deg);
}

.mdevice #gramIntel .pop-conts.no-footer {
	height: 100%;
	max-height: 100%;
}
.mdevice #gramIntel .btn-pop-close {
	right: 3%;
    top: 1.3%;
    width: 6.24%;
    height: 4.27%;
}