@charset "UTF-8";



@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap');
html, body {
	margin: 0;
	padding:0;
	box-sizing: border-box;
	height: 100%;
	font-family: 'Noto Sans KR';

	width: 100%;
	max-width: 700px;
    margin-left: auto;
    margin-right: auto;
	font-size: clamp(16px, 4vw, 24px);
	background-color : #888;
}
#popupLayer01{
	max-width: 700px;
}

.usr-qr{
	display: flex;
	width: 100%;
	min-height: 100%;
	flex-direction: column;
	align-items: flex-start;
	background-color: #fff;
	max-width: 720px;
	margin:0 auto;
	box-sizing: border-box;
	padding-top: 6rem;
	background-color:#f4f8ff;
	
}

.usr-qr a{
	font-style: normal;
	text-decoration: none ;
    border: 0;
    outline: 0;
    color: inherit;
}

.usr-qr *{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
.usr-qr .qrCamera{
    position: relative;
	max-width: 100%;	
    object-fit: contain;
    width: 70%;
    
  display: flex;
  justify-content: center; /* 가로 정렬 */
  align-items: center;     /* 세로 정렬 */
  
}
.usr-qr img{ width:95%;height:95%;
}
.usr-qr .qrCamera2{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.4); /* 반투명 오버레이 예시 */
  z-index: 10;          /* 이미지 위에 위치 */
  border-radius: 1rem;
}

.usr-qr h1{
	font-size: 1.2rem;
	background-color: #fff;
	display: flex;
	flex-direction: row;
	column-gap: 5vw;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: 1rem 0 1rem 1.2rem;
	position: fixed;
	top:0;
	/*left: 0;*/
	font-weight: 700;
	z-index: 9997;
	
	left: 50%;
	transform: translate(-50%);
	max-width: 700px;
    margin-left: auto;
    margin-right: auto;
}

.usr-qr h1 button{
	max-width: 7vw;
	border: none;
	background-color: #fff;
	margin-right: 1rem;
}

.usr-qr.cus-modal{
	background-color: rgba(100,100,100,1);
}

