/**
************************************************************************************
* CSR  : http://clm.lge.com/issue/browse/BTOCSITE-58778
* CODE : Dev - EV00019181 , Prod - EV00007082
* FILE : /kr/event/2024/03/04_coupon_pack/eventMainCouponPack.jsp
* DESC : 할인쿠폰 다운로드
* PROJ : lge.co.kr 5.0
************************************************************************************
*							Modification History
************************************************************************************
* DATE						AUTHOR				DESCRIPTION
************************************************************************************
* 2024/02/22				신우용				Created
************************************************************************************
**/

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

/* 응모횟수 */
#couponRecivePop {
	max-width: 482px;
	border-radius: 0;
	padding: 27px;
	background-color: transparent;
}
#couponRecivePop .mobile {
	display: none;
}
#couponRecivePop .pop-conts {
	padding: 0;
}

#couponRecivePop .pop-conts.no-footer:after {
	display: none;
}
#couponRecivePop img {
	width: 100%;
	height: auto;
}

#couponRecivePop .copy-area{
	position:absolute;
	bottom: 74px;
	width: 340px;
	height: 60px;
	left: 50%;
	transform: translateX(-50%);
	text-align: center;
}
#couponRecivePop .copy-area input{
	position: static;
	width: 70%;
	height: 100%;
	text-align: center;
	background-color: transparent;
}
#couponRecivePop .copy-area button{
	display: inline-block;
	width: 20px;
	height: 20px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	background-image: url(/kr/event/2024/03/04_coupon_pack/images/btn_copy.png);
}

#couponRecivePop .btn-close{
	position: absolute;
	top: 0;
	right: 0;
	width: 68px;
	height: 68px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	background-image: url(/kr/event/2024/03/04_coupon_pack/images/popup_ticket_close.png);
}
#couponRecivePop .btn-close:before {
	display: none;
}
#couponRecivePop input[type="text"]:focus, #confirmPopup input[type="text"]:focus{
	outline: none;
}

#confirmPopup .evt-hash-area, #confirmPopup .evt-hash-area > div{
	position: static;
}
#confirmPopup #conCouponNum{
	display: inline-block;
	position: static;
	width: 70%;
	height: 30px;
	font-size: 14px;
	opacity: 1;
	text-align: center;
	vertical-align: middle;
}
#confirmPopup .btn-copy{
	display: inline-block;
	width: 20px;
	height: 20px;
	margin-left: 10px;
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 100% auto;
	background-image: url(/kr/event/2024/03/04_coupon_pack/images/btn_copy.png);
	vertical-align: middle;
}

.coupon-container .benefit-template{
  	padding-bottom: calc(60 / var(--width) * 100%);
  	background: linear-gradient(to bottom, #f7ffd8, #f5ffcb, #f3ffbd);
}
.coupon-container .benefit-template ul{
	overflow: hidden;
	display: inline-block;
	width: calc(520 / var(--width) * 100%);
	background-color: #fff;
	border-radius: 25px;
}
.coupon-container .benefit-template li .coupon-list{
	position: relative;
	padding: calc(106 / var(--width) * 100%) calc(96 / var(--width) * 100%);
}
.coupon-container .benefit-template li .coupon-notice{
	display: none;
  	border-top: 1px dashed #ddd;
}
.coupon-container .benefit-template li + li{
	border-top: 1px dashed #ddd;
}
.coupon-container .benefit-template li a[id*="couponBtn"], .coupon-container .benefit-template li #authCertButton{
	position: absolute;
	top: calc(440 / var(--width) * 100%);
	right: calc(90 / var(--width) * 100%);
	width: calc(150 / var(--width) * 100%);
	height: calc(480 / var(--width) * 100%);
	cursor: pointer;
}

.coupon-container .benefit-template li .notice-btn {
    position: absolute;
    top: calc(540 / var(--width) * 100%);
    left: calc(420 / var(--width) * 100%);
    width: calc(320 / var(--width) * 100%);
    height: calc(480 / var(--width) * 100%);
}
.coupon-container .benefit-template li.open .coupon-notice{
	display: block;
}

