@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;}
}



/* CTM-512162 : ARA -- 주문페이지 입력쿠폰 레이어 */
.Billcoupon_List {padding-bottom:20px;}
.Billcoupon_List dl {display:flex; justify-content:space-between; align-items:center; flex-direction:row;}
.Billcoupon_List dl+dl {margin-top:10px; border-top:1px solid #f2f2f2; padding-top:10px;}
.Billcoupon_List dt {font-size:14px; color:#000; font-weight:500; flex:1;}
.Billcoupon_List dd {display:flex; justify-content:flex-end; align-items:center; flex-direction:row; gap:5px; width:130px; position:relative;}
.Billcoupon_List .name {font-size:14px; color:#000; font-weight:500;}
.Billcoupon_List .name em {color:#999; font-weight:500;}
.Billcoupon_List .now {font-size:12px; color:#0065e3; font-weight:500; margin-top:3px;}
.Billcoupon_List .input_design {flex:1; text-align:right; padding-right:23px; border-radius:5px; font-size:15px; height:40px; font-weight:600; color:#0065e3;}
.Billcoupon_List .input_design:not(:placeholder-shown) {background:#0065e310; border-color:#0065e326;}
.Billcoupon_List .input_design:not(:placeholder-shown)+ .btn_reset {display:flex;}
.Billcoupon_List .unit {font-size:13px; color:#999; position:absolute; right:10px; pointer-events:none;}
.Billcoupon_List .btn_reset {position:absolute; left:5px; display:flex; justify-content:center; align-items:center; flex-direction:column; padding:5px; display:none;}
.Billcoupon_List .btn_reset:before {content:""; width:15px; height:15px; background:#666 url('../images/c_img/ic_close_sm_white.svg') center center no-repeat; background-size:7px !important; border-radius:100px;}

.c_layer .final_price {padding-top:10px; border-top:2px solid #222;}
.c_layer .final_price ul {display:flex; justify-content:flex-end; align-items:center; flex-direction:row; gap:10px;}
.c_layer .final_price li {font-size:15px; color:#999; font-weight:500;}
.c_layer .final_price li.if_over {}
.c_layer .final_price li.if_over strong {color:#e10000;}
.c_layer .final_price strong {color:#000; font-weight:700;}
.c_layer .final_price .warning {font-size:12px; color:#e10000; font-weight:500; margin-top:5px; text-align:right}


/* CTM-512162 : ARA -- 사용내역 추가 */
.DataList {margin-top:15px;}
.DataList li {display:flex; justify-content:center; align-items:flex-start; flex-direction:row; gap:10px}
.DataList li+ li {margin-top:15px; border-top:1px solid #f2f2f2; padding-top:15px;}
.DataList .order_info {display:flex; justify-content:center; align-items:flex-start; flex-direction:column; gap:5px; flex:1}
.DataList .order_items {color:#333; font-weight:500; font-size:13px; flex:1; display:flex; justify-content:flex-start; align-items:flex-start; flex-direction:row; flex-wrap:wrap; gap:5px}
.DataList .order_items strong {color:#000; font-weight:600; display:inline-block;}
.DataList .use_price {font-size:14px; color:#000; font-weight:600; font-variant:tabular-nums;}
.DataList .use_price.type_minus {color:#e10000;}
.DataList .use_price.type_plus {color:#0065e3;}
.DataList .date {color:#999; font-weight:500;}

.c_layer.layer_voucher_detail .wrapping {min-height:400px;}