.usr-qr .cus-pop{
	position: fixed;
	top:50%;
	left: 50%;
	transform: translate(-50%,-50%);
	display: flex;
	flex-direction: column;
	row-gap: 7vw;
	padding: 10vw 5vw 5vw 5vw;
	background-color: #fff;
	border-radius: 5vw;
	width: 100%;
	max-width: 90%;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.usr-qr .cus-pop h3{
	font-size: 1rem;
	font-weight: 500;
	font-weight: 400;
}

.usr-qr .cus-btn{
	background-color:#0055ff;
	color: #fff;
	font-weight: 500;
	font-size: 1.2rem;
	width: 100%;
	border-radius: 0.65rem;
	padding: 1rem 0.25rem;
	border: none;
	text-align: center;
}

.usr-qr .cus-btn.small{
	font-size: 0.9rem;
	padding: 3vw 1vw;
}

.usr-qr .cus-btn.cus-white{
	background-color: #fff;
	color:#333;
	border: 1px solid #333;
}

.usr-qr .usr-button-list{
	display: flex;
	flex-direction: row-gap;
	column-gap: 1rem;
	align-items: center;
	justify-content: space-around;
	width: 100%;
}


.usr-qr .cus-cont{
	display: flex;
	flex-direction: column;
	row-gap: 1.5rem;
	align-items: center;
	justify-content: flex-start;
	padding: 1.4rem 1.4rem;
	border-radius: 1.4vw;
	width: 100%;
	margin: 0 auto;
	padding-bottom: 4rem;
	background-color:#f4f8ff;
}

.usr-qr .cus-box{
	display: flex;
	flex-direction: column;
	row-gap: 2rem;
	align-items: center;
	justify-content: flex-start;
	padding: 1rem 1.5rem;
	border-radius: 0.65rem;
	background-color: #fff;
	border: 1px solid #d7e2ff;
	width: 100%;
	margin: 0 auto;
	/*box-shadow: 10px 10px 24px 0px rgba(176,164,164,0.75);
	-webkit-box-shadow: 10px 10px 24px 0px rgba(176,164,164,0.75);
	-moz-box-shadow: 10px 10px 24px 0px rgba(176,164,164,0.75);*/
	max-width: 100%;
}


.usr-qr h3.mbrbNm{
	font-size : 1.2rem;
	color : #666666;
}
.usr-qr h3.mbrbNm span{
	color : #000000;
}



.usr-qr .height-transition {
	transition: height 0.5s ease; 
	overflow: hidden;
	display: flex;
}

.usr-qr .height-transition.hide {
    height: 0;
    padding: 0;
    border: none;
	display: none;
}

.usr-qr .cus-box.n2{
	flex-direction: row;
	column-gap: 1rem;
}


.usr-qr.cus-step-1 .cus-box.n2{
	margin-top: 2rem;
}

.usr-qr.cus-step-1 h3{
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0;
	padding: 0;
	width:100%;
}

.usr-qr.cus-step-1 input{
	width: 100%;
	padding: 1rem ;
	text-align: center;
	border-radius: 0.5rem;
	border:2px solid #0055ff;
	font-size: 1.2rem;
	box-sizing: border-box;
}

.usr-qr.cus-step-1 .cus-box.n2 > div{
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;
}

.usr-qr.cus-step-1 .cus-box.n2 > div:nth-child(1){
	flex:1 1 65%;
}

.usr-qr.cus-step-1 .cus-box.n2 > div h4{
	font-size: 0.9rem;
	font-weight: 700;
}

.usr-qr.cus-step-1 .cus-box.n2 > div a{
	font-style: normal;
	text-decoration: none ;
    border: 0;
    outline: 0;
    color: inherit;
}

.usr-qr.cus-step-1 .cus-box.n2 > div a.d1{
	font-size: 1.3rem;
	font-weight: 700;
}

.usr-qr.cus-step-1 .cus-box.n2 > div:nth-child(2){
	flex:1 1 35%;
}

.usr-qr.cus-step-1 .cus-box.n2 dl{
	font-size: 1rem;
	color: #666666;
}

.usr-qr.cus-step-1 .cus-box.n2 dl > dt{
	display: inline-block;
}

.usr-qr.cus-step-1 .cus-box.n2 dl > dd{
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: #666666;
}

.usr-qr.cus-step-1 .cus-box.n2 > div a.d2{
	color: #fff;
	margin-top: 1rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	max-width: 8rem;
}

.usr-qr.cus-step-1 .cus-box.d2{
	border: none;
}

.usr-qr.cus-step-1 .cus-box.d2 h3{
	font-size: 1.3rem;
	font-weight: 700;
	text-align: left;
	width: 100%;
}

.usr-qr.cus-step-1 .cus-box.d2 ol{
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
} 

.usr-qr.cus-step-1 .cus-box.d2 ol > li{
	list-style-type: numeric;
	list-style-position: outside;
	margin-left: 1.5rem;
	font-size: 0.9rem;
	font-weight: 400;
	color: #666666;
	letter-spacing: -0.02em;
}

.usr-qr.cus-step-3 img{
	width: 100%;
}

.usr-qr.cus-step-3 .cus-cont button{
	margin-top: 1rem;
}

.usr-qr.cus-step-4{
	padding-top: 2.5rem;
	background-color: #fff;
}

.usr-qr.cus-step-4 .cus-cont{
	background-color: #fff;
	padding-left: 0;
	padding-right: 0;
}

.usr-qr.cus-step-4 .cus-cont > *:nth-child(1){
	background: #0055ff;
	background: linear-gradient(90deg,#0055ff 0%, #7321e8 80%);
	background: -webkit-linear-gradient(90deg,#0055ff 0%, #7321e8 80%);
	background: -moz-linear-gradient(90deg,#0055ff 0%, #7321e8 80%);
	width: 100%;
	display: flex;
	position: relative; 
	flex-direction: column;
	row-gap: 1.5rem;
	align-items: center;
	justify-content: center;
	color: #fff;
	padding: 3.5rem 0 4rem;
	color: #fff;
	
}

.usr-qr.cus-step-4 .cus-cont > *:nth-child(1) h2{
	font-size: 1.3rem;	
    margin-top: -2rem;
    margin-bottom: 0rem;
	text-align: center;
	padding-left : 3rem;
	padding-right : 3rem;
}

.usr-qr.cus-step-4 .cus-cont p{
	font-size: 1rem;	
	font-weight: 700;
	text-align: center;
	color: #333;
}

.usr-qr.cus-step-4 .cus-cont p span{
	font-weight: 400;
	display: block;
	text-align: center;
}

.usr-qr.cus-step-4 .cus-box{
	background: #F4F8FF;
	border: none;
	flex-direction: row;
	column-gap: 0.5rem;
	align-items: center;
	justify-content: space-between;
	max-width:90%;
}

.usr-qr.cus-step-4 .cus-box > *:nth-child(1){
	flex:1 1 60%;
}

.usr-qr.cus-step-4 .cus-box > *:nth-child(2){
	
	flex:1 1 40%;
}

    
#reader video {
 	border-radius: 20px; /* 원하는 만큼 조절 */
    overflow: hidden;
    width: 100% !important;
    height: 100% !important;
	object-fit: cover  !important;
}
#reader{border-radius: 20px;}
#qr-shaded-region{border-radius: 20px;}
.gpsInfo { 	
	font-size:0.8rem;
  	position: absolute;      /* 부모 기준으로 위치 고정 */
	bottom: 0;
	right: 0;
	padding: 10px;
	color: white;
}
  	

.usr-qr.cus-step-4 .cus-box > dl{
	display: flex;
	flex-direction: column;
	row-gap: 0.3rem;
	align-items: flex-start;
	justify-content: center;
	font-size: 0.9rem;
	font-weight: 700;
}

.usr-qr.cus-step-4 .cus-box > dl > dd{
	font-size: 1.2rem;
}

.usr-qr.cus-step-4 .cus-cont > *:nth-child(2){
	max-width: 90%;
	margin-bottom: 0rem;
}

.swal2-html-container{font-size: 1rem;font-weight: 400;}


	.swal2-container {z-index: 9999 !important;}
	
	#pwaPop {all:unset;}
	#pwaPop .dim { background:rgba(0, 0, 0, 0.1) !important; } 
	#pwaPop .dim_inactivate { background: rgba(0, 0, 0, 0.6) !important; pointer-events:none; } 
	#pwaPop .dim { position:fixed; left:0; top:0; z-index:1001; width:100%; height:100%; } 
	#pwaPop .dim_inactivate { position:fixed; left:0; top:0; z-index:1001; width:100%; height:100%; } 
	#pwaPop { word-break:keep-all; line-height: 1.2; position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; } 
	#pwaPop .dim { display:block; position:fixed; left:0; top:0; z-index:1001; width:100%; height:100%; } 
	#pwaPop .pop_con {max-height: calc(100% - 60px); overflow-y: auto; position: fixed; top: 50%; left:50%; right:unset; z-index: 1002; width: 640px; border-radius: 1rem; padding:40px 30px; -webkit-transform:translate(-50%, -50%); -o-transform:translate(-50%, -50%); -moz-transform:translate(-50%, -50%); transform:translate(-50%, -50%); } 
	#pwaPop .pop_con .con{text-align: center;}
	#pwaPop .btn_pop_close { width:28px; height:28px; text-indent: -9999px; position: absolute; top: 24px; right: 24px; background: url(../../static/images/event/membership/btn_popclose.png) 0 0 / 100% 100% no-repeat;} 
	#pwaPop .btn_check{display: flex; align-items: center; justify-content: center; width: fit-content; height: 50px; color: #fff; font-size: 24px; font-weight: 700; background-color: #303030; border-radius: 1rem; padding: 0 32px; margin: 32px auto 0;}

	#pwaPop .pop_con{background: #FFD135;}
	#pwaPop h3{font-size: 38px; font-weight: 700;}
	#pwaPop .info{background-color: #fff; margin-top: 80px; position: relative; padding: 0 32px;}
	#pwaPop .info::before{content: ''; position: absolute; top: -47px; left: 0; display: block; width: 100%; height: 48px; background: url(../../static/images/event/membership/storebg_top.png) 0 0 / 100% 100% no-repeat;}
	#pwaPop .info li{padding: 16px 0; display: flex; align-items: center; border-bottom: 1px solid #e2e2e2; text-align: left;}
	#pwaPop .info li.yes_btn p{display: flex; align-items: center; justify-content: space-between;}
	#pwaPop .info li:last-child{border-bottom: none;}
	#pwaPop .info span{width: 108px; font-size: 14px; color: #676767; font-weight: 500;}
	#pwaPop .info p{flex: 1; font-size: 16px; font-weight: 500;}
	#pwaPop .info .btn_storeinfo{height: 30px; line-height: 30px; padding: 0 12px; background-color: #00A14E; border-radius: 1rem; font-size: 12px; color: #fff; font-weight: 700;}
	#pwaPop .code{background-color: #FA6025; position: relative; padding: 24px 32px 8px; margin-bottom: 85px;}
	#pwaPop .code::after{content: ''; position: absolute; bottom: -53px; left: 0; display: block; width: 100%; height: 54px; background: url(../../static/images/event/membership/storebg_bottom.png) 0 0 / 100% 100% no-repeat;}
	#pwaPop .code p{font-size: 18px; font-weight: 500; color: #fff; letter-spacing: -0.01em; margin-bottom: 16px;}
	#pwaPop .code input{width: 100%; padding: 25px 0; text-align: center; background-color: #FFF7DB; border-radius: 1rem; font-size: 17px; color: #676767;}
	#pwaPop .code input::-webkit-input-placeholder{color: #676767 !important; font-size: 17px;}
	#pwaPop .layer_wrap .btn_check{display: flex; align-items: center; justify-content: center; width: fit-content; height: 50px; color: #fff; font-size: 24px; font-weight: 700; background-color: #303030; border-radius: 1rem; padding: 0 32px; margin: 32px auto 0;}

	@media screen and (max-width:1023px){
	    #pwaPop .pop_con{padding: 32px 4.167% 24px;}
	    #pwaPop h3{font-size: 20px;}
	    #pwaPop .info{padding: 0 16px; margin-top: 13.793%;}
	    #pwaPop .info::before{top: -23px; height: 24px; background: url(../../static/images/event/membership/storebg_top_mo.png) 0 0 / 100% 100% no-repeat;}
	    #pwaPop .info li{padding: 16px 0;}
	    #pwaPop .info li:first-child{padding-top: 8px;}
	    #pwaPop .info li:last-child{padding-bottom: 24px;}
	    #pwaPop .info span{width: 64px; font-size: 12px;}
	    #pwaPop .info p{font-size: 14px;}
	    #pwaPop .info li.yes_btn p{flex-direction: column; align-items: baseline;}
	    #pwaPop .info .btn_storeinfo{border-radius: 1rem; font-size: 12px; padding: 0 8px; height: 26px; line-height: 26px; margin-top: 6px;}
	    #pwaPop .code{padding: 16px 11px 4px; margin-bottom: 15.172%;}
	    #pwaPop .code::after{bottom: -23px; height: 24px; background: url(../../static/images/event/membership/storebg_bottom_mo.png) 0 0 / 100% 100% no-repeat;}
	    #pwaPop .code p{font-size: 12px; margin-bottom: 8px;}
	    #pwaPop .code input{padding: 16px 0; font-size: 12px;}
	    #pwaPop .code input::-webkit-input-placeholder{font-size: 12px;}
	    
	    #pwaPop { position:fixed; left:0; top:0; z-index:1000; width:100%; height:100%; } 
	    #pwaPop .btn_pop_close { position:absolute; top:16px; right:16px; z-index:101; width:18px; height:18px; background:url(../../static/images/event/membership/btn_popclose_mo.png) 0 0 / 100% 100% no-repeat } 
	    #pwaPop .pop_con {left: 50%; right: auto; transform: translate(-50%, -50%); padding:32px 4.167% 24px; border-radius:16px; width: auto; min-width: 320px; max-width: 640px; max-height: calc(100% - 20px);} 
	    #pwaPop .btn_wrap { gap:8px; } 
	    #pwaPop .pop_con.type_border { border:1px solid #000; } 
	    #pwaPop .btn_check{height: 40px; font-size: 14px; margin-top: 8.276%; padding: 0 8.276%;}
    }
    
    /* step01Pwa */    
    #authCd{ width:100%;box-sizing: border-box;}    
    #btnAuthStep01Pwa { width:100%;justify-content: center;}
    #btnAuthStep02Pwa { width:100%;justify-content: center;}
    
.swal2-styled.swal2-confirm{background-color:#0000ff !important;}
.swal2-actions button {min-width: 30%;}
.swal2-actions {width:100% !important;}


#popupLayer01 {border-radius: 1.2rem;}

.layer-pop{
	padding: 1.5rem 1.5rem 1.5rem 1.5rem;
	max-width: 90%;
	align-items: center;
	justify-content: center;
	text-align: center;
	row-gap: 1.5rem;
	display:flex;
	flex-direction: column;
}

.layer-pop * {
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}

.layer-pop .cus-btn {
    background-color: #0055ff;
    color: #fff;
    font-weight: 500;
    font-size: 1.2rem;
    width: 100%;
    border-radius: 2vw;
    padding: 0.7rem 0.25rem;
    border: none;
    text-align: center;
}
.layer-pop .cus-btn.cus-white {
    background-color: #fff;
    color: #333;
    border: 1px solid #333;
}
.layer-pop .usr-button-list {
    display: flex;
    flex-direction: row-gap;
    column-gap: 1rem;
    align-items: center;
    justify-content: space-around;
    width: 100%;
}

.layer-pop h3{
	font-size: 1rem;
	font-weight: 400;
}



.usr-qr.cus-step-3 .cus-box.d2{
	border: none;
}
.usr-qr.cus-step-3 .cus-box.d2 h3{
	font-size: 1.3rem;
	font-weight: 700;
	text-align: left;
	width: 100%;
}
.usr-qr.cus-step-3 .cus-box.d2 ol{
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
}
.usr-qr.cus-step-3 .cus-box.d2 ol > li{
	list-style-type: numeric;
	list-style-position: outside;
	margin-left: 1.5rem;
	font-size: 0.9rem;
	font-weight: 400;
	color: #666666;
	letter-spacing: -0.02em;
}

.usr-qr .cus-box.n2{
	flex-direction: row;
	column-gap: 1rem;
}


.usr-qr.cus-step-3 .cus-box.n2{
	margin-top: 2rem;
}

.usr-qr.cus-step-3 h3{
	font-size: 1.4rem;
	font-weight: 700;
	margin: 0;
	padding: 0;
}

.usr-qr.cus-step-3 input{
	width: 100%;
	padding: 1rem ;
	text-align: center;
	border-radius: 0.5rem;
	border:2px solid #0055ff;
	font-size: 1.2rem;
	box-sizing: border-box;
}

.usr-qr.cus-step-3 .cus-box.n2 > div{
	display: flex;
	flex-direction: column;
	row-gap: 0.5rem;
}

.usr-qr.cus-step-3 .cus-box.n2 > div:nth-child(1){
	flex:1 1 65%;
}

.usr-qr.cus-step-3 .cus-box.n2 > div h4{
	font-size: 0.9rem;
	font-weight: 700;
}

.usr-qr.cus-step-3 .cus-box.n2 > div a{
	font-style: normal;
	text-decoration: none ;
    border: 0;
    outline: 0;
    color: inherit;
}

.usr-qr.cus-step-3 .cus-box.n2 > div a.d1{
	font-size: 1.3rem;
	font-weight: 700;
}

.usr-qr.cus-step-3 .cus-box.n2 > div:nth-child(2){
	flex:1 1 35%;
}

.usr-qr.cus-step-3 .cus-box.n2 dl{
	font-size: 1rem;
	color: #666666;
}

.usr-qr.cus-step-3 .cus-box.n2 dl > dt{
	display: inline-block;
}

.usr-qr.cus-step-3 .cus-box.n2 dl > dd{
	display: inline-block;
	font-size: 0.9rem;
	font-weight: 400;
	letter-spacing: -0.02em;
	color: #666666;
}

.usr-qr.cus-step-3 .cus-box.n2 > div a.d2{
	color: #fff;
	margin-top: 1rem;
	padding-left: 0.5rem;
	padding-right: 0.5rem;
	max-width: 8rem;
}


.swal2-popup{
	border-radius: 1.2rem !important;
}

/* 숨김용 클래스 */
.hiddendiv {
  display: none !important;
}



#popupLayer02 {border-radius: 1.2rem; border: 1px solid #ccc; margin-top:1rem;}
#popupLayer02 .term .term_title{font-size:0.9rem; font-weight:600;}
#popupLayer02 .term .term_title2{font-size:0.8rem;}
#popupLayer02 .term .term_info{font-size:0.75rem; padding:0.3rem;}
#popupLayer02 .term .term_message{font-size:0.9rem;text-align: left;}
#popupLayer02 .term .term_message textarea{font-size:0.7rem;font-family: 'Noto Sans KR'; border: 1px solid #ccc; height: 4rem;margin-top:0.9rem; width:100%;padding:0.4rem;}
#popupLayer02 .term .term_message .termarea{
			overflow: auto;
			font-size:0.7rem;font-family: 'Noto Sans KR'; border: 1px solid #ccc; height: 4rem;
			margin-top:0.9rem; margin-bottom:0.5rem; width:100%;padding:0.4rem;
}

#popupLayer02 .term .term_message span{padding-left:0.5rem; font-size:0.8rem;vertical-align: top;}