@charset "utf-8";

/*
	[디자인팀 맞춤제작 및 수정 CSS]

	copyright(c) 상상너머·원데이넷 all rights reserved.
	허용된 라이센스이외 무단도용재배포를 금합니다.
	본 소스는 모두 (주)상상너머의 지적 재산이며, 이에 대해 무단도용 및 수정 재배포/재편집등을 절대 금하며 적발 시 법적 대응을 할 것임을 경고합니다.

	※ css 추가 시, 반드시 날짜와 작업자 이니셜을 기재바랍니다.

	===============================================================================
	반응형으로 제작되어 임의적인 CSS추가는 문제가 될 수 있으니 디자인팀과 반드시 상의바랍니다.
	===============================================================================
*/

/* 달력옵션 품절추가 */
.p_Vcalendar .calendar li {position:relative;}
.p_Vcalendar .day {padding:8px;}
.p_Vcalendar .no .soldout {position:absolute; left:50%; bottom:-5px; font-size:11px; color:#999; transform:translateX(-50%);}



/* PTC-506194 : ARA -- 티켓큐알코드 발급페이지 */
.Ticket_Qrcode {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; box-sizing:border-box; padding:20px; overflow-y:auto; background:#F2F2F5; height:100%;}
.Ticket_Qrcode .wrapping {background:#fff; border-radius:20px; margin:0 auto; width:100%; box-sizing:border-box; flex:1; display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column;}
.Ticket_Qrcode .wrapping {overflow:hidden;}
.Ticket_Qrcode .content {flex:1; display:flex; justify-content:center; align-items:stretch; flex-direction:column;}
.Ticket_Qrcode .bottom_ctrl {flex:none; display:flex; justify-content:center; align-items:center; flex-direction:row; margin-top:15px;}
.Ticket_Qrcode .bottom_ctrl .btn_view {background:#0065e3; color:#fff; display:flex; justify-content:center; align-items:center; flex-direction:column; height:60px; font-size:17px; font-weight:500; text-align:center;}
.Ticket_Qrcode .bottom_ctrl .btn_view {font-variant-numeric:tabular-nums; flex:1; box-sizing:border-box; position:relative; overflow:hidden;}
.Ticket_Qrcode .bottom_ctrl .btn_view.type_none {background:#0065e340;}
.Ticket_Qrcode .bottom_ctrl .btn_view stong,
.Ticket_Qrcode .bottom_ctrl .btn_view em {display:flex; justify-content:center; align-items:center; flex-direction:column; height:100%;}
.Ticket_Qrcode .bottom_ctrl .btn_view strong {font-size:18px; font-weight:600; animation:mv_text_first 3.5s ease infinite; animation-fill-mode:forwards;}
.Ticket_Qrcode .bottom_ctrl .btn_view em {position:absolute; left:0; width:100%; animation:mv_text_second 3.5s ease infinite; animation-fill-mode:forwards;}
.Ticket_Qrcode .bottom_ctrl .btn_view.if_fixday * {animation:none;}
.Ticket_Qrcode .bottom_ctrl .btn_view.if_fixday em {opacity:1;}
@keyframes mv_text_first {
	0% {opacity:1;}
	50% {opacity:1;}
	60% {opacity:0;}
	80% {opacity:0;}
	100% {opacity:1;}
}
@keyframes mv_text_second {
	0% {opacity:0;}
	50% {opacity:0;}
	60% {opacity:1;}
	80% {opacity:1;}
	100% {opacity:0;}
}

.Ticket_Qrcode .user_info {box-sizing:border-box; text-align:center; font-weight:600; color:#000; font-size:18px; padding:15px; border-bottom:2px dashed #e5e5e5; position:relative;}
.Ticket_Qrcode .user_info .from {font-size:14px; color:#999; margin-top:8px; font-weight:500;}
.Ticket_Qrcode .user_info:before {content:""; width:20px; height:20px; background:#F2F2F5; border-radius:100px; position:absolute; left:-10px; bottom:-11px;}
.Ticket_Qrcode .user_info:after {content:""; width:20px; height:20px; background:#F2F2F5; border-radius:100px; position:absolute; right:-10px; bottom:-11px;}

.Ticket_Qrcode .qr_code {text-align:center; display:flex; justify-content:center; align-items:center; flex-direction:column;}
.Ticket_Qrcode .qr_code .code_img {display:flex; justify-content:center; align-items:center; flex-direction:column; position:relative; box-sizing:border-box; aspect-ratio:1/1; width:180px; background:#f5f5f5;}
.Ticket_Qrcode .qr_code .code_img {background:transparent url('../images/c_img/qr_load.gif') center center no-repeat; background-size:80px !important;}
.Ticket_Qrcode .qr_code .code_img img {width:100%; display:block; max-width:200px}
.Ticket_Qrcode .qr_code .code_num { color:#aaa; font-size:14px; margin-top:5px;}
.Ticket_Qrcode .qr_code .code_state {position:absolute; z-index:10; width:80px; height:80px; text-align:center; backdrop-filter:blur(1px); background-color:rgba(0,0,0,0.8);}
.Ticket_Qrcode .qr_code .code_state {border-radius:100px; box-sizing:border-box; display:flex; flex-direction:row; justify-content:center; align-items:center;}
.Ticket_Qrcode .qr_code .code_state {font-size:16px; color:#fff; line-height:1.2;}
.Ticket_Qrcode .qr_code .code_state.type_expire {background-color:rgba(255,0,0,0.8);}
.Ticket_Qrcode .qr_code .code_state.type_used {background-color:rgba(0,255,0,0.8);}
.Ticket_Qrcode .qr_code .expire_date {margin-top:10px; text-align:center; font-size:14px; color:#0065e3; border:1px solid #0065e340; padding:8px 12px; line-height:1; border-radius:100px; background:#0065e310;}

.Ticket_Qrcode .rollng_wrap {position:relative; overflow:hidden; width:100%; text-align:center; box-sizing:border-box;}
.Ticket_Qrcode .rollng_wrap .rolling_box {}
.Ticket_Qrcode .rollng_wrap .rolling_box li {display:flex; justify-content:center; align-items:center; flex-direction:column;}
.Ticket_Qrcode .rollng_wrap .btn_prevnext {position:absolute; top:50%; transform:translateY(-50%); width:40px; height:40px; background-repeat:no-repeat; background-position:center center; background-size:8px !important;}
.Ticket_Qrcode .rollng_wrap .btn_prevnext {margin-top:-15px; z-index:10}
.Ticket_Qrcode .rollng_wrap .btn_prevnext.prev {left:10px; background-image:url('../images/c_img/arrow_left.svg')}
.Ticket_Qrcode .rollng_wrap .btn_prevnext.next {right:10px; background-image:url('../images/c_img/arrow_right.svg')}

.Ticket_Qrcode .about_item {display:flex; justify-content:center; align-items:center; flex-direction:row; position:relative; padding:10px; border:1px solid #f2f2f2; margin:15px; border-radius:18px; margin-bottom:0px;}
.Ticket_Qrcode .about_item .thumb {overflow:hidden; width:55px; height:55px; border-radius:15px; flex:none}
.Ticket_Qrcode .about_item .thumb img {width:100%; height:100%; object-fit:cover;}
.Ticket_Qrcode .about_item .order_item {margin-left:10px; font-size:13px; line-height:1; flex:1}
.Ticket_Qrcode .about_item .order_item .item_name {color:#000; font-weight:500; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:1; -webkit-box-orient:vertical; display:-webkit-box;}
.Ticket_Qrcode .about_item .order_item .option {color:#59a3ff; margin-top:4px; font-size:12px; font-weight:500;}
.Ticket_Qrcode .about_item .order_item .volumn {color:#999; margin-top:5px;}

.Ticket_Qrcode .use_location {display:flex; justify-content:flex-start; align-items:stretch; flex-direction:column; padding:20px; padding-top:0px; background:#fff; border-radius:30px 30px 0 0; flex:1;}
.Ticket_Qrcode .use_location {overflow:hidden; width:100%; transition:all 900ms cubic-bezier(0.19, 1, 0.22, 1); position:relative; z-index:2; transform:translateY(100%); box-sizing:border-box;}
.Ticket_Qrcode .use_location .store {font-size:15px; color:#000; font-weight:500; flex:none}
.Ticket_Qrcode .use_location .address {font-size:14px; color:#999; margin-top:5px; flex:none}
.Ticket_Qrcode .use_location .map {background:#f2f2f5; border-radius:10px; margin-top:15px; flex:1; border:1px solid #ddd; box-sizing:border-box;}
.Ticket_Qrcode .use_location .btn_dock {height:40px; display:flex; justify-content:center; align-items:center; flex-direction:column; margin-bottom:10px;}
.Ticket_Qrcode .use_location .btn_dock:before {content:""; width:60px; height:4px; background:#ddd; border-radius:100px; display:block;}

.Ticket_Qrcode .layer_place {position:fixed; top:0; left:0; width:100%; height:100%; z-index:11; visibility:hidden; display:flex; justify-content:stretch; align-items:center; flex-direction:column;}
.Ticket_Qrcode .layer_place {padding-top:70px; box-sizing:border-box;}
.Ticket_Qrcode .layer_place .bg_close {width:100%; height:100%; position:absolute; top:0; left:0; z-index:1; background:rgba(0,0,0,0.6); opacity:0; transition:all 0.25s ease-out; pointer-events:none;}
.Ticket_Qrcode .layer_place.if_open {visibility:visible;}
.Ticket_Qrcode .layer_place.if_open .bg_close {opacity:1; pointer-events:auto;}
.Ticket_Qrcode .layer_place.if_open .use_location {transform:translateY(0);}

@media all and (min-width:500px) {
	.Ticket_Qrcode .wrapping {max-width:380px;}
	.Ticket_Qrcode .layer_place {justify-content:flex-end;}	
	.Ticket_Qrcode .use_location {max-width:680px; max-height:500px;}
}