/**
************************************************************************************
* 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:nth-child(2){
	-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(398 / 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%);
}

.gram-slide .swiper-button-next, .gram-slide .swiper-button-prev{
	width: calc(92 / 1380 * 100%);
	height: calc(92 / 1428 * 100%);
	margin-top: calc(-46 / 1428 * 100%);
	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;
}
.gram-slide .swiper-button-prev{
	left: calc(46 / 1380 * 100%);
}
.gram-slide .swiper-button-next{
	right: calc(46 / 1380 * 100%);
	transform: rotate(180deg);
}

.gram-slide .evt-btn-area{
	margin-bottom: calc(160 / 1380 * 100%);
    padding-bottom: calc(70 / 1380 * 100%);
}

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

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

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

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

.evt-btn-area.intel-prd a{
	width: calc(210 / 1380 * 100%);
}
.evt-btn-area.jammy-go{
	margin-bottom: calc(355 / 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(398 / 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 .gram-slide .swiper-button-next, .mdevice .gram-slide .swiper-button-prev{
	width: calc(92 / var(--width) * 100%);
	height: calc(92 / 1695 * 100%);
	margin-top: calc(-46 / 1695 * 100%);
}

.mdevice .gram-slide .swiper-button-prev{
	left: 0;
}
.mdevice .gram-slide .swiper-button-next{
	right: 0;
}

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

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

.mdevice .evt-btn-area.start-gram{
	margin-bottom: calc(125 / 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(127 / 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(305 / 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%;
}

.event_btn{position:absolute; bottom:6%; left:28%; width:44%; height:6%;}

.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after, .swiper-button-prev:after, .swiper-rtl .swiper-button-next:after{font-size:0;}
.gram-slide{background:#201e1f;}
.gram-slide_m{display:none;}

.gram-slide .swiper-button-next, .gram-slide .swiper-button-prev{width:90px; height:90px; top:530px; margin-top:0;}
            
            
            
.mobile {
            display: none;
        }

        .product_wrap {
            width: 100%;
            max-width: 1380px;
            position: relative;
        }

        .product_wrap img {
            width: 100%;
        }

        .product_wrap .btnbox a {
            width: calc(292 / 1380 * 100%);
            height: calc(681 / 1790 * 100%);
            position: absolute;
        }

        .pbtn1 {left: 6.6%; top: 17.8%;}
        .pbtn2 {left: 28.5%; top: 17.8%;}
        .pbtn3 {left: 50.54%; top: 17.8%;}
        .pbtn4 {left: 72.3%; top:17.8%;}
            
        .pbtn5 {left: 6.6%; top: 56.5%;}
        .pbtn6 {left: 28.5%; top: 56.5%;}         
            .pbtn7 {left: 50.54%; top: 56.5%;}         
            
            

@media screen and (max-width: 767px) {
	.event_btn{position:absolute; bottom:5%; left:8%; width:84%; height:6%;}
  .gram-slide_m{display:block;}
  
  .gram-slide_m .swiper-slide{padding:0 5%; background:#4e4e4e;}
  
  .gram-slide_m .swiper-container-autoheight, .swiper-container-autoheight .swiper-slide{background:#4e4e4e;}
  
  .gram-slide .swiper-button-next, .gram-slide .swiper-button-prev{width:40px !important; height:40px !important; top:270px; margin-top:0;}
   .gram-slide_m.gram-slide .swiper-button-next, .gram-slide_m.gram-slide .swiper-button-prev{width:40px; height:40px; top:50%; margin-top:0;}
            
                                                                                         
                                                                                         
         .mobile {
                display: block;
            }
            .pc {
                display: none;
            }

            .product_wrap .btnbox a {
                width: calc(660 / 720 * 100%);
                height: calc(512 / 3927 * 100%);
                position: absolute;
            }

            .pbtn1 {left: 4%; top: 5.2%;}
            .pbtn2 {left: 4%; top: 18.5%;}
            .pbtn3 {left: 4%; top: 31.9%;}

            .pbtn4 {left: 4%; top: 45.2%;}
            .pbtn5 {left: 4%; top: 58.5%;}
            .pbtn6 {left: 4%; top: 71.9%;}
                                                                                         .pbtn7 {left: 4%; top: 85.2%;}
                                                                                         
                                                                                         
}