.coupon-container .secret-list{
	position: absolute;
	top: calc(25 / var(--width) * 100%);
	left: 50%;
	width: calc(520 / var(--width) * 100%);
	height: calc(1260 / var(--width) * 100%);
	transform: translateX(-50%);
}
.coupon-container .secret-list ul{
	display: flex;
	flex-direction: column;
}
.coupon-container .secret-list li{
	position: relative;
	height: 130px;
}
.coupon-container .secret-list li a[id*="secretBtn"] {
    position: absolute;
    top: 40px;
    right: 30px;
    width: 54px;
    height: 54px;
    cursor: pointer;
}
.coupon-container .secret-list #secretAllBtn{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 95px;
    cursor: pointer;
}

.coupon-container .benefit-template.cgv-ticket{
  	background: #f4ffc7;
}
.coupon-container .benefit-template.cgv-ticket .cgv-cnt{
	overflow: hidden;
    display: inline-block;
    width: calc(520 / var(--width) * 100%);
    background-color: #fff;
    border-radius: 25px;
}
.coupon-container .benefit-template.cgv-ticket .cgv-cnt ul{
	width: 100%;
	border-radius: 0;
}
.coupon-container .benefit-template.cgv-ticket li{
	border-top: 1px dashed #ddd;
}
.coupon-container .benefit-template.cgv-ticket li .coupon-list {
    padding: calc(106 / var(--width) * 100%) calc(71 / var(--width) * 100%);
}
.coupon-container .benefit-template.cgv-ticket li .notice-btn {
    top: calc(670 / var(--width)* 100%);
    left: calc(380 / var(--width)* 100%);
    width: calc(220 / var(--width)* 100%);
    height: calc(280 / var(--width)* 100%);
}
.coupon-container .benefit-template.cgv-ticket .ticket-get{
	position: absolute;
	display: flex;
	top: calc(330 / var(--width) * 100%);
	right: calc(80 / var(--width) * 100%);
	width: calc(260 / var(--width) * 100%);
	height: calc(710 / var(--width) * 100%);
	flex-direction: column;
  	justify-content: flex-end;
	z-index: 1;
}
.coupon-container .benefit-template.cgv-ticket a[id*="couponBtn"],
.coupon-container .benefit-template.cgv-ticket a[id*="couponConfirm"]{
	position:static;
	width: 100%;
	height: 50%;
}
.coupon-container .benefit-template.cgv-ticket .coupon-end:after{
	content:'선착순 마감';
  	position: absolute;
  	top: calc(335 / var(--width) * 100%);
    right: calc(70 / var(--width) * 100%);
    width: calc(270 / var(--width) * 100%);
    height: calc(350 / var(--width) * 100%);
	background-repeat: no-repeat;
    background-position: 0 0;
    background-size: 100% auto;
    background-image: url(/kr/event/2024/03/04_coupon_pack/images/btn_cgv_end.png);
  	text-indent:-9999px;
  	z-index: 1;
}
.coupon-container .benefit-template.cgv-ticket .coupon-end a[id*="couponBtn"]{
	display: none;
}
@media screen and (max-width: 1460px){
	.coupon-container .secret-list li{
        height: 8.75vw;
    }
    .coupon-container .secret-list li a[id*="secretBtn"] {
        top: 2.8vw;
        right: 2.1vw;
        width: 3.4vw;
        height: 3.4vw;
    }
    .coupon-container .secret-list #secretAllBtn{
        height: 6.2vw;
    }
}
@media screen and (max-width: 767px){
    * {
		--width: 720;
	}

	#couponRecivePop {
        left: 50% !important;
        top: 50% !important;
        height: auto;
        min-height: auto !important;
        transform: translate(-50%, -50%) !important;
        width: 80%;
        padding: 4.5vw;
    }
	#couponRecivePop .pc {
        display: none;
    }
    #couponRecivePop .mobile {
        display: block;
    }
	#couponRecivePop .copy-area {
	    bottom: 17.1vw;
	    width: 62.1vw;
	    height: 10.1vw;
	}
	#couponRecivePop .copy-area input{
		font-size: 3.6vw;
	}
	#couponRecivePop .copy-area button {
	    width: 4.25vw;
	    height: 4.25vw;
	    background-image: url(/kr/event/2024/03/04_coupon_pack/images/m_btn_copy.png);
	}
	#couponRecivePop .btn-close {
	    width: 10.2vw;
	    height: 10.2vw;
	    background-image: url(/kr/event/2024/03/04_coupon_pack/images/m_popup_ticket_close.png);
	}
	#confirmPopup colgroup, #confirmPopup thead{
		display: none;
	}
	#confirmPopup td{
		position:relative;
		display: block;
		border-left: 0;
		padding-left: 110px;
	}
	#confirmPopup td:first-child{
		border-top: 1px solid #d8d8d8;
		border-right: 0;
	}
	#confirmPopup td:before{
		content:'쿠폰명';
		display: flex;
		position:absolute;
		top:0;
		left:0;
		width: 100px;
		height: 100%;
		align-items: center;
		justify-content: center;
		background-color: #f4f4f4;
		z-index:1;
	}
	#confirmPopup td:nth-child(2):before{
		content:'쿠폰번호';
	}
	#confirmPopup td:nth-child(3):before{
		content:'발급일';
	}
	#confirmPopup .btn-copy {
	    width: 4.25vw;
	    height: 4.25vw;
	    background-image: url(/kr/event/2024/03/04_coupon_pack/images/m_btn_copy.png);
	}
	.coupon-container .benefit-template ul{
		width: calc(600 / var(--width) * 100%);
	}
	.coupon-container .benefit-template li .coupon-list{
		position: relative;
		padding: 7vw 3.5vw;
	}
	.coupon-container .benefit-template li .coupon-notice{
		display: none;
	  	border-top: 1px dashed #ddd;
	}
	.coupon-container .benefit-template li + li{
		border-top: 1px dashed #ddd;
	}
	.coupon-container .benefit-template li a[id*="couponBtn"], .coupon-container .benefit-template li #authCertButton{
		top: 7.5vw;
		right: 3.8vw;
		width: 10vw;
		height: 10vw;
	}
	
	.coupon-container .benefit-template li .notice-btn {
	    top: 11vw;
	    left: 24vw;
	    width: 30vw;
	    height: 7vw;
	}

	.coupon-container .secret-list{
        width: calc(605 / var(--width) * 100%);
        height: calc(635 / var(--width) * 100%);
    }
    .coupon-container .secret-list li{
        height: 24vw;
    }
    .coupon-container .secret-list li a[id*="secretBtn"] {
        top: 6.4vw;
        right: 4.1vw;
        width: 10.4vw;
        height: 10.4vw;
    }
    .coupon-container .secret-list #secretAllBtn{
        height: 17.2vw;
    }
    
    .coupon-container .benefit-template.cgv-ticket .cgv-cnt {
        width: calc(600 / var(--width) * 100%);
    }
	.coupon-container .benefit-template.cgv-ticket li{
    	border-top: 0;
    }
	.coupon-container .benefit-template.cgv-ticket li .coupon-list {
        padding: 0;
    }
	.coupon-container .benefit-template.cgv-ticket li .notice-btn {
	    top: 14.3vw;
        left: 21vw;
        width: 20vw;
        height: 7vw;
	}
	.coupon-container .benefit-template.cgv-ticket .ticket-get {
	    top: 0;
	    right: 0;
	    width: calc(200 / var(--width) * 100%);
	    height: 100%;
	}
	.coupon-container .benefit-template.cgv-ticket .coupon-end:after{
        top: 0;
        right: 0;
        width: 23vw;
    	height: 12.5vw;
        background-image: url(/kr/event/2024/03/04_coupon_pack/images/m_btn_cgv_end.png);
    }
}