.sr_only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0 } .blind { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0 } .clearfix:before,.clearfix:after { content: " "; display: table } .clearfix:after { clear: both } .hide { display: none !important; height: 0 !important } .inline { display: inline !important } .block { display: block !important } .inblock { display: inline-block } .img_border { z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0); border: 1px solid #000; opacity: .1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); vertical-align: top; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box } .img_top_border { z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-top: 1px solid #000; opacity: .1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); vertical-align: top; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box } .img_btm_border { z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-bottom: 1px solid #000; opacity: .1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=10)"; filter: alpha(opacity=10); vertical-align: bottom; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box } .img_bg_gra { z-index: 10; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(255,255,255,0); background: -webkit-gradient(left top, left bottom, color-stop(0%, rgb(255, 255, 255)), color-stop(100%, rgba(0, 0, 0, 0.5))); background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(0, 0, 0, 0.5))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(0, 0, 0, 0.5) 100%); filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#00ffffff", endColorstr="#a6000000"); -ms-filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, startColorstr="#00ffffff", endColorstr="#a6000000"); zoom:1} .absolute { position: absolute !important } .relative { position: relative !important } .no_topline { border-top: none !important } .no_btmline { border-bottom: none !important } .affix { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; overflow-y: auto; -webkit-overflow-scrolling: touch } .custom_scrollbars::-webkit-scrollbar { width: 6px; height: 6px } .custom_scrollbars::-webkit-scrollbar-thumb { border-radius: 3px; background: #c4c6c8 } .custom_scrollbars::-webkit-scrollbar-track-piece { background: #e9ecef } .green { color: #03aa5a !important } .pink { color: #ff5658 !important } .blue { color: #3787ff !important } .gray { color: #bbb !important } .gray-darker { color: #424242 !important } .underline { text-decoration: underline !important } .ct [class^=section_] { border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-top: 5px solid #e9ecef } .ct [class^=section_] .out_tit { overflow: hidden; position: relative; display: block; padding: 12px 0 9px 20px; background-color: #fff; border-top: 1px solid #e2e5e8; border-bottom: 1px solid #e2e5e8; font-weight: 600; font-size: 17px; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box } .ct [class^=section_] .out_tit .num { font-weight: 400 } .info_header { display: block; padding-bottom: 1px; font-weight: 500; color: #0abe16 } .info_header i[class*=ico_] { margin-top: 1px; margin-left: -1px; margin-right: 4px } .info_header .fn-booking-m-info1 { font-size: 18px; vertical-align: -4px } .count_num { font-size: 17px; line-height: 24px; color: #0abe16; vertical-align: .5px; font-weight: 600 } .in_tit { font-weight: 600; font-size: 16px; line-height: 24px } .select_info { font-size: 17px } .select_info .select_data { font-size: 17px } .dsc { font-size: 16px; line-height: 24px } .agreement_nessasary { float: right; padding-top: 1px; margin-bottom: 8px; font-size: 14px; color: #989898; font-weight: 400 } .agreement_nessasary .ico_nessasary { margin-top: 8px; margin-right: 5px } .sale_price { display: inline-block; font-size: 15px; color: #989898 } .sale_price .price { display: inline-block; text-decoration: line-through } #container { min-height: 327px } .ct { position: relative; min-height: 100vh } .ct .ct_wrap [class^=section_] { border-top: 6px solid #e9ecef } .ct.full { position: absolute; top: 0; left: 0; bottom: 0; width: 100%; background-color: #fff } .full-body { position: fixed; top: 0; bottom: 0; left: 0; right: 0 } .naver_order .order_info_area .info_main .info_main_notice .notice_list .box_stamp .stamp .stamp_thumb .stamp_icon.gift,.naver_order .order_info_area .info_main .info_main_notice .notice_list .box_stamp .stamp .stamp_thumb .stamp_icon.discount,.coupon_thumb_area .icon_gift,.coupon_thumb_area .icon_discount,.coupon_my.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_added.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_added.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_added.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_added.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_added.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_added.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_extra_small .coupon_thumb_area .icon_discount { display: inline-block; overflow: hidden; color: rgba(0,0,0,0); white-space: nowrap; background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px } .adminbooking_login .nbooking_logo.txt_log_en,.adminbooking_login .nbooking_logo.txt_logo,.booking_login .login_header .nbooking_logo.txt_log_en,.booking_login .login_header .nbooking_logo.txt_logo,.group_section_home .section_home .btn_next .ico_circle_up,.group_section_home .section_home .btn_next .ico_circle_down,.group_section_home .section_home .home_tit .ico_double_quotation,.group_section_home .section_home .ico_pencil_b,.group_section_home .section_home .ico_pay_b,.group_section_home .section_home .ico_n_b,.home_tit_bar .ico_pencil,.home_tit_bar .ico_pay,.home_tit_bar .ico_n { display: inline-block; overflow: hidden; color: rgba(0,0,0,0); white-space: nowrap; background-image: url(/public/images/sprites/sp_home-138b4df8.png); background-size: 200px 183px } .beauty_stylist_detail_jp .stylist_intro .sns_item.etc::before,.beauty_stylist_detail_jp .stylist_intro .sns_item.youtube::before,.beauty_stylist_detail_jp .stylist_intro .sns_item.twitter::before,.beauty_stylist_detail_jp .stylist_intro .sns_item.tiktok::before,.beauty_stylist_detail_jp .stylist_intro .sns_item.line::before,.beauty_stylist_detail_jp .stylist_intro .sns_item.instagram::before,.beauty_stylist_detail_jp .stylist_intro .sns_item.facebook::before,.beauty_detail_jp .beauty_name::before,.page_request_jp .section_title .line_btn .ico_line,.book_my_card_jp .card_title .line_btn .ico_line,.book_header_jp .header_back .ico_yahoo,.book_header_jp .header_back .link_back { display: inline-block; overflow: hidden; color: rgba(0,0,0,0); white-space: nowrap; background-image: url(/public/images/sprites/sp_jp-4d8ec01c.png); background-size: 118px 84px } .page_ticket_my .section_details .pickup_area .title::before,.page_ticket_my .section_details .reorder_area .btn_reorder::before,.page_ticket_my .section_business_map .marker_store .ico_coupon_percent,.page_ticket_my .section_etc .go_menu_link .ico_menu,.biz_item_main .section_calendar .pay_guide_area .membership .ico_membership,.smart_product_tab .product_tab_all .btn_all_category .ico_all,.order_promotion_wrap .promotion_list .promotion_item .img_box .ico_group .ico_new,.order_promotion_wrap .promotion_list .promotion_item .img_box .ico_group .ico_pepper3,.order_promotion_wrap .promotion_list .promotion_item .img_box .ico_group .ico_pepper2,.order_promotion_wrap .promotion_list .promotion_item .img_box .ico_group .ico_pepper1,.smart_gift_modal .gift_content .content_body .gift_item .box_info .info_top .top_image.no_img::before,.smart_gift_modal .gift_content .content_title .sub_text::after,.smart_gift_modal .gift_content .content_title .sub_text::before,.smart_gift_modal .gift_content .content_title .ico_gift::before,.image_category .btn_all_category .ico_all,.image_category .ico_group .ico_new,.smart_category .category_box .category_button .btn_all_category .ico_all,.smart_order .smart_info .info_area .info_coupon .coupon_stamps .stamps_item:only-child .stamp_box.first_visit::after,.smart_order.hub_home .smart_info .info_area .info_title .info_main_tab .tab_switch_box .tab_switch .tab_text .ico_table,.smart_order.hub_home .smart_info .info_area .info_title .info_main_tab .tab_switch_box .tab_switch.active .tab_text .ico_table,.hub_page_wrap .preparing_contents .contents_card .date .ico_clock,.hub_page_wrap .preparing_contents .in_contents .ico_comingsoon,.hub_page_wrap .preparing_contents .in_contents .ico_preparing,.hub_page_wrap .preparing_header .button_my::before,.hub_page_wrap .page_contents .store_list .info_box .menu_info::before,.hub_page_wrap .page_contents .filter_no_content .title::before,.hub_page_wrap .page_contents .filter_select .select_box .ico_wait,.hub_page_wrap .page_contents .filter_select .select_box .ico_seat,.hub_page_wrap .page_contents .filter_select .select_box .ico_price,.hub_page_wrap .page_contents .filter_select .select_box .ico_order,.hub_page_wrap .page_header.img_type .seat_area::before,.hub_page_wrap .page_header.img_type .btn_promotion::after,.hub_page_wrap .page_header.img_type .button_my::before,.hub_page_wrap .page_header.img_type .btn_home .ico_n_logo,.hub_page_wrap .page_header .button_my::before,.hub_page_wrap .page_header .seat_area::before,.hub_page_wrap .page_header .service_area .btn_home .ico_n_logo,.coupon_customer_wrap .customer_info .box_more .more_link .ico_disconnect,.coupon_customer_wrap .customer_info .btn_more .ico_more,.stamp_no_list .message_link.add_customer::before,.stamp_no_list .message_info::before,.coupon_bookmark_add .add_btn::before,.coupon_bookmark_add::before,.coupon_header .header_gnb .box_more .more_link .ico_ticket,.coupon_header .header_gnb .box_more .more_link .ico_disconnect,.info_main_tab .tab_switch_box .tab_switch .tab_text .ico_robot,.info_main_tab .tab_switch_box .tab_switch .tab_text .ico_delivery,.info_main_tab .tab_switch_box .tab_switch .tab_text .ico_dt,.info_main_tab .tab_switch_box .tab_switch .tab_text .ico_dine,.info_main_tab .tab_switch_box .tab_switch .tab_text .ico_takeout,.info_main_tab .tab_switch_box .tab_switch.active .tab_text .ico_robot,.info_main_tab .tab_switch_box .tab_switch.active .tab_text .ico_delivery,.info_main_tab .tab_switch_box .tab_switch.active .tab_text .ico_dt,.info_main_tab .tab_switch_box .tab_switch.active .tab_text .ico_dine,.info_main_tab .tab_switch_box .tab_switch.active .tab_text .ico_takeout,.naver_order .order_info_area .info_main .info_main_notice .notice_desc .desc_type.ico_robot::before,.naver_order .order_info_area .info_main .info_main_notice .notice_desc .desc_type.ico_delivery::before,.naver_order .order_info_area .info_main .info_main_notice .notice_desc .desc_type.ico_dt::before,.naver_order .order_info_area .info_main .info_main_notice .notice_desc .desc_type.ico_dine::before,.naver_order .order_info_area .info_main .info_main_notice .notice_desc .desc_type.ico_takeout::before,.address_wrap .address_box::before,.naver_order .order_info_area .info_main .info_main_location .location_change .button_change::after,.naver_order .order_info_area .info_main .info_main_title .title_logo .logo_thumb .thumb_circle .thumb_ico,.naver_order .order_info_area .info_main .info_main_title .title_logo .logo_thumb .ico_cu,.naver_order .order_info_area .info_main .info_main_title .title_logo.type_delivery::before,.naver_order .order_info_area .info_main .info_main_title .title_logo::before,.section_order_extra .map_area .map_location .btn_expand .ico_expand,.section_order_extra .delivery_seat_info_area .input_box .label_seat_info,.section_order_extra .num_area .tooltip_button .ico_info,.section_confirm_toast .ico_info_toast,.order_form .point_accumulation .text::before,.order_form .point_accumulation.plus_membership .text::before,.order_form .figure_area .price .popover_event::before,.order_form .menu_list .menu .info_wrap .sold_out::before,.order_form .menu_list .menu .img_wrap.no_img .coupon,.order_form .section_order_menu .top_info .title::before,.order_form .info_weather .ico_weather,.order_form .info_main_tab .tab_switch_box .tooltip::before,.section_place_error .button_area .ico_refresh,.section_place_error .ico_out_of_service,.section_order_error .error_content .ico_out_of_menu,.section_order_error .error_content .ico_out_of_service,.section_blog .list_blog .author_area .author_img .ico_thumb,.no_menu_review .text_box::after,.no_menu_review.pickup .text_box::after,.no_menu_review.delivery .text_box::after,.section_menu_detail .menu_card .menu_detail .select_box .box_tab .tab_text .ico_robot,.section_menu_detail .menu_card .menu_detail .select_box .box_tab .tab_text .ico_delivery,.section_menu_detail .menu_card .menu_detail .select_box .box_tab .tab_text .ico_dt,.section_menu_detail .menu_card .menu_detail .select_box .box_tab .tab_text .ico_dine,.section_menu_detail .menu_card .menu_detail .select_box .box_tab .tab_text .ico_takeout,.section_menu_detail .menu_card .menu_detail .select_box .box_tab.active .tab_text .ico_robot,.section_menu_detail .menu_card .menu_detail .select_box .box_tab.active .tab_text .ico_delivery,.section_menu_detail .menu_card .menu_detail .select_box .box_tab.active .tab_text .ico_dt,.section_menu_detail .menu_card .menu_detail .select_box .box_tab.active .tab_text .ico_dine,.section_menu_detail .menu_card .menu_detail .select_box .box_tab.active .tab_text .ico_takeout,.section_menu_detail .menu_card .star_rating::before,.section_menu_detail .menu_card .ico_pepper3,.section_menu_detail .menu_card .ico_pepper2,.section_menu_detail .menu_card .ico_pepper1,.section_menu_detail .menu_card .ico_new,.order_flow_wrap .order_option_area .option_content .content_bottom .option_alert .ico_info,.order_flow_wrap .order_option_area .option_content .promotion_menu_info .info_thumb::before,.order_flow_wrap .order_box2 .qr_area .btn_qr::before,.order_close_wrap .order_close_inner::before,.section_contents .order_area .order_list .info_detail .detail .detail_star::before,.section_contents .order_area .order_list .info_detail .tit .ico_new,.section_contents .order_area .order_list .info_detail .tit .ico_pepper3,.section_contents .order_area .order_list .info_detail .tit .ico_pepper2,.section_contents .order_area .order_list .info_detail .tit .ico_pepper1,.section_contents .order_area .order_list .order_list_tit .ico_new,.section_contents .order_area .order_list .order_list_tit .adult .ico_adult,.section_contents .order_area .order_list .order_list_tit .period .ico_period,.section_contents .order_area .recent_order_area .recent_order_list .info_wrap .btn_shop .ico_cart.full,.section_contents .order_area .recent_order_area .recent_order_list .info_wrap .btn_shop .ico_cart,.section_contents .order_area .recent_order_area .recent_order_list .info_wrap .btn_shop.disabled_ani .ico_cart,.section_contents .order_area .banner_promotion .banner_box::before,.section_contents .order_area .order_filter .filter_view .view_box:last-child input[type=radio].check:checked+.label::before,.section_contents .order_area .order_filter .filter_view .view_box:last-child .label::before,.section_contents .order_area .order_filter .filter_view .view_box:first-child input[type=radio].check:checked+.label::before,.section_contents .order_area .order_filter .filter_view .view_box:first-child .label::before,.section_review .notice2_area .text::after,.section_review .notice2_area .text::before,.agreement_area.my_coupon .agreement_check_all .ico_check,.agreement_area.my_coupon .agreement_check_all .check:checked+.label .ico_check,.confirm_alert_con .local_order_popup .store_popup_header .header_address::before,.confirm_alert_con .local_order_popup .membership_popup_header .header_address::before,.confirm_alert_con .local_order_popup .store_popup_header::before,.confirm_alert_con .local_order_popup .membership_popup_header::before,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_robot_delivery,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_robot_delivery,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_delivery_motorcycle,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_delivery_motorcycle,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_delivery,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_delivery,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_drive_through,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_drive_through,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_take_out,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_take_out,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_dine_in,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_dine_in,.confirm_alert_con .local_order_popup .order_selection .selection .ico_robot_delivery,.confirm_alert_con .local_order_popup .order_selection .selection .ico_delivery_motorcycle,.confirm_alert_con .local_order_popup .order_selection .selection .ico_room_delivery,.confirm_alert_con .local_order_popup .order_selection .selection .ico_pick_up,.confirm_alert_con .local_order_popup .order_selection .selection .ico_delivery,.confirm_alert_con .local_order_popup .order_selection .selection .ico_to_go,.confirm_alert_con .local_order_popup .order_selection .selection .ico_drive_through,.confirm_alert_con .local_order_popup .order_selection .selection .ico_take_out,.confirm_alert_con .local_order_popup .order_selection .selection .ico_dine_in,.section_booking_info .plus_membership .membership_text::before,.coupon_ticket.used .btn_use .ico_btn,.coupon_ticket.unusable .btn_use .ico_btn,.coupon_ticket.qr_code .btn_use .ico_btn,.coupon_ticket.ready .btn_use .ico_btn,.coupon_ticket.use .btn_use .ico_btn,.coupon_ticket .ticket_use .btn_use .ico_btn,.stamp_message .message_info .ico_alert,.stamp_message::before,.stamp_achievement .achievement_item.achieved .item_number::before,.stamp_list .stamp_item .ico_stamp_reward,.stamp_list .stamp_item .ico_stamp,.coupon_stamp .stamp_btn_area .btn_add::before,.coupon_stamp .stamp_title .box_more .more_link .ico_disconnect,.coupon_stamp .stamp_title .btn_more .ico_more,.coupon_profile .profile_info .box_more .more_link .ico_disconnect,.coupon_profile .profile_info .btn_more .ico_more,.ly_info .icon.ico_alert_green,.ly_info .icon.ico_order,.ly_info .icon.ico_adult,.user_header .seat_info_area::before { display: inline-block; overflow: hidden; color: rgba(0,0,0,0); white-space: nowrap; background-image: url(/public/images/sprites/sp_local_pay-1df0c0b5.png); background-size: 689px 598px } .page_confirm.used .confirm_item_top .confirm_title .ico_clock,.page_confirm.cancel .confirm_item_top .confirm_title .ico_clock,.page_confirm.okay .confirm_item_top .confirm_title>.ico_clock,.page_confirm .confirm_item_top .confirm_top_content .popup_calendar .calendar_box .calendar_left .ico_arrow_split,.page_confirm .confirm_item_top .confirm_top_content .popup_calendar .calendar_box .calendar_right .ico_arrow_split,.page_confirm .confirm_item_top .confirm_top_content .popup_calendar .calendar_box .calendar_center .ico_arrow_split,.page_confirm .confirm_item_top .confirm_top_content .popup_calendar .calendar_box .calendar_left .ico_n_calendar,.page_confirm .confirm_item_top .confirm_top_content .popup_calendar .calendar_box .calendar_right .ico_n_calendar,.page_confirm .confirm_item_top .confirm_top_content .popup_calendar .calendar_box .calendar_center .ico_n_calendar,.page_confirm .confirm_item_top .confirm_top_content .popup_calendar .calendar_box .calendar_left .ico_n_book,.page_confirm .confirm_item_top .confirm_top_content .popup_calendar .calendar_box .calendar_right .ico_n_book,.page_confirm .confirm_item_top .confirm_top_content .popup_calendar .calendar_box .calendar_center .ico_n_book,.page_confirm .confirm_item_top .confirm_top_content .detail_info .info_box .item_tit .ico_mystyle,.page_confirm .confirm_item_top .confirm_title .ico_clock,.page_confirm .detail_info .info_lst .info_item .ico_mystyle,.page_confirm .detail_info .info_lst .info_item .item_tit .btn_write_calendar .icon_calendar,.page_confirm .detail_info .info_lst .info_item .item_desc .btn_write_calendar .icon_calendar,.npay_amount_info .text1 .ico_npay,.guide_contents .guide_step .ico_post_npay2,.guide_contents .guide_step .ico_post_npay1,.sec_booking_guide .guide_header .guide_subtitle .ico_npay_m,.npay_payment_info .ico_npay,.place_my_wrapper .section_upcoming .upcoming_item .icon_link_area .payment_area .ico_post_npay2,.place_my_wrapper .section_upcoming .upcoming_item .icon_link_area .payment_area .ico_post_npay1,.section_booking_payment .payment_guide .ico_post_npay2,.section_booking_payment .payment_guide .ico_post_npay1,.status_card .card_beauty_style .ico_mystyle { display: inline-block; overflow: hidden; color: rgba(0,0,0,0); white-space: nowrap; background-image: url(/public/images/sprites/sp_my-9edd3f23.png); background-size: 135px 130px } .keyword_statistics_area .keyword_list .emoji_icon.parking_easy_blur,.keyword_statistics_area .keyword_list .emoji_icon.talk_good_blur,.keyword_statistics_area .keyword_list .emoji_icon.price_cheap_blur,.keyword_statistics_area .keyword_list .emoji_icon.dessert_good_blur { display: inline-block; overflow: hidden; color: rgba(0,0,0,0); white-space: nowrap; background-image: url(/public/images/sprites/sp_review_keyword-6c233684.png); background-size: 50px 50px } .toast_area .inner_area .icon_wrapper .icon_warning,.toast_area .inner_area .icon_wrapper .icon_warning_b,.toast_area .inner_area .icon_wrapper .icon_coupon,.toast_area .inner_area .icon_wrapper .icon_coupon_b,.toast_area .inner_area .icon_wrapper .icon_info,.toast_area .inner_area .icon_wrapper .icon_info_b,.toast_area .inner_area .icon_wrapper .icon_bookmark_b,.toast_area .inner_area .icon_wrapper .icon_bookmark,.toast_area .inner_area .icon_wrapper .icon_keword_b,.toast_area .inner_area .icon_wrapper .icon_keword,.toast_area .inner_area .icon_wrapper .icon_check_b,.toast_area .inner_area .icon_wrapper .icon_check,.toast_area .inner_area .icon_wrapper .icon_caution_b,.toast_area .inner_area .icon_wrapper .icon_caution,.toast_area .inner_area .icon_wrapper .icon_alarm_b,.toast_area .inner_area .icon_wrapper .icon_alarm,.toast_area .inner_area .icon_wrapper .icon_likeit_b,.toast_area .inner_area .icon_wrapper .icon_likeit { display: inline-block; overflow: hidden; color: rgba(0,0,0,0); white-space: nowrap; background-image: url(/public/images/sprites/sp_toast-9f5f2105.png); background-size: 114px 106px } .user_app.global .section_summary .summary_detail_area .business_links .link .ico_phone,.user_app.global .section_summary .summary_detail_area .business_links .link .ico_talk,.user_app.global .section_summary .summary_detail_area .business_links .link .ico_home,.user_app.global .section_summary .summary_detail_area .business_links .link .ico_map,body.en .section_summary .summary_detail_area .green_ticket .ticket_logo .logo,body.ja .section_summary .summary_detail_area .green_ticket .ticket_logo .logo,body.en .green_ticket_banner .ico_green_ticket,body.ja .green_ticket_banner .ico_green_ticket,body.en .entery_info .ico_green_pass,body.ja .entery_info .ico_green_pass,body.en .section_green .ico_green_ticket,body.ja .section_green .ico_green_ticket,body.en .section_green .ico_green_pass,body.ja .section_green .ico_green_pass,.queue_share_wrapper .icon,.queue_share_wrapper.type_queue_cancel .icon,.page_ticket_my .section_details .delay_alert_info::before,.page_ticket_my .section_details .share_alert_info .icon,.page_ticket_my .section_business_map .marker_my .marker,.page_ticket_my .section_business_map .marker_store .marker::before,.biz_item_main .section_option .membership .ico_membership,.biz_item_main .section_calendar .certification_guide_area .certification_box .ico_certification,.section_delivery_form .form_title .link_notice::after,.order_promotion_wrap .promotion_list .more .btn_more::after,.order_promotion_wrap .promotion_list .promotion_item .menu_review .text .ico_star_red,.option_flow_wrap .menu_option_section .list_dropdown .item_dropdown .text_wrap .btn_info .ico_info_lg,.leave_wrap .check_area .input_checkbox:checked+.input_label::before,.leave_wrap .check_area .input_label::before,.page_confirm_tab .ico_new,.page_confirm .confirm_item_body.goodpy .icon,.page_confirm .confirm_item_body .confirm_item_wrap .text_confirm_aside .ico_airspace,.page_confirm .confirm_item_top .confirm_top_content .facesign_info .ico_facesign,.page_confirm .page_confirm_tab .ico_new,.npay_button_wrap .npay_button .ico_npay_w,.sec_booking_npoint .npay_list .item .info_cell .ico_plus_membership,.cs_inquiry .cs_agreement_section .agreement_label::before,.cs_inquiry .cs_agreement_section .agreement_check:checked+.agreement_label::before,.cs_inquiry .cs_form_section .required,.hub_page_wrap .page_contents .merge_store_list .coupon_box .coupon_link:before,.hub_page_wrap .page_contents .merge_store_list .store_box .store_etc .text .ico_star_red,.order_form .total_price_area .guide_text:before,.order_form .button_add .ico_home,.gnb .logo_line,.gnb .link_naver .logo_naver,.section_booking_payment .payment_guide .guide_title .ico_npay,.section_booking_payment .payment_radio .text .ico_npay,.review_header.write .top_title .title .ico_review_point,.section_keyword .guide_layer .update::before,.panel_area .detail_info .info_guide.ico_ticket_arrow:before,.section_contents .content_bottom .status_open .ico_clock,.section_contents .content_bottom .status_review .star_rating::before,.ico_npay_plus_s,.section_booking_payment_method .payment_point_method_card .item_accumulate_point .ico_plus_membership,.booking_common_map .map_area .link_map .ico_expand,.section_service_agreement .section_title .ico_socar,.agreeing_talk_alarm_switch.type_na .ico_na2,.agreeing_talk_alarm_switch.type_na .ico_na,.horizontal_menu_list .more .btn_more::after,.horizontal_menu_list .menu_item .menu_review .text .ico_star_red,.horizontal_menu_list .menu_item .btn_booking .ico_booking,.horizontal_menu_list .menu_item .wrap_img.no_img::after,.status_card .card_review .review_area .review_rating_area .score::before,.place_recommendation_contents.search .ico_search_board,.popup_booking_completion .booking_details_area .facesign_info .ico_facesign,.wrap_booking_inquiries .bk_footer .btn_choice .ico_check_white,.wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_txt .item_tit .ico_box .ico_npay_using,.wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_txt .item_tit .ico_box .ico_booking_using,.wrap_booking_inquiries .content .product_list .wrap_product_item .product_item.on .check .ico_check,.wrap_booking_inquiries .content .search_area .search .search_input .btn_input_cancel .ico_cancel,.wrap_booking_inquiries .content .nodata_result_area .nodata_text .ico_caution,.detail_direction .direction_area .direction_detail .item .ico_pin,.rating_area2 .star_area .score::before,.rating_area .star_area .score::before,.section_booking_subscribe_noti .subscribe_detail .ico_alarm,.section_booking_subscribe_noti .subscribe_selection .item .ico_check:before,.section_booking_subscribe_noti .subscribe_selection .item .check:checked+.ico_check:before,.link_plus_membership .ico_plus_membership,.section_booking_npay .npay_list .item .info_cell .btn_more_info .ico_question,.section_booking_npay .npay_list .item .ico_plus_membership,.section_booking_npay .npay_total .ico_npay,.order_achievement .achievement_step .reward::before,.coupon_stamp .stamp_box .saving_title .stamp_info_area .stamp_info .link .ico_info_green,.coupon_stamp .stamp_box .saving_title .title.smart::before,.coupon_stamp .stamp_box .saving_title .title.stamp::before,.coupon_stamp .stamp_header .stamp_info_area .link .ico_info_green,.section_seat_select .pc_link_button::before,.section_schedule .schedule_time .time_box_wrap .box_booking_info .ico_board,.section_green .green_desc .ico_green_ticket,.section_green .green_desc .ico_green_pass,.confirm_smart_around .place_contents .item_title .ico_talktalk,.confirm_smart_around .place_contents .item_title .ico_booking,.confirm_smart_around .place_contents .item_title .ico_smartorder,.confirm_smart_around .place_contents .item_title .ico_npay_plus,.popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.end-day .calendar-date::after,.popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.start-day .calendar-date::after,.popup_select .select_area .calendar_content .calendar_top::before,.section_price_info .price_notice .text::before,.section_booking_list .booking_list .desc_area .desc_review .review_txt.star::before,.section_menu_list .img_wrap .no_img::before,.section_map .map_info .info_detail .text::before,.section_map .map_address .address_layer .layer_area .link_map .ico_map,.section_map .map_address .address_layer .layer_area .layer_info .txt2::before,.section_map .map_address .btn_address::before,.section_summary .summary_detail_area .npay_point .point_content .sub_text .ico_npay_plus_m,.section_summary .summary_detail_area .npay_point .point_content .text .ico_npay,.section_summary .summary_detail_area .plus_membership .ico_plus_membership,.section_summary .summary_detail_area .green_ticket .ticket_logo .logo,.section_summary .summary_detail_area .business_links .link .ico_phone,.section_summary .summary_detail_area .business_links .link .ico_talk,.section_summary .summary_detail_area .business_links .link .ico_home,.section_summary .summary_detail_area .business_links .link .ico_map,.home_header .header_logo .logo_line,.calendar_month.accommodation .calendar_date.selected.end::after,.calendar_month.accommodation .calendar_date.selected.start::after,.toast_area .inner_area.type_2row .icon_wrapper .icon_caution,.short_review_area .review_none .none_box .ico_no_review,.short_review_area .star_area .num::before,.green_ticket_banner .ico_green_ticket,.photo_more .ico_photo,.entery_area .entery_info .info_guide.ico_ticket_arrow:before,.entery_area .ico_ticket_exchange,.entery_area .ico_client_info,.entery_area .ico_staff,.entery_area .ico_qrcode,.entery_area .ico_barcode,.entery_area .ico_mobile_ticket,.entery_area .ico_green_pass,.fixed_btn_area .talktalk_btn .ico_talktalk,.ly_info .icon.ico_alarm,.ly_info .icon.ico_green_mark,.ly_info .icon.ico_check_green,.ly_info .icon.ico_alert,.footer .footer_logo .ico_line_logo,.footer .list_lang .lang_select .ico_lang,.shopping_header .logo .logo_shopping_live,.user_header .hub_header .ico_home { display: inline-block; overflow: hidden; color: rgba(0,0,0,0); white-space: nowrap; background-image: url(/public/images/sprites/sp_user-905e3040.png); background-size: 436px 436px } @font-face { font-family: "Booking Icons"; src: url("/public/assets/fonts/Booking-Icons.woff?322390892") format("woff"); font-weight: normal; font-style: normal } .fn-booking { display: inline-block; height: 1em; line-height: 1em } .fn-booking:before { font-family: "Booking Icons"; font-style: normal; font-weight: normal; speak: none; display: inline; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .fn-booking.fn-18 { font-size: 18px } .fn-booking.fn-24 { font-size: 24px } .fn-booking.fn-36 { font-size: 36px } .fn-booking.fn-48 { font-size: 48px } .fn-booking-all-view:before { content: "" } .fn-booking-backward1:before { content: "" } .fn-booking-backward2:before { content: "" } .fn-booking-cafeteria-general:before { content: "" } .fn-booking-card-view:before { content: "" } .fn-booking-caution:before { content: "" } .fn-booking-chair:before { content: "" } .fn-booking-check-circle:before { content: "" } .fn-booking-check1:before { content: "" } .fn-booking-check2:before { content: "" } .fn-booking-close1:before { content: "" } .fn-booking-close2:before { content: "" } .fn-booking-complete:before { content: "" } .fn-booking-cross-in-circle:before { content: "" } .fn-booking-delivery:before { content: "" } .fn-booking-down1:before { content: "" } .fn-booking-down2:before { content: "" } .fn-booking-down3:before { content: "" } .fn-booking-drive-thru:before { content: "" } .fn-booking-exposed:before { content: "" } .fn-booking-first-forward1:before { content: "" } .fn-booking-foreign-language:before { content: "" } .fn-booking-forward1:before { content: "" } .fn-booking-forward2:before { content: "" } .fn-booking-hotel:before { content: "" } .fn-booking-kwon:before { content: "" } .fn-booking-last-backward1:before { content: "" } .fn-booking-line1:before { content: "" } .fn-booking-list:before { content: "" } .fn-booking-m-info1:before { content: "" } .fn-booking-m-status:before { content: "" } .fn-booking-movie:before { content: "" } .fn-booking-mug:before { content: "" } .fn-booking-naver-pay:before { content: "" } .fn-booking-new-calendar:before { content: "" } .fn-booking-newlayer:before { content: "" } .fn-booking-open-time:before { content: "" } .fn-booking-option1:before { content: "" } .fn-booking-option2:before { content: "" } .fn-booking-option3:before { content: "" } .fn-booking-option4:before { content: "" } .fn-booking-option5:before { content: "" } .fn-booking-option6:before { content: "" } .fn-booking-option7:before { content: "" } .fn-booking-option8:before { content: "" } .fn-booking-option9:before { content: "" } .fn-booking-pay-point1:before { content: "" } .fn-booking-pay-point2:before { content: "" } .fn-booking-pc2:before { content: "" } .fn-booking-performance:before { content: "" } .fn-booking-person:before { content: "" } .fn-booking-place:before { content: "" } .fn-booking-play:before { content: "" } .fn-booking-plus1:before { content: "" } .fn-booking-plus2:before { content: "" } .fn-booking-qrcode:before { content: "" } .fn-booking-refresh:before { content: "" } .fn-booking-reserve:before { content: "" } .fn-booking-select-calendar:before { content: "" } .fn-booking-status:before { content: "" } .fn-booking-table:before { content: "" } .fn-booking-ticket:before { content: "" } .fn-booking-time-calendar:before { content: "" } .fn-booking-toast-check:before { content: "" } .fn-booking-toast-error:before { content: "" } .fn-booking-up1:before { content: "" } .fn-booking-up2:before { content: "" } .fn-booking-up3:before { content: "" } .fn-booking-utensil:before { content: "" } .fn-booking-visit:before { content: "" } .fn-booking-walking1:before { content: "" } .fn-booking-walking2:before { content: "" } .fn-booking-warning:before { content: "" } @font-face { font-family: "Place Icons"; src: url("/public/assets/fonts/Place-Icons.woff?322390892") format("woff"); font-weight: normal; font-style: normal } .fn { display: inline-block; height: 1em; line-height: 1em } .fn:before { font-family: "Place Icons"; font-style: normal; font-weight: normal; speak: none; display: inline; text-decoration: inherit; width: 1em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .fn.fn-18 { font-size: 18px } .fn.fn-24 { font-size: 24px } .fn.fn-36 { font-size: 36px } .fn.fn-48 { font-size: 48px } .fn-alert-my1:before { content: "" } .fn-alert-my2:before { content: "" } .fn-alert-off1:before { content: "" } .fn-alert-off2:before { content: "" } .fn-alert-setting1:before { content: "" } .fn-alert-setting2:before { content: "" } .fn-alert1:before { content: "" } .fn-alert2:before { content: "" } .fn-alertactive1:before { content: "" } .fn-alertactive2:before { content: "" } .fn-all1:before { content: "" } .fn-all2:before { content: "" } .fn-app-alert1:before { content: "" } .fn-app-alert2:before { content: "" } .fn-article-alert1:before { content: "" } .fn-article-alert2:before { content: "" } .fn-attachment:before { content: "" } .fn-backward1:before { content: "" } .fn-backward2:before { content: "" } .fn-before:before { content: "" } .fn-bgm-off1:before { content: "" } .fn-bgm-off2:before { content: "" } .fn-bgm1:before { content: "" } .fn-bgm2:before { content: "" } .fn-blog-of-the-month1:before { content: "" } .fn-blog-of-the-month2:before { content: "" } .fn-board1:before { content: "" } .fn-board2:before { content: "" } .fn-browser1:before { content: "" } .fn-browser2:before { content: "" } .fn-bus1:before { content: "" } .fn-bus2:before { content: "" } .fn-buy1:before { content: "" } .fn-buy2:before { content: "" } .fn-calendar1:before { content: "" } .fn-calendar2:before { content: "" } .fn-call1:before { content: "" } .fn-call2:before { content: "" } .fn-camera1:before { content: "" } .fn-camera2:before { content: "" } .fn-cancel:before { content: "" } .fn-car1:before { content: "" } .fn-car2:before { content: "" } .fn-cart1:before { content: "" } .fn-cart2:before { content: "" } .fn-chat1:before { content: "" } .fn-chat2:before { content: "" } .fn-close:before { content: "" } .fn-comment1:before { content: "" } .fn-comment2:before { content: "" } .fn-commentalert1:before { content: "" } .fn-commentalert2:before { content: "" } .fn-confirm:before { content: "" } .fn-copy1:before { content: "" } .fn-copy2:before { content: "" } .fn-copy3:before { content: "" } .fn-delete1:before { content: "" } .fn-delete2:before { content: "" } .fn-deliver1:before { content: "" } .fn-deliver2:before { content: "" } .fn-down1:before { content: "" } .fn-down2:before { content: "" } .fn-download:before { content: "" } .fn-drawer:before { content: "" } .fn-filter1:before { content: "" } .fn-filter2:before { content: "" } .fn-folder1:before { content: "" } .fn-folder2:before { content: "" } .fn-forward1:before { content: "" } .fn-forward2:before { content: "" } .fn-gpx1:before { content: "" } .fn-gpx2:before { content: "" } .fn-help1:before { content: "" } .fn-help2:before { content: "" } .fn-home1:before { content: "" } .fn-home2:before { content: "" } .fn-image1:before { content: "" } .fn-image2:before { content: "" } .fn-image3:before { content: "" } .fn-info1:before { content: "" } .fn-info2:before { content: "" } .fn-keyboard1:before { content: "" } .fn-keyboard2:before { content: "" } .fn-like1:before { content: "" } .fn-like2:before { content: "" } .fn-link:before { content: "" } .fn-listen1:before { content: "" } .fn-listen2:before { content: "" } .fn-logout:before { content: "" } .fn-mail1:before { content: "" } .fn-mail2:before { content: "" } .fn-metro1:before { content: "" } .fn-metro2:before { content: "" } .fn-mic1:before { content: "" } .fn-mic2:before { content: "" } .fn-more1:before { content: "" } .fn-more2:before { content: "" } .fn-more3:before { content: "" } .fn-more4:before { content: "" } .fn-mutual-friend1:before { content: "" } .fn-mutual-friend2:before { content: "" } .fn-navigation1:before { content: "" } .fn-navigation2:before { content: "" } .fn-navigation3:before { content: "" } .fn-nbooking-calender1:before { content: "" } .fn-nbooking-calender2:before { content: "" } .fn-news1:before { content: "" } .fn-news2:before { content: "" } .fn-notice1:before { content: "" } .fn-notice2:before { content: "" } .fn-nsquare:before { content: "" } .fn-official-blog1:before { content: "" } .fn-official-blog2:before { content: "" } .fn-ordering-entering:before { content: "" } .fn-ordering-exception:before { content: "" } .fn-ordering-handling:before { content: "" } .fn-password1:before { content: "" } .fn-password2:before { content: "" } .fn-path-find1:before { content: "" } .fn-path-find2:before { content: "" } .fn-pause1:before { content: "" } .fn-pause2:before { content: "" } .fn-pc1:before { content: "" } .fn-pc2:before { content: "" } .fn-pin1:before { content: "" } .fn-pin2:before { content: "" } .fn-pin3:before { content: "" } .fn-pin4:before { content: "" } .fn-pin5:before { content: "" } .fn-pin6:before { content: "" } .fn-play1:before { content: "" } .fn-play2:before { content: "" } .fn-poke:before { content: "" } .fn-powerblog1:before { content: "" } .fn-powerblog2:before { content: "" } .fn-presentlocation:before { content: "" } .fn-recommend1:before { content: "" } .fn-recommend2:before { content: "" } .fn-refresh:before { content: "" } .fn-report1:before { content: "" } .fn-report2:before { content: "" } .fn-reserve1:before { content: "" } .fn-reserve2:before { content: "" } .fn-review1:before { content: "" } .fn-review2:before { content: "" } .fn-rss1:before { content: "" } .fn-rss2:before { content: "" } .fn-search:before { content: "" } .fn-secret-change1:before { content: "" } .fn-secret-change2:before { content: "" } .fn-secret1:before { content: "" } .fn-secret2:before { content: "" } .fn-set1:before { content: "" } .fn-set2:before { content: "" } .fn-share1:before { content: "" } .fn-share2:before { content: "" } .fn-size1:before { content: "" } .fn-size2:before { content: "" } .fn-smartphone1:before { content: "" } .fn-smartphone2:before { content: "" } .fn-sms1:before { content: "" } .fn-sms2:before { content: "" } .fn-sound-off1:before { content: "" } .fn-sound-off2:before { content: "" } .fn-sound1:before { content: "" } .fn-sound2:before { content: "" } .fn-star1:before { content: "" } .fn-star2:before { content: "" } .fn-statistics:before { content: "" } .fn-sticker1:before { content: "" } .fn-sticker2:before { content: "" } .fn-stop1:before { content: "" } .fn-stop2:before { content: "" } .fn-store-poke:before { content: "" } .fn-store1:before { content: "" } .fn-store2:before { content: "" } .fn-talktalk-fill:before { content: "" } .fn-talktalk-line:before { content: "" } .fn-talktalk-n-fill:before { content: "" } .fn-talktalk-n-line:before { content: "" } .fn-thumb-down1:before { content: "" } .fn-thumb-down2:before { content: "" } .fn-thumb-up1:before { content: "" } .fn-thumb-up2:before { content: "" } .fn-time1:before { content: "" } .fn-time2:before { content: "" } .fn-time3:before { content: "" } .fn-time4:before { content: "" } .fn-top:before { content: "" } .fn-touch1:before { content: "" } .fn-touch2:before { content: "" } .fn-tv1:before { content: "" } .fn-tv2:before { content: "" } .fn-up1:before { content: "" } .fn-up2:before { content: "" } .fn-upload:before { content: "" } .fn-url1:before { content: "" } .fn-url2:before { content: "" } .fn-user-add1:before { content: "" } .fn-user-add2:before { content: "" } .fn-user-join1:before { content: "" } .fn-user-join2:before { content: "" } .fn-user-list1:before { content: "" } .fn-user-list2:before { content: "" } .fn-user-manage1:before { content: "" } .fn-user-manage2:before { content: "" } .fn-user-my1:before { content: "" } .fn-user-my2:before { content: "" } .fn-user1:before { content: "" } .fn-user2:before { content: "" } .fn-video1:before { content: "" } .fn-video2:before { content: "" } .fn-viewcount1:before { content: "" } .fn-viewcount2:before { content: "" } .fn-voicesupport1:before { content: "" } .fn-voicesupport2:before { content: "" } .fn-vote1:before { content: "" } .fn-vote2:before { content: "" } .fn-warning1:before { content: "" } .fn-warning2:before { content: "" } .fn-write-noline1:before { content: "" } .fn-write-noline2:before { content: "" } .fn-write1:before { content: "" } .fn-write2:before { content: "" } .fn-writing1:before { content: "" } .fn-writing2:before { content: "" } @font-face { font-family: "NanumSquareB"; font-weight: 300; font-style: normal; font-display: swap; unicode-range: U+AC00-D7AF,U+0020-007F; src: url("/public/assets/fonts/NanumSquareB.woff?200421") format("woff") } @font-face { font-family: "NanumSquareEB"; font-weight: 800; font-style: normal; font-display: swap; unicode-range: U+AC00-D7AF,U+0020-007F; src: url("/public/assets/fonts/NanumSquareEB.woff?170410") format("woff") } @font-face { font-family: "NanumSquareRound"; font-weight: 300; font-style: normal; font-display: swap; src: url("/public/assets/fonts/NanumSquareRoundL.woff?221121") format("woff") } @font-face { font-family: "NanumSquareRound"; font-weight: 400; font-style: normal; font-display: swap; src: url("/public/assets/fonts/NanumSquareRoundR.woff?221121") format("woff") } @font-face { font-family: "NanumSquareRound"; font-weight: 700; font-style: normal; font-display: swap; src: url("/public/assets/fonts/NanumSquareRoundB.woff?221121") format("woff") } @font-face { font-family: "NanumSquareRound"; font-weight: 800; font-style: normal; font-display: swap; src: url("/public/assets/fonts/NanumSquareRoundEB.woff?221121") format("woff") } @font-face { font-family: "NanumSquareNeo"; font-weight: 300; font-style: normal; font-display: swap; src: url("/public/assets/fonts/NanumSquareNeoTTF-aLt.woff2") format("woff2") } @font-face { font-family: "NanumSquareNeo"; font-weight: 400; font-style: normal; font-display: swap; src: url("/public/assets/fonts/NanumSquareNeoTTF-bRg.woff2") format("woff2") } @font-face { font-family: "NanumSquareNeo"; font-weight: 700; font-style: normal; font-display: swap; src: url("/public/assets/fonts/NanumSquareNeoTTF-cBd.woff2") format("woff2") } @font-face { font-family: "NanumSquareNeo"; font-weight: 800; font-style: normal; font-display: swap; src: url("/public/assets/fonts/NanumSquareNeoTTF-dEb.woff2") format("woff2") } @font-face { font-family: "NanumSquareNeo"; font-weight: 900; font-style: normal; font-display: swap; src: url("/public/assets/fonts/NanumSquareNeoTTF-eHv.woff2") format("woff2") } :root { --booking-color-bg197: rgba(255, 255, 255, 0); --booking-color-bg198: rgba(255, 255, 255, 0); --booking-color-bg229: #f0f9ff; --booking-color-bg233: rgba(255, 255, 255, 0.9); --booking-color-ad: #f5f7f9; --booking-color-order1: #f4fbfb; --booking-color-order2: #e8f6f7; --booking-color-surface-rgb: rgba(255, 255, 255, 0); --booking-color-gray95-rgb: rgba(248, 250, 251, 0); --booking-color-myplace-bg1: #f4f7f8; --booking-color-myplace-bg2: #eff6fe; --booking-color-myplace-blue: #287cff; --booking-color-blue-link: #0068c3; --booking-color-visited-link: #99209b; --booking-color-emphasis: #fc4c4e; --booking-color-surface: #fff; --booking-color-elevated-surface: #fff; --booking-color-background: #f0f0f3; --booking-color-gray0: #000; --booking-color-gray10: #222225; --booking-color-gray20: #444447; --booking-color-gray30: #555558; --booking-color-gray40: #77777a; --booking-color-gray50: #939396; --booking-color-gray60: #c5c5c7; --booking-color-gray70: #d9d9dc; --booking-color-gray80: #e9e9ec; --booking-color-gray90: #f0f0f3; --booking-color-gray95: #f7f7f9; --booking-color-gray99: #fafafb; --booking-color-gray100: #fff; --booking-color-red10: #4a0a0a; --booking-color-red20: #650d0d; --booking-color-red30: #8a1212; --booking-color-red40: #881818; --booking-color-red50: #e61e1e; --booking-color-red60: #ed5d5d; --booking-color-red70: #f38e8e; --booking-color-red80: #f6aeae; --booking-color-red90: #fbdbdb; --booking-color-red95: #fde8e8; --booking-color-red99: #fef4f4; --booking-color-orange10: #4e2113; --booking-color-orange20: #6c2e1a; --booking-color-orange30: #933e24; --booking-color-orange40: #c45330; --booking-color-orange50: #f5683c; --booking-color-orange60: #f89273; --booking-color-orange70: #fab49e; --booking-color-orange80: #fbc9b9; --booking-color-orange90: #fde7e0; --booking-color-orange95: #fef0eb; --booking-color-orange99: #fff8f6; --booking-color-yellow10: #513d0d; --booking-color-yellow20: #6f5412; --booking-color-yellow30: #977319; --booking-color-yellow40: #ca9a21; --booking-color-yellow50: #fcc029; --booking-color-yellow60: #fdd265; --booking-color-yellow70: #fedf94; --booking-color-yellow80: #fee8b2; --booking-color-yellow90: #fff5dd; --booking-color-yellow95: #fff9ea; --booking-color-yellow99: #fffcf4; --booking-color-green10: #01361d; --booking-color-green20: #014b28; --booking-color-green30: #028848; --booking-color-green40: #028848; --booking-color-green50: #03aa5a; --booking-color-green60: #4ac288; --booking-color-green70: #81d4ad; --booking-color-green80: #a4e0c4; --booking-color-green90: #d7f1e5; --booking-color-green95: #e6f7ee; --booking-color-green99: #f2fbf7; --booking-color-turquoise10: #093539; --booking-color-turquoise20: #0c494f; --booking-color-turquoise30: #10636b; --booking-color-turquoise40: #16848f; --booking-color-turquoise50: #1ba5b3; --booking-color-turquoise60: #5bbec8; --booking-color-turquoise70: #8dd8d9; --booking-color-turquoise80: #addfe4; --booking-color-turquoise90: #dbf1f3; --booking-color-turquoise95: #e8f6f7; --booking-color-turquoise99: #f4fbfb; --booking-color-blue10: #0a2249; --booking-color-blue20: #0e2f65; --booking-color-blue30: #134089; --booking-color-blue40: #1a55b7; --booking-color-blue50: #206ae5; --booking-color-blue60: #5e94ec; --booking-color-blue70: #8fb4f2; --booking-color-blue80: #afc9f6; --booking-color-blue90: #dbe7fb; --booking-color-blue95: #e9f0fc; --booking-color-blue99: #f4f8fe; --booking-color-navy10: #131c2b; --booking-color-navy20: #1a263c; --booking-color-navy30: #243452; --booking-color-navy40: #30466d; --booking-color-navy50: #3c5788; --booking-color-navy60: #7386a9; --booking-color-navy70: #9eabc3; --booking-color-navy80: #b9c2d4; --booking-color-navy90: #e0e4ec; --booking-color-navy95: #ebeef3; --booking-color-navy99: #f5f7f9; --booking-color-purple10: #21143b; --booking-color-purple20: #2d1b51; --booking-color-purple30: #3d256e; --booking-color-purple40: #523193; --booking-color-purple50: #663db8; --booking-color-purple60: #9173cc; --booking-color-purple70: #b39edc; --booking-color-purple80: #c8b9e5; --booking-color-purple90: #e6e0f4; --booking-color-purple95: #f0ecf8; --booking-color-purple99: #f7f5fc; --booking-color-violet10: #351631; --booking-color-violet20: #491e43; --booking-color-violet30: #85377a; --booking-color-violet40: #a64598; --booking-color-violet50: #c688bd; --booking-color-violet60: #c688bd; --booking-color-violet70: #d2a2cb; --booking-color-violet80: #dfbcda; --booking-color-violet90: #f1e1ef; --booking-color-violet95: #f3eaf8; --booking-color-violet99: #f9f5fc; --yahoo-color-text-link: #0b62e5; --yahoo-color-text-link-visited: #6246b8; --yahoo-color-text-saturday: #3263da; --yahoo-color-text-primary: #444; --yahoo-color-text-secondary: #777; --yahoo-color-text-disabled: #aaa; --yahoo-color-text-delimiter: #ccc; --yahoo-color-gray0: #fff; --yahoo-color-gray10: #f7f7f7; --yahoo-color-gray20: #eee; --yahoo-color-gray30: #ddd; --yahoo-color-gray60: #999; --yahoo-color-blue10: #e5f0ff; --yahoo-color-blue20: #cce0ff; --yahoo-color-blue30: #a6c9ff; --yahoo-color-blue60: #61a0ff; --yahoo-color-blue90: #408cff; --yahoo-color-blue100: #1a75ff; --yahoo-color-blue100-rgb: rgba(26, 117, 255, 0.08); --yahoo-color-red10: #ffe5e8; --yahoo-color-red20: #ffccd0; --yahoo-color-red30: #ffb2b9; --yahoo-color-red60: #ff858f; --yahoo-color-red90: #ff6673; --yahoo-color-red100: #fd3344; --yahoo-color-red110: #e60013; --yahoo-color-green0: rgba(199, 242, 215, 0.5); --yahoo-color-green10: #c7f2d7; --yahoo-color-green20: #9fe3b8; --yahoo-color-green30: #57c981; --yahoo-color-green60: #23b859; --yahoo-color-green90: #00ab3f; --yahoo-color-green100: #009637; --yahoo-color-green110: #068a37; --yahoo-color-yellow0: rgba(255, 243, 191, 0.5); --yahoo-color-yellow10: #fff3bf; --yahoo-color-yellow20: #ffec99; --yahoo-color-yellow30: #ffe77a; --yahoo-color-yellow60: #ffdc40; --yahoo-color-yellow90: #ffd200; --yahoo-color-yellow100: #ffb617; --yahoo-color-yellow110: #f38f00; --yahoo-color-gray0-rgb: rgba(255, 255, 255, 0) } @media(prefers-color-scheme: dark) { :root body.is_dark { --booking-color-bg197:rgba(0, 0, 0, 0.05); --booking-color-bg198: rgba(0, 0, 0, 0.07); --booking-color-bg229: #2e3542; --booking-color-bg233: rgba(65, 65, 68, 0.9); --booking-color-ad: #c7c9d5; --booking-color-order1: #374656; --booking-color-order2: #2d3b49; --booking-color-surface-rgb: rgba(43, 43, 46, 0); --booking-color-gray95-rgb: rgba(48, 48, 51, 0); --booking-color-myplace-bg1: #28282b; --booking-color-myplace-bg2: #414144; --booking-color-myplace-blue: #5899fd; --booking-color-blue-link: #5fa5f8; --booking-color-visited-link: #9777b9; --booking-color-emphasis: #ee5353; --booking-color-surface: #303033; --booking-color-elevated-surface: #39393c; --booking-color-background: #28282a; --booking-color-gray0: #f0f0f2; --booking-color-gray10: #dadde0; --booking-color-gray20: #a5a5a7; --booking-color-gray30: #a5a5a7; --booking-color-gray40: #78787a; --booking-color-gray50: #78787a; --booking-color-gray60: #5c5c5f; --booking-color-gray70: #414144; --booking-color-gray80: #414144; --booking-color-gray90: #414144; --booking-color-gray95: #39393c; --booking-color-gray99: #303033; --booking-color-gray100: #28282a; --booking-color-red10: #fde8e8; --booking-color-red20: #fbdbdb; --booking-color-red30: #f6aeae; --booking-color-red40: #f38e8e; --booking-color-red50: #ed5d5d; --booking-color-red60: #ea4242; --booking-color-red70: #e61e1e; --booking-color-red80: #b81818; --booking-color-red90: #8a1212; --booking-color-red95: #650d0d; --booking-color-red99: #4a0a0a; --booking-color-orange10: #fef0eb; --booking-color-orange20: #fde7e0; --booking-color-orange30: #fbc9b9; --booking-color-orange40: #fab49e; --booking-color-orange50: #f89273; --booking-color-orange60: #f7805b; --booking-color-orange70: #f5683c; --booking-color-orange80: #c45330; --booking-color-orange90: #933e24; --booking-color-orange95: #6c2e1a; --booking-color-orange99: #4e2113; --booking-color-yellow10: #fff9ea; --booking-color-yellow20: #fff5dd; --booking-color-yellow30: #fee8b2; --booking-color-yellow40: #fedf94; --booking-color-yellow50: #fdd265; --booking-color-yellow60: #fdca4b; --booking-color-yellow70: #fcc029; --booking-color-yellow80: #ca9a21; --booking-color-yellow90: #977319; --booking-color-yellow95: #6f5412; --booking-color-yellow99: #513d0d; --booking-color-green10: #e6f7ee; --booking-color-green20: #d7f1e5; --booking-color-green30: #a4e0c4; --booking-color-green40: #81d4ad; --booking-color-green50: #4ac288; --booking-color-green60: #2bb874; --booking-color-green70: #03aa5a; --booking-color-green80: #028848; --booking-color-green90: #026636; --booking-color-green95: #014b28; --booking-color-green99: #01361d; --booking-color-turquoise10: #e8f6f7; --booking-color-turquoise20: #dbf1f3; --booking-color-turquoise30: #addfe4; --booking-color-turquoise40: #8dd2d9; --booking-color-turquoise50: #5bbec8; --booking-color-turquoise60: #40b3bf; --booking-color-turquoise70: #1ba5b3; --booking-color-turquoise80: #16848f; --booking-color-turquoise90: #10636b; --booking-color-turquoise95: #0c494f; --booking-color-turquoise99: #093539; --booking-color-blue10: #e9f0fc; --booking-color-blue20: #dbe7fb; --booking-color-blue30: #afc9f6; --booking-color-blue40: #1a55b7; --booking-color-blue50: #8fb4f2; --booking-color-blue60: #4482e9; --booking-color-blue70: #206ae5; --booking-color-blue80: #1a55b7; --booking-color-blue90: #134089; --booking-color-blue95: #0e2f65; --booking-color-blue99: #0a2249; --booking-color-navy10: #ebeef3; --booking-color-navy20: #e0e4ec; --booking-color-navy30: #b9c2d4; --booking-color-navy40: #9eabc3; --booking-color-navy50: #7386a9; --booking-color-navy60: #5b729b; --booking-color-navy70: #3c5788; --booking-color-navy80: #30466d; --booking-color-navy90: #243452; --booking-color-navy95: #1a263c; --booking-color-navy99: #131c2b; --booking-color-purple10: #f0ecf8; --booking-color-purple20: #e6e0f4; --booking-color-purple30: #c8b9e5; --booking-color-purple40: #b39edc; --booking-color-purple50: #9173cc; --booking-color-purple60: #7e5cc3; --booking-color-purple70: #663d88; --booking-color-purple80: #523193; --booking-color-purple90: #3d256e; --booking-color-purple95: #2d1b51; --booking-color-purple99: #21143b; --booking-color-violet10: #f6ecf5; --booking-color-violet20: #f1e1ef; --booking-color-violet30: #dfbcda; --booking-color-violet40: #d2a2cb; --booking-color-violet50: #bf79b5; --booking-color-violet60: #b463a8; --booking-color-violet70: #a64598; --booking-color-violet80: #85377a; --booking-color-violet90: #64295b; --booking-color-violet95: #461e43; --booking-color-violet99: #351631; --yahoo-color-text-link: #74acff; --yahoo-color-text-link-visited: #ae99ff; --yahoo-color-text-saturday: #6e94ff; --yahoo-color-text-primary: #d7d7d7; --yahoo-color-text-secondary: #a7a7a7; --yahoo-color-text-disabled: #747474; --yahoo-color-text-delimiter: #434343; --yahoo-color-gray0: #222; --yahoo-color-gray10: #292929; --yahoo-color-gray20: #323232; --yahoo-color-gray30: #434343; --yahoo-color-gray60: #858585; --yahoo-color-blue10: #2d3b4e; --yahoo-color-blue20: #2d3b4e; --yahoo-color-blue30: #214e91; --yahoo-color-blue60: #1962cc; --yahoo-color-blue90: #4f96ff; --yahoo-color-blue100: #4f96ff; --yahoo-color-blue100-rgb: rgba(79, 150, 255, 0.08); --yahoo-color-red10: #472b30; --yahoo-color-red20: #5e2d32; --yahoo-color-red30: #8b313c; --yahoo-color-red60: #b43748; --yahoo-color-red90: #dc4855; --yahoo-color-red100: #f76375; --yahoo-color-red110: #ff818c; --yahoo-color-green0: rgba(37, 52, 39, 0.5); --yahoo-color-green10: #253427; --yahoo-color-green20: #24422b; --yahoo-color-green30: #265a36; --yahoo-color-green60: #23723c; --yahoo-color-green90: #219441; --yahoo-color-green100: #24a747; --yahoo-color-green110: #3dc268; --yahoo-color-yellow0: rgba(68, 56, 35, 0.5); --yahoo-color-yellow10: #443823; --yahoo-color-yellow20: #58441d; --yahoo-color-yellow30: #825d0c; --yahoo-color-yellow60: #b17f12; --yahoo-color-yellow90: #e09f0f; --yahoo-color-yellow100: #f3b329; --yahoo-color-yellow110: #fcc858; --yahoo-color-gray0-rgb: rgba(34, 34, 34, 0) } } .img_thumb { width: 100%; vertical-align: top } .preview { position: relative } .preview .img_thumb { vertical-align: middle } .line_table table { width: 100%; border-right: 1px solid; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .line_table table td { padding: 8px 15px 6px; border-left: 1px solid; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); text-align: left; line-height: 20px; color: #444447; color: var(--booking-color-gray20); font-size: 14px; vertical-align: middle } .line_table table td .number_pay { display: inline-block } .fade { display: none; opacity: 0; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); -webkit-transition: opacity .2s ease-in; transition: opacity .2s ease-in } .in { opacity: 1; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100) } .user_header.open { overflow: hidden } .user_header.open .title_area { background-color: #03c75a } .user_header.open .title_area .btn_back { display: none } .user_header.open .title_area .btn_my { display: none } .user_header.open .title_area .btn_close { display: block } .user_header.hub .menu_area { top: 102px } .user_header.hub+.section_contents { margin-top: 46px } .user_header.hub+.section_contents .tab_list_area.fixed { top: 102px } .user_header.place { height: auto; padding-top: 97px; background-color: #fff; background-color: var(--booking-color-surface) } .user_header.place.menu { padding-top: 94px } .user_header.place.menu+.section_img_slider { min-height: 50px; background: #ecf0f2 } .user_header.place.menu+.section_img_slider .img_wrap .img { height: 240px } .user_header.place .header_area { position: fixed; top: 0; left: 0; width: 100%; background-color: #fff; background-color: var(--booking-color-surface); z-index: 5000 } .user_header.place .place_tab { overflow-x: auto; overflow-y: hidden; background-color: #fff; background-color: var(--booking-color-surface); white-space: nowrap; -webkit-overflow-scrolling: touch; -ms-overflow-style: none } .user_header.place .place_tab::-webkit-scrollbar { display: none } .user_header.place .place_tab .tab_inner { display: table; width: 100%; padding: 0 1px; -webkit-box-sizing: border-box; box-sizing: border-box; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .user_header.place .place_tab .tab { display: table-cell; padding: 0 15px; line-height: 20px; text-align: center; vertical-align: top; color: #939396; color: var(--booking-color-gray50) } .user_header.place .place_tab .tab.active { font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .user_header.place .place_tab .tab.active .txt::after { content: ""; position: absolute; right: 0; bottom: -1px; left: 0; height: 2px; border-radius: 2px; background-color: #222225; background-color: var(--booking-color-gray10) } .user_header.place .place_tab .tab.dot .txt::before { content: ""; position: absolute; top: 12px; right: -6px; width: 4px; height: 4px; background-color: #0160ff; border-radius: 50% } .user_header.place .place_tab .tab.new .txt::before { content: ""; position: absolute; top: 12px; right: -6px; width: 4px; height: 4px; background-color: #f3584f; border-radius: 50% } .user_header.place .place_tab .tab .txt { display: inline-block; position: relative; padding: 13px 0; font-size: 17px } .user_header.place+.section_local_option { margin-top: -59px } .user_header.place+.section_local_option .section_img_slider .img_wrap .img { height: 280px } .user_header.place+.section_local_option.smart_order_detail { margin-top: 94px; height: calc(100vh - 181px); min-height: calc(100vh - 181px) } .user_header.place+.section_local_option.smart_order_detail .back_button { display: none } .user_header.place+.naver_order_contents .local_switch_area { top: 10px } .user_header.new { display: -webkit-box; display: -ms-flexbox; display: flex; position: fixed; top: 0; left: 0; width: 100%; height: 50px; background-color: #fff; background-color: var(--booking-color-surface); z-index: 7900 } .user_header.new.scroll { border-bottom: 1px solid rgba(0,0,0,.05); -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.05); box-shadow: 0px 2px 4px 0px rgba(0,0,0,.05) } .user_header.new+.booking_form_wrap { padding-top: 50px } .user_header.new .btn_back { -ms-flex-negative: 0; flex-shrink: 0; position: relative; width: 45px; height: 50px; color: rgba(0,0,0,0) } .user_header.new .btn_back .ico_arrow { position: absolute; top: 50%; left: 18px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 12px; height: 21px; fill: #222225; fill: var(--booking-color-gray10) } .user_header.new .title { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-right: 6px; font-size: 20px; font-weight: 600; line-height: 50px; color: #222225; color: var(--booking-color-gray10); overflow: hidden } .user_header.new .title:first-child { padding-left: 18px } .user_header.new .title .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .user_header.new .title .btn_more { -ms-flex-negative: 0; flex-shrink: 0; width: 18px; height: 18px; margin: 2px 0 0 5px; border: 1px solid; border-color: #c5c5c7; border-color: var(--booking-color-gray60); border-radius: 50%; font-size: 10px; line-height: 18px; color: #c5c5c7; color: var(--booking-color-gray60); text-align: center } .user_header.new .title .btn_more .fn-booking::before { font-weight: bold } .user_header.new .translator_box { position: relative } .user_header.new .translator_box .btn_translator { height: 36px; margin: 7px 12px 0 0; padding: 0 12px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 18px; background-color: #fff; background-color: var(--booking-color-surface); font-size: 14px; color: #555558; color: var(--booking-color-gray30) } .user_header.new .translator_box .btn_translator.open { border-color: #03aa5a; font-weight: 600; color: #03aa5a } .user_header.new .translator_box .btn_translator.open .fn-booking { color: #03aa5a } .user_header.new .translator_box .btn_translator .fn-booking { margin-left: 6px; font-size: 12px; color: #939396; color: var(--booking-color-gray50); vertical-align: -1px } .user_header.new .translator_box .btn_translator .fn-booking::before { font-weight: bold } .user_header.new .translator_box .translator_layer { position: absolute; top: 51px; right: 12px; width: 100px; padding: 8px 16px; border: 1px solid; border-color: #939396; border-color: var(--booking-color-gray50); border-radius: 12px; background-color: #fff; background-color: var(--booking-color-surface); -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,.2); box-shadow: 0px 3px 6px 0px rgba(0,0,0,.2) } .user_header.new .translator_box .translator_layer .btn { width: 100%; padding: 6px 0; font-size: 14px; color: #555558; color: var(--booking-color-gray30); text-align: left } .user_header.new .translator_box .translator_layer .btn.selected { font-weight: 600; color: #03aa5a } .user_header.new .btn_place_my { -ms-flex-negative: 0; flex-shrink: 0; position: relative; width: 34px; height: 34px; margin: 6px 15px 0 0; padding: 2px } .user_header.new .btn_place_my .profile_area { position: relative; width: 32px; height: 32px; border: 1px solid; border-color: #fff; border-color: var(--booking-color-surface); border-radius: 50%; -webkit-box-shadow: 1px 1px 6px 0 rgba(0,0,0,.1); box-shadow: 1px 1px 6px 0 rgba(0,0,0,.1) } .user_header.new .btn_place_my .profile_area::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgba(0,0,0,.05); border-radius: 50% } .user_header.new .btn_place_my .profile_area .img { border-radius: 50% } .user_header.new .btn_place_my .ico_label { position: absolute; top: 2px; right: -1px; width: 19px; height: 12px } .user_header.new+.section_contents,.user_header.new+.dimmed+.biz_item_menu_modal+.section_contents { padding-top: 50px; -webkit-box-sizing: border-box; box-sizing: border-box } .user_header.new+.section_contents .tab_list_area.fixed,.user_header.new+.dimmed+.biz_item_menu_modal+.section_contents .tab_list_area.fixed { top: 50px } .user_header .header_wrap { z-index: 9000; position: fixed; top: 0; left: 0; width: 100%; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .user_header .hub_header { height: 46px; background-color: #fff; text-align: center } .user_header .hub_header .hub_title { display: block; margin: 0 18px; font-size: 15px; font-family: NanumSquareEB,"Apple SD Gothic Neo",Helvetica Nenu,Helvetica,sans-serif; line-height: 46px; color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .user_header .hub_header .ico_home { width: 16px; height: 16px; background-position: -374px -375px; margin-right: 6px; vertical-align: -2px } .user_header .title_area { position: relative; height: 56px } .user_header .title_area.bg_green { -webkit-overflow-scrolling: touch; background-color: #03c75a; -webkit-transition: background-color .4s ease-out; transition: background-color .4s ease-out } .user_header .title_area .btn_back { position: absolute; top: 0; left: 0; padding: 19px 0 13px 18px } .user_header .title_area .btn_back .ico_back { position: relative; display: inline-block; width: 22px; height: 17px; vertical-align: top } .user_header .title_area .btn_back .ico_back:before { content: ""; position: absolute; border-top: 2px solid #fff; border-left: 2px solid #fff; top: 50%; width: 10px; height: 10px; left: 9px; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg) } .user_header .title_area .btn_back .ico_back:after { content: ""; position: absolute; background-color: #fff; top: 50%; left: 1px; width: 21px; height: 2px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .user_header .title_area .top_tit { overflow: hidden; height: 56px; margin: 0 55px 0 50px; line-height: 56px; text-align: center } .user_header .title_area .top_tit .tit_inner { display: inline-block; vertical-align: top; max-width: 100% } .user_header .title_area .top_tit .btn { float: right; margin-left: 5px; padding: 0 3px } .user_header .title_area .top_tit .btn [class*=ico_] { border: 1px solid #fff; border-radius: 50%; padding: 7px 4px 6px; vertical-align: -4px } .user_header .title_area .top_tit .btn .ico_up { position: relative; display: inline-block; width: 11px; height: 6px } .user_header .title_area .top_tit .btn .ico_up:before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-top: 2px; border-top: 1px solid #fff; border-left: 1px solid #fff } .user_header .title_area .top_tit .btn .ico_down { position: relative; display: inline-block; width: 11px; height: 6px } .user_header .title_area .top_tit .btn .ico_down:before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-top: -2px; border-right: 1px solid #fff; border-bottom: 1px solid #fff } .user_header .title_area .top_tit .tit { overflow: hidden; display: block; font-size: 20px; color: #fff; font-weight: bold; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .user_header .title_area .btn_my { color: #fff } .user_header .title_area .btn_close { display: none; z-index: 100; position: absolute; top: 0; right: 0; padding: 16px 18px 16px 0; font-size: 21px; color: #fff; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box } .user_header .title_area .btn_close .ico_close { position: relative; display: inline-block; width: 18px; height: 18px } .user_header .title_area .btn_close .ico_close:before,.user_header .title_area .btn_close .ico_close:after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 1px; background-color: #fff } .user_header .title_area .btn_close .ico_close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .user_header .title_area .btn_close .ico_close:after { -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg) } .user_header .seat_info_area { padding: 6px 20px 18px; font-size: 14px; font-weight: bold; line-height: 17px; color: #fff } .user_header .seat_info_area::before { content: ""; display: inline-block; vertical-align: -2px; margin-right: 6px; width: 14px; height: 14px; background-position: -417px -522px } .user_header .seat_info_area .seat_num::before { content: ""; display: inline-block; vertical-align: -1px; width: 1px; height: 12px; margin: 0 6px; background-color: #ededed; opacity: .3; position: absolute; top: 20px; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: #222225; background-color: var(--booking-color-gray10) } .user_header .seat_info_area .seat_num+.menu_item { border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .user_header .seat_info_area .seat_num .item { display: block; font-size: 16px; color: #444447; color: var(--booking-color-gray20); text-decoration: none } .user_header .seat_info_area .seat_num .item .price { color: #ff5658 } .user_header .seat_info_area { padding: 6px 20px 18px; font-size: 14px; font-weight: bold; line-height: 17px; color: #fff } .user_header .seat_info_area::before { content: ""; display: inline-block; vertical-align: -2px; margin-right: 6px; width: 14px; height: 14px; background-position: -417px -522px } .user_header .seat_info_area .seat_num::before { content: ""; display: inline-block; vertical-align: -1px; width: 1px; height: 12px; margin: 0 6px; background-color: #ededed; opacity: .3 } .logo { z-index: 100; position: absolute; top: 0; left: 0; height: 48px } .logo .lnk_logo { float: left; padding: 11px 0px 11px 12px } .logo .lnk_logo+.lnk_logo { padding: 11px 15px 12px 0 } .logo .bk_logo { font-size: 21px; color: #fff; font-weight: 400 } .btn_my { z-index: 100; position: absolute; top: 0; right: 0; padding: 15px 18px 17px 0; font-size: 21px; font-weight: 500; color: #444447; color: var(--booking-color-gray20); -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box } .btn_my:hover { text-decoration: none } .top_title { z-index: 8000; position: fixed; top: 0; left: 0; width: 100%; height: 56px; background-color: #fff; background-color: var(--booking-color-surface); border-bottom: 1px solid rgba(0,0,0,.1); -moz-background-clip: padding; -webkit-background-clip: padding; background-clip: padding-box; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) } .top_title.gr { background-color: #03c75a; border-bottom: none } .top_title.gr .btn_back .ico_back { position: relative; display: inline-block; width: 20px; height: 18px } .top_title.gr .btn_back .ico_back:before { content: ""; position: absolute; border-top: 2px solid #fff; border-left: 2px solid #fff; top: 50%; width: 11px; height: 11px; left: 9px; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg) } .top_title.gr .btn_back .ico_back:after { content: ""; position: absolute; background-color: #fff; top: 50%; left: 1px; width: 19px; height: 2px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .top_title.gr .btn_back .fn-backward1 { color: #fff } .top_title.gr .title { color: #fff } .top_title.gr .title .fn-home1 { color: #fff } .top_title.gr .btn_my { color: #fff } .top_title+.booking_form_wrap { padding-top: 56px } .top_title .btn_back { position: absolute; top: 0; left: 0; padding: 17px 0 11px 17px } .top_title .btn_back .ico_back { position: relative; display: inline-block; width: 20px; height: 18px } .top_title .btn_back .ico_back:before { content: ""; position: absolute; border-top: 2px solid var(--booking-color-gray20); border-left: 2px solid var(--booking-color-gray20); top: 50%; width: 11px; height: 11px; left: 9px; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg) } .top_title .btn_back .ico_back:after { content: ""; position: absolute; background-color: var(--booking-color-gray20); top: 50%; left: 1px; width: 19px; height: 2px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .top_title .btn_back .fn-backward1 { color: #444447; color: var(--booking-color-gray20); font-size: 22px } .top_title .btn_back .fn-backward1::before { font-weight: bold } .top_title .title { display: block; margin: 0 55px 0 50px; padding: 16px 0; font-weight: 600; font-size: 20px; letter-spacing: -1px; color: #444447; color: var(--booking-color-gray20); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .top_title .title .fn-home1 { margin-right: 6px; vertical-align: -1px; font-size: 18px; color: #444447; color: var(--booking-color-gray20) } .top_title .title .fn-home1:before { font-weight: bold } .shopping_header { position: relative; height: 56px } .shopping_header .btn_back { padding: 17px 2px 7px 10px } .shopping_header .btn_back i { font-size: 26px } .shopping_header .logo.shopping_live { left: 38px; height: auto; padding: 15px 0 4px } .shopping_header .logo .logo_shopping_live { width: 85px; height: 31px; background-position: -136px -225px; width: 85px; color: rgba(0,0,0,0) } .shopping_header .btn_my { z-index: 100; position: absolute; top: 0; right: 0; padding: 16px 17px 16px 0; color: #000 } .footer { z-index: 9001; overflow: hidden; position: relative; padding: 28px 16px 40px; background-color: #f0f0f3; background-color: var(--booking-color-background); word-wrap: break-word; text-align: center } .footer.padding { padding-bottom: 90px } .footer .btn_area { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 720px; margin: 0 auto 28px; -webkit-box-sizing: border-box; box-sizing: border-box } .footer .btn_area .btn_default { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 44px; border-radius: 8px 0px 0px 8px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); font-size: 13px; line-height: 20px; color: #222225; color: var(--booking-color-gray10); word-break: keep-all; text-align: center } .footer .btn_area .btn_default+.btn_default { border-left: 0; border-radius: 0 8px 8px 0 } .footer .btn_area .btn_default.no_agreed { color: #03aa5a } .footer .btn_area .btn_default .ico_smartbot { width: 31px; height: 20px; margin-right: 4px } .footer .btn_area .btn_default .fn-alert1 { margin-right: 4px; font-size: 15px; color: #03aa5a } .footer .btn_area .btn_default .fn-alert1::before { font-weight: bold } .footer .btn_area .btn_top { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 44px; height: 44px; margin-left: 4px; border-radius: 8px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; background-color: var(--booking-color-surface) } .footer .btn_area .btn_top .fn-up1 { font-size: 17px; color: #77777a; color: var(--booking-color-gray40) } .footer .btn_area .btn_top .fn-up1::before { font-weight: bold } .footer .list_lang { padding-bottom: 11px } .footer .list_lang .lang_select { position: relative; display: inline-block; vertical-align: top; min-width: 106px } .footer .list_lang .lang_select.unfold .fn-booking-down1 { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .footer .list_lang .lang_select.unfold .select_tit { border-radius: 4px 4px 0 0 } .footer .list_lang .lang_select.unfold .select_lst { display: block } .footer .list_lang .lang_select .select_tit { display: block; position: relative; padding: 5px 12px 5px 10px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 4px; background-color: #fff; background-color: var(--booking-color-surface); font-size: 13px; line-height: 17px; text-align: left; color: #444447; color: var(--booking-color-gray20) } .footer .list_lang .lang_select .ico_lang { width: 13px; height: 14px; background-position: -144px -418px; margin-right: 13px; vertical-align: -3px } .footer .list_lang .lang_select .fn-booking-down1 { position: absolute; top: 8px; right: 12px; color: #555558; color: var(--booking-color-gray30); font-size: 11px } .footer .list_lang .lang_select .select_lst { display: none; position: absolute; top: 100%; left: 0; right: 0; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 0 0 4px 4px; border-top: 0; background-color: #fff; background-color: var(--booking-color-surface); text-align: left; z-index: 10 } .footer .list_lang .lang_select .select_lst .item+.item { border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80) } .footer .list_lang .lang_select .select_lst .item .txt { display: block; padding: 0 12px; font-size: 14px; line-height: 35px; color: #444447; color: var(--booking-color-gray20) } .footer .list_link { text-align: center } .footer .list_link .item { display: inline-block; vertical-align: top; font-size: 14px; line-height: 20px } .footer .list_link .item+.item::before { content: ""; display: inline-block; vertical-align: 3px; width: 3px; height: 3px; border-radius: 50%; margin: 0 4px; background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .footer .list_link .item .anchor { display: inline-block; color: #77777a; color: var(--booking-color-gray40) } .footer .list_link .item .anchor strong { font-weight: 600 } .footer .desc_area { margin-top: 4px; font-size: 13px; line-height: 20px; color: #939396; color: var(--booking-color-gray50); word-break: keep-all } .footer .corp_info_area { padding-top: 16px } .footer .corp_info_area .info_title { display: block; font-size: 14px; line-height: 20px; color: #77777a; color: var(--booking-color-gray40) } .footer .corp_info_area .info_title .fn { margin-left: 4px; color: #939396; color: var(--booking-color-gray50); font-size: 11px } .footer .corp_info_area .info_title .fn::before { font-weight: bold } .footer .corp_info_area .info_list { max-width: 720px; margin: 12px auto 0 } .footer .corp_info_area .info_item { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 13px; line-height: 18px; text-align: left } .footer .corp_info_area .info_item .tit { -ms-flex-negative: 0; flex-shrink: 0; min-width: 112px; color: #939396; color: var(--booking-color-gray50) } .footer .corp_info_area .info_item .txt { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; color: #77777a; color: var(--booking-color-gray40) } .footer .corp_info_area .info_item .txt .tel { display: block; color: #77777a; color: var(--booking-color-gray40) } .footer .footer_logo { display: inline-block; margin-top: 24px } .footer .footer_logo .ico_naver { display: block; width: 74px; height: 14px; fill: #b6bcc7 } .footer .footer_logo .ico_line_logo { width: 79px; height: 11px; background-position: -102px -343px } .footer_jp { background-color: #f7f7f7; background-color: var(--yahoo-color-gray10) } .footer_jp.padding { padding-bottom: 92px } .footer_jp .footer_inner { max-width: 1024px; margin: 0 auto; padding: 24px 0; border-top: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30) } .footer_jp .footer_link { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .footer_jp .footer_link+.footer_link { margin-top: 8px } .footer_jp .footer_link .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .footer_jp .footer_link .item+.item::before { content: ""; width: 4px; height: 1px; margin: 0 4px; background-color: #aaa; background-color: var(--yahoo-color-text-disabled) } .footer_jp .footer_link .anchor { display: block; font-size: 12px; line-height: 14px; color: #0b62e5; color: var(--yahoo-color-text-link) } .footer_jp .footer_logo { margin-top: 20px; font-size: 10px; line-height: 12px; color: #777; color: var(--yahoo-color-text-secondary); text-align: center } .bg_dimm { z-index: 9999; position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; display: block; height: 100%; background-color: #000; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50) } .dimm_dark { display: none; z-index: 9100; position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; width: 100%; height: 100%; background-color: #000; opacity: .5; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter: alpha(opacity=50); overflow-y: auto; -webkit-overflow-scrolling: touch } .ly_info { z-index: 20000 !important; overflow: hidden; position: fixed; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); left: 50%; width: 300px; margin-bottom: 20px; padding: 20px 32px 20px; border-radius: 12px; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1),0px 0px 6px 0px rgba(0,0,0,.05); box-shadow: 0px 8px 16px 0px rgba(0,0,0,.1),0px 0px 6px 0px rgba(0,0,0,.05); background-color: #fff; background-color: var(--booking-color-surface); text-align: center; word-break: keep-all } .ly_info .icon { margin-top: 8px } .ly_info .icon.ico_alert { width: 75px; height: 75px; background-position: -165px -146px } .ly_info .icon.ico_adult { width: 33px; height: 32px; background-position: -555px -253px } .ly_info .icon.ico_order { width: 38px; height: 38px; background-position: -550px -359px } .ly_info .icon.ico_alert_green { width: 37px; height: 37px; background-position: -453px -116px } .ly_info .icon.ico_check_green { width: 38px; height: 38px; background-position: 0px -358px } .ly_info .icon.ico_green_mark { width: 30px; height: 30px; background-position: -401px -74px } .ly_info .icon.ico_alarm { width: 54px; height: 54px; background-position: -80px -225px } .ly_info .in_ly_tit { margin-top: 8px; font-size: 17px; font-weight: 700; line-height: 22px; color: #222225; color: var(--booking-color-gray10) } .ly_info .in_ly_dsc { position: relative; margin-top: 8px; font-size: 15px; line-height: 20px; color: #555558; color: var(--booking-color-gray30) } .ly_info .in_ly_dsc .black { color: #000; color: var(--booking-color-gray0) } .ly_info .in_ly_dsc .blue { color: #0069c2 } .ly_info .in_ly_dsc .green { color: #03aa5a !important } .ly_info .in_ly_dsc .underline { text-decoration: underline !important } .ly_info .in_ly_dsc .pink { color: #f82222 } .ly_info .in_ly_dsc .dsc_dtc { display: block; margin-bottom: 5px } .ly_info .in_ly_dsc .dsc_dtc.gray { padding-top: 1px; font-size: 15px } .ly_info .ly_info_code .code { margin: 6px auto 11px; padding: 0 5px; width: 200px; height: 38.5px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); color: #ccc } .ly_info .ly_info_code .code:focus { padding: 0 5px; border: 2px solid #0abe16; color: #0abe16; outline: none } .ly_info .ly_info_code .green { display: none } .ly_info .ly_sub_dsc { margin-top: 8px; font-size: 13px; line-height: 18px; color: #77777a; color: var(--booking-color-gray40) } .ly_info .gray { color: #999 } .ly_info .highlight { color: #03aa5a } .ly_info.my { width: 291px; padding: 28px 18px 75px } .ly_info.my .in_ly_tit { font-size: 18px; line-height: 23px; color: #222225; color: var(--booking-color-gray10) } .ly_info.my .in_ly_dsc { margin-top: 12px; line-height: 21px; color: #77777a; color: var(--booking-color-gray40) } .ly_info.my .info { padding-bottom: 3px; font-size: 15px; line-height: 20px; color: #222225; color: var(--booking-color-gray10) } .ly_info.my .refund_info { margin-top: 13px; padding-top: 18px; border-top: 1px solid; border-top-color: #f0f0f3; border-top-color: var(--booking-color-gray90); font-size: 14px; color: #444447; color: var(--booking-color-gray20); text-align: left } .ly_info.my .cancel_input_box { margin: 18px 0 -7px } .ly_info.my .cancel_input_box .input_text { width: 100%; padding: 9px; background-color: #fff; background-color: var(--booking-color-surface); border-radius: 10px; border: solid 1px; border-color: #d9d9dc; border-color: var(--booking-color-gray70); font-size: 14px; color: #444447; color: var(--booking-color-gray20); text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box } .ly_info.my .cancel_input_box .input_text::-webkit-input-placeholder { color: #939396; color: var(--booking-color-gray50) } .ly_info.my .cancel_input_box .input_text::-moz-placeholder { color: #939396; color: var(--booking-color-gray50) } .ly_info.my .cancel_input_box .input_text:-ms-input-placeholder { color: #939396; color: var(--booking-color-gray50) } .ly_info.my .cancel_input_box .input_text::-ms-input-placeholder { color: #939396; color: var(--booking-color-gray50) } .ly_info.my .cancel_input_box .input_text::placeholder { color: #939396; color: var(--booking-color-gray50) } .ly_info.my .refund_list { margin: 11px 0; text-align: left } .ly_info.my .refund_list .refund_item { position: relative; padding-left: 15px } .ly_info.my .refund_list .refund_item+.refund_item { margin-top: 10px } .ly_info.my .refund_list .refund_item .title { font-size: 15px; font-weight: bold; color: #222225; color: var(--booking-color-gray10) } .ly_info.my .refund_list .refund_item .desc { font-size: 14px; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .ly_info.my .refund_list .refund_item:before { content: ""; position: absolute; top: 9px; left: 0; width: 5px; height: 5px; border-radius: 50%; background-color: #222225; background-color: var(--booking-color-gray10) } .ly_info.my .refund_link { position: absolute; bottom: 72px; right: 21px; padding: 5px; font-size: 13px; line-height: 20px; color: #444447; color: var(--booking-color-gray20); text-decoration: underline } .ly_info.my .pop_bottom_btnarea { position: absolute; bottom: 0; left: 0; right: 0; padding-top: 0; border-top: 1px solid; border-top-color: #f0f0f3; border-top-color: var(--booking-color-gray90) } .ly_info.my .pop_bottom_btnarea:before,.ly_info.my .pop_bottom_btnarea:after { content: " "; display: table } .ly_info.my .pop_bottom_btnarea:after { clear: both } .ly_info.my .pop_bottom_btnarea .btn+.btn { margin-left: 0; border-left: 1px solid; border-left-color: #f0f0f3; border-left-color: var(--booking-color-gray90) } .ly_info.my .pop_bottom_btnarea .btn.confirm .btn_bottom { background-color: rgba(0,0,0,0); color: #287cff; color: var(--booking-color-myplace-blue) } .ly_info.my .pop_bottom_btnarea .btn .btn_bottom { padding: 17px 0; border: none; font-size: 16px; font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .ly_info.jp { width: 288px; padding: 40px 20px 20px; border-radius: 4px; text-align: left } .ly_info.jp .in_ly_tit { font-size: 16px; line-height: 21px; letter-spacing: normal; color: #444; color: var(--yahoo-color-text-primary) } .ly_info.jp .in_ly_tit+.in_ly_dsc { margin-top: 20px } .ly_info.jp .in_ly_dsc { font-size: 14px; line-height: 21px; color: #444; color: var(--yahoo-color-text-primary) } .ly_info.jp .pop_bottom_btnarea { padding-top: 28px } .ly_info.jp .pop_bottom_btnarea .btn+.btn { margin-left: 8px } .ly_info.jp .pop_bottom_btnarea .btn.confirm .btn_bottom { border-color: #1a75ff; border-color: var(--yahoo-color-blue100); background-color: #1a75ff; background-color: var(--yahoo-color-blue100); font-weight: 700; color: #fff } .ly_info.jp .pop_bottom_btnarea .btn .btn_bottom { padding: 12px 0; border-color: #ddd; border-color: var(--yahoo-color-gray30); border-radius: 4px; color: #444; color: var(--yahoo-color-text-primary) } .ly_info.jp .popup_btn_close { padding: 17px; line-height: 18px } .ly_info.jp .popup_btn_close .ico_close { width: 14px; height: 14px; fill: #444; fill: var(--yahoo-color-text-primary) } .ly_info .popup_coupon_notes { overflow-x: hidden; overflow-y: auto; max-height: 262px; font-size: 14px; line-height: 22px; color: #444447; color: var(--booking-color-gray20); text-align: left } .ly_info .popup_coupon_notes .title { display: inline-block; padding-bottom: 10px; font-size: 16px } .ly_info .popup_coupon_notes .coupon_num { float: right; color: #77777a; color: var(--booking-color-gray40) } .ly_info .popup_coupon_benefit { margin-top: 8px } .ly_info .popup_coupon_benefit .info { margin-top: 8px; font-size: 13px; line-height: 18px; color: #77777a; color: var(--booking-color-gray40) } .ly_info .popup_delivery_fee .icon { width: 40px; height: 40px; -webkit-transform: scaleX(-1); transform: scaleX(-1) } .ly_info .popup_delivery_fee .in_ly_dsc { margin-top: 5px; font-size: 14px; line-height: 19px } .ly_info .popup_delivery_fee .delivery_fee { margin: 24px 0 9px; font-size: 14px; line-height: 1.2; text-align: left } .ly_info .popup_delivery_fee .title { margin-bottom: 15px; padding-bottom: 7px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-weight: 700 } .ly_info .popup_delivery_fee .wrap_text { display: -webkit-box; display: -ms-flexbox; display: flex } .ly_info .popup_delivery_fee .wrap_text+.wrap_text { margin-top: 10px } .ly_info .popup_delivery_fee .wrap_text .txt_green { font-weight: 700; color: #00c98b } .ly_info .popup_delivery_fee .text2 { margin-left: auto; -webkit-box-flex: 0; -ms-flex: none; flex: none } .ly_info .popup_cancel_booking_2nd .pop_cancel { margin-top: 20px; padding-top: 20px; border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80) } .ly_info .popup_cancel_booking_2nd .pop_cancel .cancel_text { line-height: 28px; letter-spacing: -0.5px; text-align: center } .ly_info .popup_cancel_booking_2nd .pop_cancel .cancel_text+.load_area_wrapper { margin-top: 14px } .ly_info .popup_move_npay .load_area_wrapper { margin-top: 8px } .ly_info .popup_move_npay .npay_title { padding-top: 15px; font-size: 18px; font-weight: bold; color: #222225; color: var(--booking-color-gray10) } .ly_info .popup_move_loading .load_area_wrapper { margin-top: 8px } .ly_info .popup_move_loading .in_ly_tit { margin-top: 20px } .ly_info .popup_like_guide { margin: -2px -5px -10px; text-align: left } .ly_info .popup_like_guide .in_ly_tit { margin-top: 0; padding-bottom: 15px; border-bottom: 1px solid; border-bottom-color: #e9e9ec; border-bottom-color: var(--booking-color-gray80); color: #000; color: var(--booking-color-gray0) } .ly_info .popup_like_guide .in_ly_dsc { margin-top: 15px } .ly_info .popup_store_payment { margin: -8px -25px -15px } .ly_info .popup_store_payment .guide_text { padding: 0 18px 12px; border-bottom: 1px solid; border-bottom-color: #f0f0f3; border-bottom-color: var(--booking-color-gray90); color: #222225; color: var(--booking-color-gray10); font-size: 15px; text-align: left } .ly_info .popup_store_payment .guide_text .ico_npay_square { width: 42px; height: 16px; margin-right: 3px; vertical-align: -2px; fill: #03c75a } .ly_info .popup_store_payment .guide_contents { padding: 18px 0 0 0 } .ly_info .popup_store_payment .guide_contents .info_text { white-space: nowrap } .ly_info.popup_service_stop .ly_sub_dsc { font-size: 15px; line-height: 24px; text-align: left } .ly_info.popup_service_stop .ly_sub_dsc .alert_link { font-weight: 700; color: #444447; color: var(--booking-color-gray20) } .ly_info.popup_service_stop .sub_dsc { font-size: 15px; line-height: 24px; text-align: left } .ly_info .popup_cancel_booking_jp .text_booking { margin-top: 20px; font-size: 14px; font-weight: 700; line-height: 21px; color: #444; color: var(--yahoo-color-text-primary) } .ly_info .popup_cancel_booking_jp .text_date_time { font-size: 14px; line-height: 21px; color: #444; color: var(--yahoo-color-text-primary) } .ly_info .popup_cancel_booking_jp .wrap_textarea { position: relative; margin-top: 28px } .ly_info .popup_cancel_booking_jp .textarea { display: block; width: calc(100% - 28px); height: 86px; padding: 10px 13px 30px; border: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); border-radius: 4px; background-color: rgba(0,0,0,0); font-size: 14px; line-height: 21px; color: #444; color: var(--yahoo-color-text-primary) } .ly_info .popup_cancel_booking_jp .textarea::-webkit-input-placeholder { font-size: 14px; line-height: 21px; color: #aaa; color: var(--yahoo-color-text-disabled) } .ly_info .popup_cancel_booking_jp .textarea::-moz-placeholder { font-size: 14px; line-height: 21px; color: #aaa; color: var(--yahoo-color-text-disabled) } .ly_info .popup_cancel_booking_jp .textarea:-ms-input-placeholder { font-size: 14px; line-height: 21px; color: #aaa; color: var(--yahoo-color-text-disabled) } .ly_info .popup_cancel_booking_jp .textarea::-ms-input-placeholder { font-size: 14px; line-height: 21px; color: #aaa; color: var(--yahoo-color-text-disabled) } .ly_info .popup_cancel_booking_jp .textarea::placeholder { font-size: 14px; line-height: 21px; color: #aaa; color: var(--yahoo-color-text-disabled) } .ly_info .popup_cancel_booking_jp .word_limit { position: absolute; right: 14px; bottom: 8px; font-size: 12px; line-height: 19px; color: #aaa; color: var(--yahoo-color-text-disabled); text-align: right } .ly_info .popup_cancel_booking_jp .word_limit .num { color: #444; color: var(--yahoo-color-text-primary) } .pop_bottom_btnarea { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 16px } .pop_bottom_btnarea .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .pop_bottom_btnarea .btn+.btn { margin-left: 6px } .pop_bottom_btnarea .btn.confirm .btn_bottom { border-color: #03aa5a; background-color: #03aa5a; color: #fff } .pop_bottom_btnarea .btn .btn_bottom { display: block; padding: 8px 0; border-radius: 6px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 14px; line-height: 18px; color: #444447; color: var(--booking-color-gray20); text-align: center; text-decoration: none } .popup_btn_close { position: absolute; top: 0; right: 0; padding: 15px 15px 12px 12px; line-height: 18px } .popup_btn_close .ico_close { position: relative; display: inline-block; width: 18px; height: 18px; vertical-align: top } .popup_btn_close .ico_close:before,.popup_btn_close .ico_close:after { content: ""; position: absolute; top: 50%; left: 50%; width: 24px; height: 1px; background-color: var(--booking-color-gray30) } .popup_btn_close .ico_close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .popup_btn_close .ico_close:after { -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg) } @media screen and (min-width: 355px) { .confirm_alert_con .ly_info.my,.popup_cancel_booking .ly_info.my { width:335px } .confirm_alert_con .ly_info.jp,.popup_cancel_booking .ly_info.jp { width: 288px } } .view_more { position: relative; display: block; margin: 6px auto 0; font-size: 16px; line-height: 24px; color: #999; text-align: center; text-decoration: none } .view_more .fn-up2,.view_more .fn-down2 { color: #8f8f8f; vertical-align: -0.5px !important; font-size: 12px } .view_more.type_gradient { margin-top: 16px } .view_more.type_gradient::before { content: ""; display: block; position: absolute; top: -30px; left: 0; right: 0; height: 30px; background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(0%, rgba(255, 255, 255, 0)), to(rgb(255, 255, 255))); background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%, rgb(255, 255, 255) 100%); background: -webkit-gradient(linear, left top, left bottom, from(var(--booking-color-surface-rgb)), color-stop(0%, var(--booking-color-surface-rgb)), to(var(--booking-color-surface))); background: linear-gradient(to bottom, var(--booking-color-surface-rgb) 0%, var(--booking-color-surface-rgb) 0%, var(--booking-color-surface) 100%); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#00ffffff", endColorstr="#ffffff", GradientType=0) } .view_more.no_gradient::before { content: none } .fixed_btn_area { padding: 12px; background-color: #f0f0f3; background-color: var(--booking-color-background) } .fixed_btn_area .fixed_btn_group { display: table; table-layout: fixed; width: 100%; max-width: 720px; margin: 0 auto; border-collapse: separate; border-spacing: 6px } .fixed_btn_area .reserve_btn { display: table-cell; width: auto; border-radius: 5px; background-color: #00d780; font-size: 18px; font-weight: bold; line-height: 52px; color: #fff; text-align: center; text-decoration: none } .fixed_btn_area .reserve_btn .fn-booking-reserve { margin-right: 8px; vertical-align: -2px } .fixed_btn_area .reserve_btn .ico_n_square { width: 18px; height: 18px; margin-right: 6px; vertical-align: -3px; fill: #fff } .fixed_btn_area .reserve_btn.disabled { background-color: #d9d9dc; background-color: var(--booking-color-gray70); color: #fff; color: var(--booking-color-gray100) } .fixed_btn_area .talktalk_btn { display: table-cell; margin-left: 6px; width: 54px; border-radius: 5px; background-color: #fff; background-color: var(--booking-color-surface); line-height: 52px; text-align: center } .fixed_btn_area .talktalk_btn .ico_talktalk { vertical-align: -6px; width: 23px; height: 23px; background-position: -373px -72px } .box_service_stop { max-width: 720px; margin: 12px auto 0 } .service_stop { margin: 0 6px; padding: 14px; font-weight: 700; font-size: 14px; line-height: 20px; text-align: center; color: #fc4c42; background-color: #f7f7f9; background-color: var(--booking-color-gray95); border: 1px solid rgba(0,0,0,.07); border-radius: 5px } .service_stop .service_stop_time { font-size: 13px } .service_stop .detail_link { font-weight: 500; line-height: 17px; color: #fc4c42 } .service_stop .detail_link .fn-booking-forward1 { font-size: 11px } input { vertical-align: middle } input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus,input:-webkit-autofill:active { -webkit-text-fill-color: var(--booking-color-gray10); -webkit-box-shadow: 0 0 0px 1000px #fff inset; box-shadow: 0 0 0px 1000px #fff inset; -webkit-box-shadow: 0 0 0px 1000px var(--booking-color-surface) inset; box-shadow: 0 0 0px 1000px var(--booking-color-surface) inset } input[type=checkbox],input[type=radio],input[type=file],select.rating_select,select.select_policy_history { -webkit-appearance: none; -webkit-border-radius: 0; -ms-appearance: none; -moz-appearance: none; appearance: none; border-style: none; border: none } input:checked[type=checkbox],input:checked[type=radio],select.rating_select,select.booking_option_select { -webkit-appearance: none; -webkit-border-radius: 0; -ms-appearance: none; -moz-appearance: none; appearance: none; border-style: none; border: none } select.rating_select::-ms-expand,select.booking_option_select::-ms-expand,select.select_policy_history::-ms-expand { display: none } input[type=checkbox].chk_custom,input[type=radio].rating_input,input[type=checkbox].chk_agree,input[type=radio].chk_agree { overflow: hidden; width: 1px; height: 1px; border: 0; outline: 0; z-index: -1 } input[type=checkbox].chk_custom+.label,input[type=checkbox].chk_agree+.label,input[type=radio].chk_agree+.label { position: relative; display: inline-block; height: 20px; line-height: 20px } input[type=checkbox].chk_custom+.label { height: auto } input[type=checkbox].chk_custom+.label { padding-left: 29px } input[type=checkbox].chk_custom:focus+.label:before,input[type=checkbox].chk_agree:focus+.label:before,input[type=radio].chk_agree:focus+.label:before { outline: 1px dotted #000; outline: -webkit-focus-ring-color auto 5px } input[type=checkbox].chk_custom+.label:before,input[type=checkbox].chk_agree+.label:before,input[type=radio].chk_agree+.label:before { content: ""; overflow: hidden; display: inline-block; color: rgba(0,0,0,0); background-image: url("../assets/spr_book2.png?1805211100"); background-size: 330px 550px; vertical-align: top } input[type=checkbox].chk_custom+.label:before { background-image: url("../assets/spr_book.png?1602181400"); background-size: 400px 400px; margin-right: 6px; width: 21px !important; height: 21px !important; background-position: -46px -372px; position: absolute; top: 0; left: 0 } input[type=checkbox].chk_agree+.label:before,input[type=radio].chk_agree+.label:before { margin-right: 10px; width: 26px !important; height: 26px !important; background-position: -47px -273px; vertical-align: -8.5px } input[type=checkbox].chk_custom:checked+.label:before { background-image: url("../assets/spr_book.png?1602181400"); background-size: 400px 400px; background-position: -68px -372px; background-color: rgba(0,0,0,0) } input[type=checkbox].chk_agree:checked+.label:before,input[type=radio].chk_agree:checked+.label:before { background-position: -75px -273px; background-color: rgba(0,0,0,0) } input[type=search],input[type=text],input[type=password],input[type=email],input[type=tel] { -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; appearance: none; padding-left: 10px; border: 1px solid #e5e5e5; border-radius: 0 } input[type=text].text { font-size: 15px } button,input[type=button],input[type=submit],input[type=reset] { -webkit-appearance: button; -ms-appearance: none; border-radius: 0 } textarea { -webkit-appearance: none; -ms-appearance: none; border: 1px solid #e5e5e5; border-radius: 0 } textarea.textarea { padding-top: 10px; padding-left: 8px } textarea.textarea::-moz-placeholder { color: #989898; opacity: 1; font-size: 15px } textarea.textarea:-ms-input-placeholder { color: #989898; font-size: 15px } textarea.textarea::-webkit-input-placeholder { color: #989898; font-size: 15px } select { -webkit-appearance: none; -ms-appearance: none; -moz-appearance: none; appearance: none; background-color: #fff; border: 1px solid #dcdcdc; border-radius: 0; cursor: pointer } .load_area_wrapper { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 7000 } .load_area_wrapper.type_jp.icon_only { min-height: 80px } .load_area_wrapper.type_jp .bg_dimmed_white { background-color: #fff; background-color: var(--yahoo-color-gray0) } .load_area_wrapper.icon_only { position: relative; min-height: 15px } .load_area_wrapper .bg_dimmed_dark { height: 100%; background-color: rgba(0,0,0,.5) } .load_area_wrapper .bg_dimmed_white { height: 100%; background-color: #fff; background-color: var(--booking-color-surface) } .load_area_wrapper .load_area { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translateY(-50%, -50%); text-align: center } .load_area_wrapper .ico_spinner { width: 32px; height: 32px; -webkit-animation: rotate 1s linear infinite; animation: rotate 1s linear infinite } .load_area_wrapper .icon { width: 38px; height: 10px; margin: 0 auto } .load_area_wrapper .icon.type_grey .dot1 { background-color: #9e9e9e } .load_area_wrapper .icon.type_grey .dot2 { background-color: #e0e0e0 } .load_area_wrapper .icon.type_grey .dot3 { background-color: #bdbdbd } .load_area_wrapper .icon.type_grey .dot4 { background-color: #9e9e9e } .load_area_wrapper .icon.type_grey .dot5 { background-color: #e0e0e0 } .load_area_wrapper .icon.type_grey .dot6 { background-color: #bdbdbd } .load_area_wrapper .icon .dot { position: absolute; width: 10px; height: 10px; border-radius: 5px; background: #333; -webkit-animation-duration: 1.5s; animation-duration: 1.5s; -webkit-animation-timing-function: ease-in-out; animation-timing-function: ease-in-out; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite } .load_area_wrapper .icon .dot1 { background-color: #2196f3; -webkit-animation-name: dot1; animation-name: dot1 } .load_area_wrapper .icon .dot2 { background-color: #00bcd4; -webkit-animation-name: dot2; animation-name: dot2 } .load_area_wrapper .icon .dot3 { background-color: #03c75a; -webkit-animation-name: dot3; animation-name: dot3 } .load_area_wrapper .icon .dot4 { background-color: #2196f3; -webkit-animation-name: dot4; animation-name: dot4 } .load_area_wrapper .icon .dot5 { background-color: #00bcd4; -webkit-animation-name: dot5; animation-name: dot5 } .load_area_wrapper .icon .dot6 { background-color: #03c75a; -webkit-animation-name: dot6; animation-name: dot6 } .load_area_wrapper .text { margin-top: 12px; font-size: 14px; line-height: 18px; color: #939396; color: var(--booking-color-gray50) } @-webkit-keyframes dot1 { 0% { -webkit-transform: translateX(26px) scale(1); transform: translateX(26px) scale(1) } 30% { -webkit-transform: translateX(26px) scale(0); transform: translateX(26px) scale(0) } 66% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 100% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } } @keyframes dot1 { 0% { -webkit-transform: translateX(26px) scale(1); transform: translateX(26px) scale(1) } 30% { -webkit-transform: translateX(26px) scale(0); transform: translateX(26px) scale(0) } 66% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 100% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } } @-webkit-keyframes dot2 { 0% { -webkit-transform: translateX(13px) scale(1); transform: translateX(13px) scale(1) } 33% { -webkit-transform: translateX(26px) scale(1); transform: translateX(26px) scale(1) } 66% { -webkit-transform: translateX(26px) scale(0); transform: translateX(26px) scale(0) } 100% { -webkit-transform: translateX(26px) scale(0); transform: translateX(26px) scale(0) } } @keyframes dot2 { 0% { -webkit-transform: translateX(13px) scale(1); transform: translateX(13px) scale(1) } 33% { -webkit-transform: translateX(26px) scale(1); transform: translateX(26px) scale(1) } 66% { -webkit-transform: translateX(26px) scale(0); transform: translateX(26px) scale(0) } 100% { -webkit-transform: translateX(26px) scale(0); transform: translateX(26px) scale(0) } } @-webkit-keyframes dot3 { 0% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1) } 33% { -webkit-transform: translateX(13px) scale(1); transform: translateX(13px) scale(1) } 66% { -webkit-transform: translateX(26px) scale(1); transform: translateX(26px) scale(1) } 100% { -webkit-transform: translateX(26px) scale(0); transform: translateX(26px) scale(0) } } @keyframes dot3 { 0% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1) } 33% { -webkit-transform: translateX(13px) scale(1); transform: translateX(13px) scale(1) } 66% { -webkit-transform: translateX(26px) scale(1); transform: translateX(26px) scale(1) } 100% { -webkit-transform: translateX(26px) scale(0); transform: translateX(26px) scale(0) } } @-webkit-keyframes dot4 { 0% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 3% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 33% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1) } 66% { -webkit-transform: translateX(13px) scale(1); transform: translateX(13px) scale(1) } 100% { -webkit-transform: translateX(26px) scale(1); transform: translateX(26px) scale(1) } } @keyframes dot4 { 0% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 3% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 33% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1) } 66% { -webkit-transform: translateX(13px) scale(1); transform: translateX(13px) scale(1) } 100% { -webkit-transform: translateX(26px) scale(1); transform: translateX(26px) scale(1) } } @-webkit-keyframes dot5 { 0% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 33% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 36% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 66% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1) } 100% { -webkit-transform: translateX(13px) scale(1); transform: translateX(13px) scale(1) } } @keyframes dot5 { 0% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 33% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 36% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 66% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1) } 100% { -webkit-transform: translateX(13px) scale(1); transform: translateX(13px) scale(1) } } @-webkit-keyframes dot6 { 0% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 33% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 66% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 69% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 100% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1) } } @keyframes dot6 { 0% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 33% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 66% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 69% { -webkit-transform: translateX(0) scale(0); transform: translateX(0) scale(0) } 100% { -webkit-transform: translateX(0) scale(1); transform: translateX(0) scale(1) } } @-webkit-keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } @keyframes rotate { from { -webkit-transform: rotate(0deg); transform: rotate(0deg) } to { -webkit-transform: rotate(360deg); transform: rotate(360deg) } } .load_area_wrapper .line_loading_icon { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; -webkit-transform: translate(-50%, -50%); transform: translateY(-50%, -50%) } .load_area_wrapper.loading_naver_order { position: fixed } .load_area_wrapper.loading_naver_order .text { color: #fff } .precaution_list .item { position: relative } .precaution_list .item+.item { margin-top: 10px } .precaution_list .item .num { overflow: hidden; position: absolute; top: 4px; left: 0; width: 12px; height: 12px; color: #222225; color: var(--booking-color-gray10); border: 1px solid; border-color: #222225; border-color: var(--booking-color-gray10); border-radius: 50%; font-size: 11px; font-weight: bold; line-height: 12px; text-align: center; white-space: nowrap } .precaution_list .item .num+.cont { padding-left: 19px } .precaution_list .item .cont .title { display: block; padding-bottom: 5px; font-size: 17px; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .precaution_list .item .cont .title:empty { display: none } .precaution_list .item .cont .desc { position: relative; font-size: 16px; line-height: 1.4; color: #222225; color: var(--booking-color-gray10) } .entery_area .ico_green_pass { margin-bottom: 7px; width: 72px; height: 15px; background-position: -231px -358px } .entery_area .ico_mobile_ticket { width: 34px; height: 47px; background-position: -323px -248px } .entery_area .ico_barcode { width: 41px; height: 46px; background-position: -323px -104px } .entery_area .ico_qrcode { width: 41px; height: 46px; background-position: -323px -152px } .entery_area .ico_staff { width: 41px; height: 46px; background-position: -323px -200px } .entery_area .ico_client_info { width: 45px; height: 44px; background-position: -323px -58px } .entery_area .ico_ticket_exchange { width: 49px; height: 36px; background-position: -154px -305px } .entery_area .entery_tit { padding: 17px 21px 14px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 20px; letter-spacing: -0.5px; color: #222225; color: var(--booking-color-gray10); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .entery_area .entery_tit .num { font-weight: bold; color: #0abe16 } .entery_area .entery_info { overflow: hidden; margin: 0 21px; padding: 20px 0 24px; color: #222225; color: var(--booking-color-gray10) } .entery_area .entery_info .info_txt2 { margin-top: 15px; padding-top: 10px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .entery_area .entery_info .info_guide { overflow: hidden; position: relative; margin-top: 10px; padding-top: 14px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .entery_area .entery_info .info_guide.ico_ticket_arrow:before { position: absolute; top: 50%; left: 50%; margin: -18px -15px; width: 29px; height: 25px; background-position: -401px -224px; content: "" } .entery_area .entery_info .info_guide .guide_area { float: left; width: 50% } .entery_area .entery_info .info_guide .guide_area+.guide_area .guide_box { padding: 0 0 0 30px } .entery_area .entery_info .info_guide .guide_box { padding-right: 30px } .entery_area .entery_info .info_guide .guide_box .box_tit { font-size: 15px; font-weight: 600 } .entery_area .entery_info .info_guide .guide_box .box_txt { display: block; font-size: 14px; line-height: 20px; color: #555558; color: var(--booking-color-gray30) } .entery_area .entery_info .info_guide .guide_box .box_ico { display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-align-items: center; height: 50px; margin: 7px 0 12px } .photo_area { padding-top: 20px; border-top: 1px solid #e7e7e7; background-color: #fff; background-color: var(--booking-color-surface) } .photo_area .photo_tit { display: block; font-size: 16px; font-weight: bold; letter-spacing: -0.5px; color: #222225; color: var(--booking-color-gray10) } .photo_area .photo_tit .num { margin-left: 5px; color: #00c73c } .photo_area .photo_box { overflow: hidden; margin: 15px 0; border-radius: 16px } .photo_area .photo_box .photo { position: relative; overflow: hidden; float: left; width: 100%; padding-bottom: 24.673%; -webkit-box-sizing: border-box; box-sizing: border-box } .photo_area .photo_box .photo:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.03) } .photo_area .photo_box .photo:only-child { width: 33%; border-radius: 16px } .photo_area .photo_box .photo:first-child:nth-last-child(2) { width: 33% } .photo_area .photo_box .photo:first-child:nth-last-child(2)~.photo { width: 33%; padding-left: 2px; border-radius: 0 16px 16px 0 } .photo_area .photo_box .photo:first-child:nth-last-child(2)~.photo:after { margin-left: 2px } .photo_area .photo_box .photo:first-child:nth-last-child(3) { width: 33% } .photo_area .photo_box .photo:first-child:nth-last-child(3)~.photo { width: 33.5%; padding-left: 2px } .photo_area .photo_box .photo:first-child:nth-last-child(3)~.photo:after { margin-left: 2px } .photo_area .photo_box .photo:first-child:nth-last-child(4) { width: 25% } .photo_area .photo_box .photo:first-child:nth-last-child(4)~.photo { width: 25%; padding-left: 2px } .photo_area .photo_box .photo:first-child:nth-last-child(4)~.photo:after { margin-left: 2px } .photo_area .photo_box .photo:first-child:nth-last-child(5) { width: 50%; margin-top: 2px; padding-bottom: 49.85% } .photo_area .photo_box .photo:first-child:nth-last-child(5)~.photo { width: 25%; padding: 2px 0 24.65% 2px } .photo_area .photo_box .photo:first-child:nth-last-child(5)~.photo:after { margin: 2px 0 0 2px } .photo_area .photo_box .photo:first-child:nth-last-child(5)~.photo.top { padding-top: 0 } .photo_area .photo_box .photo:first-child:nth-last-child(5)~.photo.top:after { margin-top: 0 } .photo_area .photo_box span[class*=photo]:after { display: none } .photo_area .photo_box .img { position: absolute; -o-object-fit: cover; object-fit: cover } .photo_area .photo_share { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-align-items: center; width: 100%; height: 100%; background-color: #f9f9f9; text-align: center } .photo_area .photo_share .share_box .txt { display: block; margin-top: -3px; font-size: 14px; line-height: 17px; color: #989898 } .photo_area .photo_share .share_box .fn-camera1 { font-size: 22px } .photo_more { position: absolute; top: 2px; left: 2px; display: -webkit-box; display: -ms-flexbox; display: flex; display: -webkit-flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-align-items: center; width: 100%; height: 100%; background-color: rgba(0,0,0,.5); color: #fff; text-align: center } .photo_more .num { display: block; margin-top: 3px; font-size: 17px; font-weight: 600; line-height: 20px } .photo_more .ico_photo { vertical-align: middle; width: 18px; height: 18px; background-position: -299px -166px } @media screen and (min-width: 376px) { .photo_area .photo:first-child:nth-last-child(5) { padding-bottom:49.6% !important } } .photo_review_area { border-top: solid 10px; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .photo_review_area.type_home { padding-bottom: 29px; border-top: 0 } .photo_review { overflow: hidden; padding: 12px 0 30px } .photo_review .loading_wrap { position: relative; height: 60px } .photo_review .renewal_tit { padding: 14px 20px 17px; font-size: 18px; font-weight: 600; line-height: 22px; color: #222225; color: var(--booking-color-gray10) } .photo_review .renewal_tit .num { padding-left: 2px; color: #03c75a; font-weight: normal } .photo_review .renewal_area { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none } .photo_review .renewal_area::-webkit-scrollbar { display: none } .photo_review .renewal_list { padding-bottom: 5px; white-space: nowrap } .photo_review .item { display: inline-block; margin-left: 1px; vertical-align: top } .photo_review .item:first-child { margin-left: 20px } .photo_review .item:first-child .photo { overflow: hidden; border-top-left-radius: 12px; border-bottom-left-radius: 12px } .photo_review .item:last-child { margin-right: 20px } .photo_review .item:last-of-type .photo { overflow: hidden; border-top-right-radius: 12px; border-bottom-right-radius: 12px } .photo_review .photo { position: relative; display: block } .photo_review .photo:before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.05) } .photo_review .photo .img { vertical-align: top } .photo_review .photo .count { overflow: hidden; position: absolute; right: 0; bottom: 0; width: 23px; height: 23px; background-color: rgba(0,0,0,.5); font-size: 14px; text-align: center; color: #fff } .photo_review .photo .ico_play_video { position: absolute; left: 6px; bottom: 4px; width: 28px; height: 31px } .photo_review .more { display: inline-block; width: 86px; padding: 12px 0; vertical-align: top; text-align: center } .photo_review .more .ico_more { position: relative; display: inline-block; width: 36px; height: 36px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 50%; -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,.04); box-shadow: 0px 1px 2px rgba(0,0,0,.04); line-height: 38px; vertical-align: top } .photo_review .more .ico_more .ico_arrow { position: relative; display: inline-block; width: 14px; height: 14px } .photo_review .more .ico_more .ico_arrow:before { content: ""; position: absolute; border-top: 1px solid #00cf5a; border-left: 1px solid #00cf5a; top: 50%; width: 9px; height: 9px; right: 7px; -webkit-transform: translate(50%, -50%) rotate(135deg); transform: translate(50%, -50%) rotate(135deg) } .photo_review .more .ico_more .ico_arrow:after { content: ""; position: absolute; background-color: #00cf5a; top: 50%; right: 1px; width: 13px; height: 1px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .photo_review .more .txt_more { display: block; margin-top: 8px; font-size: 14px; line-height: 17px; color: #555558; color: var(--booking-color-gray30) } .photo_layer { -ms-touch-action: pan-y; touch-action: pan-y } .photo_layer .photo_header { position: fixed; top: 0; left: 0; width: 100%; z-index: 1400; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); line-height: 48px } .photo_layer .photo_header .btn_back { position: absolute; width: 50px } .photo_layer .photo_header .btn_back .ico_back { position: relative; display: inline-block; width: 20px; height: 18px; margin: 15px; vertical-align: top } .photo_layer .photo_header .btn_back .ico_back:before { content: ""; position: absolute; border-top: 1px solid #999; border-left: 1px solid #999; top: 50%; width: 12px; height: 12px; left: 9px; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg) } .photo_layer .photo_header .btn_back .ico_back:after { content: ""; position: absolute; background-color: #999; top: 50%; left: 1px; width: 19px; height: 1px; -webkit-transform: translate(0, -50%); transform: translate(0, -50%) } .photo_layer .photo_header .header_tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; margin: 0 50px; font-size: 18px; font-weight: bold; text-align: center; color: #444447; color: var(--booking-color-gray20) } .photo_layer .photo_header .header_tit .tit_inner { display: inline-block; vertical-align: top; max-width: 100% } .photo_layer .photo_header .header_tit .tit_inner .tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; display: block; color: #444447; color: var(--booking-color-gray20) } .photo_layer .photo_header .header_tit .tit_inner .tit .fn.fn-home1 { margin-right: 7px; vertical-align: -1px; font-size: 17px } .photo_layer .photo_header .header_tit .tit_inner .tit .ico_right { float: right; margin: 18px 5px; position: relative; display: inline-block; width: 6px; height: 10px } .photo_layer .photo_header .header_tit .tit_inner .tit .ico_right:before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-left: -2px; border-top: 1px solid #333; border-right: 1px solid #333 } .photo_layer .photo_tab { max-width: 720px; margin: 0 auto; padding: 22px 19px 20px } .photo_layer .photo_tab .tab_item { display: inline-block; padding: 6px 14px; border-radius: 16px; border: 1px solid; border-color: #f7f7f9; border-color: var(--booking-color-gray95); background-color: #f0f0f3; background-color: var(--booking-color-gray90); line-height: 1.3; font-size: 15px; color: #777 } .photo_layer .photo_tab .tab_item+.tab_item { margin-left: 8px } .photo_layer .photo_tab .tab_item.on { background-image: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to right, #0ad18e, #01d760); color: #fff } .photo_layer .photo_list,.photo_layer .photo_viewer { -webkit-overflow-scrolling: touch; margin-top: 48px; position: absolute; top: 0; left: 0; bottom: 0; width: 100%; overflow-y: auto; overflow-x: hidden; background-color: #fff; background-color: var(--booking-color-surface); -ms-overflow-style: none } .photo_layer .photo_list::-webkit-scrollbar,.photo_layer .photo_viewer::-webkit-scrollbar { display: none } .photo_layer .photo_list .goto_top,.photo_layer .photo_viewer .goto_top { padding-bottom: 5px } .photo_layer .photo_list .list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; max-width: 720px; margin: 0 auto } .photo_layer .photo_list .item { position: relative; width: 33.07%; -ms-flex-preferred-size: calc(33.33% - 1px); flex-basis: calc(33.33% - 1px); margin: .5px; padding-top: 33% } .photo_layer .photo_list .item .photo { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover } .photo_layer .photo_list .item:first-child .photo { border-top-left-radius: 0; border-bottom-left-radius: 0 } .photo_layer .photo_list .item:last-of-type .photo { border-top-right-radius: 0; border-bottom-right-radius: 0 } .photo_layer .viewer_list { min-height: calc(100vh - 48px); background-color: #e9e9ec; background-color: var(--booking-color-gray80); overflow: hidden } .photo_layer .viewer_list>li:before,.photo_layer .viewer_list>li:after { content: " "; display: table } .photo_layer .viewer_list>li:after { clear: both } .photo_layer .viewer_list>li .review_translation_btn { position: relative; float: right; margin-top: -18px; padding: 0 22px 18px 0; background-color: rgba(0,0,0,0); font-size: 14px; color: #03c75a } .photo_layer .dot_nav { position: absolute; z-index: 1; bottom: 14px; left: 0; right: 0; text-align: center } .photo_layer .dot_nav .dot_list { overflow: hidden; display: inline-block } .photo_layer .dot_nav .dot_list>li { position: relative; float: left; margin: 0 4px; width: 8px; height: 8px; cursor: pointer } .photo_layer .dot_nav .dot_list>li .dot_link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; background-color: #f6f6f6 } .photo_layer .dot_nav .dot_list>li.slick-active .dot_link { background-color: #0abe16 } .section_refund_rules { max-width: 720px; margin: 0 auto; padding: 12px 12px 0; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #f0f0f3; background-color: var(--booking-color-background) } .section_refund_rules .section_inner { border-radius: 8px; background-color: #fff; background-color: var(--booking-color-surface); -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.05),0px 0px 6px 0px rgba(0,0,0,.05); box-shadow: 0px 2px 4px 0px rgba(0,0,0,.05),0px 0px 6px 0px rgba(0,0,0,.05); overflow: hidden } .section_refund_rules .rules_title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; width: 100%; margin: 0 auto; padding: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; font-weight: 600; font-size: 18px; color: #222225; color: var(--booking-color-gray10); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; text-align: left } .section_refund_rules .rules_title .fn-booking { font-size: 13px; color: #444447; color: var(--booking-color-gray20) } .section_refund_rules .rules_title .fn-booking::before { font-weight: bold } .section_refund_rules .rules_wrap { padding: 0 16px 16px } .section_refund_rules .rules_txt_wrap { margin-bottom: 14px; padding: 12px 14px; border-radius: 5px; background-color: #fef4f4; background-color: var(--booking-color-red99) } .section_refund_rules .rules_txt_wrap:empty { display: none } .section_refund_rules .rules_txt { font-size: 15px; font-weight: 600; color: #fc4c4e; color: var(--booking-color-emphasis) } .section_refund_rules .rules_txt+.table_area { margin-top: 12px } .section_refund_rules .green_ticket_banner { margin-top: 0 } .section_refund_rules .refund_table { border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 8px } .section_refund_rules .refund_table .table_area { width: 100%; table-layout: fixed; border-style: hidden } .section_refund_rules .refund_table .table_area tr { font-size: 14px } .section_refund_rules .refund_table .table_area tr td { padding: 12px 17px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); color: #222225; color: var(--booking-color-gray10); word-break: keep-all } .section_refund_rules .refund_table .table_area tr .alert { color: #fc4c4e; color: var(--booking-color-emphasis) } .section_refund_rules .refund_table+.refund_alert { padding-top: 8px } .section_refund_rules .refund_alert .fn-info1 { float: left; margin: 3px 3px 0 0; color: #222225; color: var(--booking-color-gray10) } .section_refund_rules .refund_alert .txt { overflow: hidden; font-size: 14px; line-height: 21px; color: #77777a; color: var(--booking-color-gray40) } .section_refund_rules .refund_alert .highlight { color: #03aa5a } .section_refund_rules .refund_contact { margin-top: 10px } .section_refund_rules .refund_contact+.refund_contact { padding-top: 10px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_refund_rules .refund_contact .txt { font-size: 14px; line-height: 21px; color: #77777a; color: var(--booking-color-gray40) } .section_refund_rules .refund_link { display: block; margin-top: 12px; padding: 11px 0; border-radius: 12px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 15px; line-height: 20px; color: #444447; color: var(--booking-color-gray20); text-align: center } .section_refund_rules .refund_link .fn-forward1 { margin-left: 8px; font-size: 11px } .section_refund_rules .refund_link .fn-forward1::before { font-weight: bold } .green_ticket_banner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-sizing: border-box; box-sizing: border-box; margin-top: 20px; padding: 18px 10px; border: 1px solid rgba(0,0,0,.06); background-color: #f7f7f9; background-color: var(--booking-color-gray95) } .green_ticket_banner .ico_green_ticket { width: 49px; height: 51px; background-position: 0px -305px } .green_ticket_banner .ticket_info { margin-left: 10px } .green_ticket_banner .ticket_info .info_tit { display: block; line-height: 23px; letter-spacing: -0.6px; color: #444447; color: var(--booking-color-gray20) } .green_ticket_banner .ticket_info .info_txt { font-size: 14px; line-height: 17px; color: #555558; color: var(--booking-color-gray30); letter-spacing: -0.5px } .green_ticket_banner .ticket_info .info_txt .point { color: #03aa5a } .pay_address_terms { position: fixed; top: 0; left: 0; width: 100%; background-color: #e9e9ec; background-color: var(--booking-color-gray80); font-size: 16px; overflow-x: hidden; overflow-y: auto; z-index: 21000 } .pay_address_terms { position: fixed; top: 0; left: 0; width: 100%; max-width: 100%; height: 48px; background: #0abe16 } .pay_address_terms .btn_back { float: left; position: relative; width: 48px; height: 48px; color: rgba(0,0,0,0) } .pay_address_terms .btn_back+h1 { padding-left: 0 } .pay_address_terms .btn_back .fn-backward1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 24px; height: 24px; font-size: 24px; color: #fff } .pay_address_terms h1 { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; padding-left: 18px; font-size: 21px; font-weight: 600; color: #fff; line-height: 48px } .pay_address_terms #content { overflow-y: auto; -webkit-overflow-scrolling: touch; height: 100%; padding-top: 48px; background-color: #e9e9ec; background-color: var(--booking-color-gray80); -webkit-box-sizing: border-box; box-sizing: border-box } .pay_address_terms .sc_box { margin-top: 9px; padding: 27px 24px 30px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface) } .pay_address_terms .sc_box h2 { margin-bottom: 19px; font-size: 18px; font-weight: 600; color: #222225; color: var(--booking-color-gray10); line-height: 25px; text-align: center } .pay_address_terms .sc_box .info_area { padding-top: 26px; border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80); color: #444447; color: var(--booking-color-gray20); line-height: 23px } .pay_address_terms .sc_box .info_area .point { color: #fc4c42 } .pay_address_terms .sc_box .register_area { text-align: center } .pay_address_terms .sc_box .register_area .register_link { display: inline-block; height: 38px; margin-top: 16px; padding: 0 19px; background-color: #00cf5b; border-radius: 3px; color: #fff; font-size: 15px; line-height: 38px; position: center } .user_app { overflow: hidden; background-color: #f0f0f3; background-color: var(--booking-color-background) } .swipe_wrap { position: relative; -webkit-overflow-scrolling: touch; z-index: 11 } .swipe_wrap .swipe_list { height: 100%; font-size: 0; line-height: 0; white-space: nowrap; will-change: transform; -webkit-backface-visibility: hidden; backface-visibility: hidden } .swipe_wrap .swipe_item { margin: 0 3px } .card_slider { margin-top: -26px } .bg_slider_wrap { height: 216px } .bg_slider_item { position: relative; width: 100%; height: 210px; background-position: 50% 50%; background-size: cover } .bg_slider_item:before,.bg_slider_item:after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0 } .bg_slider_item:before { background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0, 0, 0, 0.6)), to(rgba(216, 216, 216, 0))); background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0, rgba(216, 216, 216, 0) 100%) } .bg_slider_item:after { border-bottom: 1px solid rgba(0,0,0,.03) } .panel_area { overflow: hidden; position: relative; min-height: 150px; margin-top: 48px; background-color: #fff; background-color: var(--booking-color-surface); border-bottom: 1px solid #e2e5e8 } .panel_area.loading { min-height: 300px } .panel_area.loading .line_loading_icon { display: block } .panel_area:last-child { border-bottom: none } .panel_area .panel_inner { max-width: 720px; margin: 0 auto } .panel_area .panel_border { width: 100%; height: 8px; border-width: 1px 0; border-style: solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #e9e9ec; background-color: var(--booking-color-gray80) } .tab_list_area { position: absolute; height: 46px; border-top: 1px solid; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); line-height: 46px; z-index: 10 } .tab_list_area.fixed { position: fixed; -webkit-overflow-scrolling: touch; top: 55px; left: 0; z-index: 100 } .tab_list { display: table; width: 100%; table-layout: fixed; background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .tab_item { display: table-cell; position: relative; text-align: center } .tab_item+.tab_item .link { border-left: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .tab_item.on { background-color: #fff; background-color: var(--booking-color-surface) } .tab_item.on .txt { color: #242424 } .tab_item.on .txt::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #fff; background-color: var(--booking-color-gray100) } .tab_item .link { display: block; color: #222225; color: var(--booking-color-gray10); font-weight: bold; letter-spacing: -0.5px; text-decoration: none } .tab_item .txt { position: relative; display: inline-block; padding: 0 10px; vertical-align: top; white-space: nowrap } .tab_item .num { color: #0abe16 } .tab_place { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 25px 18px 0; border-radius: 8px; background-color: #f7f7f9; background-color: var(--booking-color-gray95) } .tab_place .tab { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; border-radius: 8px; line-height: 40px; text-align: center } .tab_place .tab .txt { display: inline-block; vertical-align: top; font-size: 15px; color: #444447; color: var(--booking-color-gray20) } .tab_place .tab[aria-selected=true] { background-color: #444447; background-color: var(--booking-color-gray20) } .tab_place .tab[aria-selected=true] .txt { font-weight: 600; color: #fff; color: var(--booking-color-gray100) } .short_review_area { position: relative; min-height: 225px; margin-top: 10px; background-color: #fff; background-color: var(--booking-color-surface) } .short_review_area .short_review_filter { display: block; margin: 0 19px 0 20px; padding: 22px 0 15px; line-height: 23px; color: #444447; color: var(--booking-color-gray20); font-size: 17px } .short_review_area .short_review_filter:before,.short_review_area .short_review_filter:after { content: " "; display: table } .short_review_area .short_review_filter:after { clear: both } .short_review_area .short_review_filter+.list_short_review { margin-top: -18px } .short_review_area .short_review_filter+.list_short_review li:only-child { min-height: 235px } .short_review_area .short_review_filter .title { font-size: 18px; font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .short_review_area .short_review_filter .num { margin-left: 2px; color: #939396; color: var(--booking-color-gray50) } .short_review_area .short_review_filter .filter_box { float: right; line-height: 24px } .short_review_area .short_review_filter .filter_photo { display: inline-block; vertical-align: top } .short_review_area .short_review_filter .filter_photo .checkbox { display: block; font-size: 15px; color: #222225; color: var(--booking-color-gray10) } .short_review_area .short_review_filter .filter_photo .checkbox .ico_square_check { margin-right: 5px; vertical-align: -4px; width: 18px; height: 18px; fill: #d9d9d9 } .short_review_area .short_review_filter .filter_photo input[type=checkbox].checked+.checkbox .ico_square_check { fill: #07b495 } .short_review_area .short_review_filter .filter_photo+.filter_rating:before { content: ""; display: inline-block; vertical-align: -2px; width: 1px; height: 14px; margin: 0 8px; background-color: #d9d9dc; background-color: var(--booking-color-gray70) } .short_review_area .short_review_filter .filter_rating { position: relative; display: inline-block; vertical-align: top } .short_review_area .short_review_filter .filter_rating.open .filter_btn { color: #03c75a } .short_review_area .short_review_filter .filter_rating.open .layer_filter { display: block } .short_review_area .short_review_filter .filter_recent { background-color: rgba(0,0,0,0); font-size: 15px; color: #0068c3; color: var(--booking-color-blue-link) } .short_review_area .short_review_filter .filter_btn { background-color: rgba(0,0,0,0); font-size: 15px; color: #222225; color: var(--booking-color-gray10) } .short_review_area .short_review_filter .filter_btn:focus,.short_review_area .short_review_filter .filter_btn:active { outline: none } .short_review_area .short_review_filter .filter_btn .fn-booking { margin-left: 7px; font-size: 12px; vertical-align: -1px } .short_review_area .short_review_filter .layer_filter { display: none; position: absolute; top: 26px; right: 0; min-width: 120px; -webkit-box-shadow: 0 2px 6px 0 rgba(0,0,0,.15); box-shadow: 0 2px 6px 0 rgba(0,0,0,.15); background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 4px; color: #222225; color: var(--booking-color-gray10); white-space: nowrap; z-index: 10 } .short_review_area .short_review_filter .layer_filter .item { display: block; padding: 11px 12px; font-size: 15px; line-height: 21px; color: #222225; color: var(--booking-color-gray10); font-weight: bold } .short_review_area .short_review_filter .layer_filter .item.checked { color: #03aa5a } .short_review_area .short_review_filter .layer_filter .item.checked::after { content: ""; display: inline-block; width: 10px; height: 5px; margin: 0px 0px 3px 7px; border: 2px solid; border-color: #03aa5a; border-width: 0 0 2px 2px; -webkit-transform: rotate(-45deg); transform: rotate(-45deg) } .short_review_area .short_review_filter .layer_filter .item+.item { border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .short_review_area .list_short_review .list_item { margin: 0 20px; padding: 19px 0 16px } .short_review_area .list_short_review .list_item:before,.short_review_area .list_short_review .list_item:after { content: " "; display: table } .short_review_area .list_short_review .list_item:after { clear: both } .short_review_area .list_short_review .list_item+.list_item { border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .short_review_area .profile_area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .short_review_area .profile_area .profile { position: relative; width: 38px; height: 38px; margin-right: 8px; padding: 2px } .short_review_area .profile_area .profile::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid; border-color: #fff; border-color: var(--booking-color-surface); border-radius: 50%; -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,.08); box-shadow: 0 3px 10px 0 rgba(0,0,0,.08) } .short_review_area .profile_area .thumb { border-radius: 50%; vertical-align: top } .short_review_area .profile_area .profile_info { overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .short_review_area .profile_area .id { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; display: block; font-weight: bold; color: #222225; color: var(--booking-color-gray10); letter-spacing: -0.2px } .short_review_area .profile_area .info { display: block; margin-top: 3px; line-height: 16px } .short_review_area .profile_area .item { font-size: 13px; font-weight: 400; color: #939396; color: var(--booking-color-gray50); letter-spacing: -0.2px } .short_review_area .profile_area .item+.item::before { content: ""; display: inline-block; width: 2px; height: 2px; margin: 8px 5px 0; background-color: #939396; background-color: var(--booking-color-gray50); border-radius: 50%; vertical-align: top } .short_review_area .star_area { overflow: hidden; padding-top: 18px; line-height: 20px } .short_review_area .star_area+.review_text { padding-top: 6px } .short_review_area .star_area .num { display: inline-block; vertical-align: top; font-size: 15px; font-weight: 600; line-height: 19px; color: #444447; color: var(--booking-color-gray20) } .short_review_area .star_area .num::before { content: ""; width: 13px; height: 13px; background-position: -296px -398px; display: inline-block; vertical-align: -1px; margin-right: 2px } .short_review_area .link_thumb_area { margin: 12px -20px 0 } .short_review_area .link_thumb_inner { overflow-x: auto; -webkit-overflow-scrolling: touch; -ms-overflow-style: none } .short_review_area .link_thumb_inner::-webkit-scrollbar { display: none } .short_review_area .link_thumb_list.type_multi { white-space: nowrap } .short_review_area .link_thumb_list.type_multi .link_thumb { display: inline-block; width: 339px; vertical-align: top } .short_review_area .link_thumb_list.type_multi .link_thumb.vertical { width: 180px; height: 226px } .short_review_area .link_thumb_list.type_multi .link_thumb.square { width: 226px; height: 226px } .short_review_area .link_thumb { display: block; overflow: hidden; position: relative; max-width: 339px; height: 226px } .short_review_area .link_thumb.vertical { width: 240px; height: 301px } .short_review_area .link_thumb.square { width: 240px; height: 240px } .short_review_area .link_thumb:before { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,.05); -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.03); box-shadow: 0 2px 4px 0 rgba(0,0,0,.03); content: "" } .short_review_area .link_thumb:first-child { margin-left: 20px; border-top-left-radius: 6px; border-bottom-left-radius: 6px } .short_review_area .link_thumb:last-child { margin-right: 20px; border-top-right-radius: 6px; border-bottom-right-radius: 6px } .short_review_area .link_thumb+.link_thumb { margin-left: 2px } .short_review_area .link_thumb .thumb { width: 100%; -o-object-fit: cover; object-fit: cover; vertical-align: top } .short_review_area .link_thumb .ico_play_video { position: absolute; left: 6px; bottom: 4px; width: 28px; height: 31px } .short_review_area .review_info_area .review .highlight { color: #03c75a; font-weight: bold } .short_review_area .review_info_area .highlight { color: #03c75a; font-weight: bold } .short_review_area .item_title { padding-top: 13px; font-size: 15px; font-weight: bold; line-height: 23px; color: #444447; color: var(--booking-color-gray20) } .short_review_area .item_title+.review_text { padding-top: 5px } .short_review_area .review_text { padding-top: 18px; font-size: 15px; line-height: 23px; color: #444447; color: var(--booking-color-gray20); line-height: 24px } .short_review_area .review_text.blocking { color: #999 } .short_review_area .review_text.translation_mb { margin-bottom: -0.5px } .short_review_area .review_text .original_text { display: block; padding: 4px 0; font-size: 15px } .short_review_area .review_text .translating { display: inline-block; vertical-align: top; font-size: 14px; color: #03c75a } .short_review_area .review_text .translating .loading_dots { display: inline-block; vertical-align: 0; margin-left: 4px; line-height: 4px } .short_review_area .review_text .translating .loading_dots .dot { -webkit-animation: translating 1.5s infinite ease-in-out; animation: translating 1.5s infinite ease-in-out; display: inline-block; vertical-align: top; height: 4px; width: 4px; margin-right: 4px; border-radius: 50%; background-color: #03c75a } .short_review_area .review_text .translating .loading_dots .dot:nth-child(2) { -webkit-animation-delay: .5s; animation-delay: .5s } .short_review_area .review_text .translating .loading_dots .dot:nth-child(3) { -webkit-animation-delay: 1s; animation-delay: 1s } .short_review_area .review_translation_link { text-decoration: underline !important } .short_review_area .review_keyword .emoji_icon { display: inline-block; width: 18px; height: 18px; margin-right: 5px; vertical-align: top } .short_review_area .review_keyword [class*=keyword] { display: inline-block; margin-top: 6px; margin-right: 4px; padding: 5px 9px 5px 7px; border-radius: 4px; font-size: 14px; line-height: 18px; vertical-align: top; background-color: #f7f7f9; background-color: var(--booking-color-gray95); color: #555558; color: var(--booking-color-gray30) } .short_review_area .info_area { display: inline-block; overflow: hidden; max-width: 100%; vertical-align: top } .short_review_area .review_reaction { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 20px 0 6px; gap: 30px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .short_review_area .review_reaction .review_reaction_area { position: relative } .short_review_area .review_reaction .review_reaction_area .emoji_wrap { display: inline-block; vertical-align: top; height: 24px } .short_review_area .review_reaction .review_reaction_area .emoji_wrap .ico_review_reaction { margin-right: 7px; width: 22px; height: 22px; vertical-align: top } .short_review_area .review_reaction .review_reaction_area .emoji_wrap .emoji { display: inline-block; overflow: hidden; position: relative; width: 22px; height: 22px; margin-right: 10px; border: 1px solid #fff; border-radius: 50%; z-index: 1 } .short_review_area .review_reaction .review_reaction_area .emoji_wrap .emoji+.emoji { margin-left: -15px; z-index: 0 } .short_review_area .review_reaction .review_reaction_area .reaction_num { font-size: 14px; line-height: 24px; font-weight: 500; vertical-align: top; color: #444447; color: var(--booking-color-gray20) } .short_review_area .review_reaction .review_reaction_area .reaction_num.my_reaction { font-weight: 400; color: #03aa5a } .short_review_area .review_reaction .review_reaction_area .reaction_num .point { font-weight: 600 } .short_review_area .review_reaction .review_reaction_area .reaction_num .point.with_other,.short_review_area .review_reaction .review_reaction_area .reaction_num .point.only_user { display: inline-block; max-width: 60px; vertical-align: top; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .short_review_area .review_reaction .review_reaction_area .reaction_num .point.only_user { max-width: 110px } .short_review_area .review_reaction .review_reaction_area .reaction_num .fn-booking-forward1 { font-size: 12px; color: #444447; color: var(--booking-color-gray20) } .short_review_area .review_reaction .tooltip { position: absolute; top: 33px; padding: 9px 14px; background-image: -webkit-gradient(linear, right top, left top, from(#15d1d0), to(#1ed675)); background-image: linear-gradient(to left, #15d1d0, #1ed675); border-radius: 5px; font-size: 14px; font-weight: 700; color: #fff; letter-spacing: -0.5px; text-align: center; white-space: nowrap; z-index: 9002 } .short_review_area .review_reaction .tooltip::before { content: ""; position: absolute; top: -3px; left: 12px; width: 7px; height: 7px; background-color: #1ed67a; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .short_review_area .review_reaction .tooltip .point { color: #fff16c } @-webkit-keyframes layer_show { 0% { opacity: 0; -webkit-transform: translateY(-15px); transform: translateY(-15px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } @keyframes layer_show { 0% { opacity: 0; -webkit-transform: translateY(-15px); transform: translateY(-15px) } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0) } } .short_review_area .review_reaction .review_reaction_select_layer { position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; top: 36px; width: 277px; padding: 7px 8px 15px; border: 1px solid rgba(0,0,0,.08); -webkit-box-shadow: 0px 2px 8px 0px rgba(0,0,0,.08); box-shadow: 0px 2px 8px 0px rgba(0,0,0,.08); border-radius: 8px; z-index: 9002; -webkit-animation: layer_show .2s ease-in-out; animation: layer_show .2s ease-in-out; background-color: #fff; background-color: var(--booking-color-surface) } .short_review_area .review_reaction .review_reaction_select_layer .icon_wrapper { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 12px; line-height: 15px; font-weight: 500; color: #555558; color: var(--booking-color-gray30) } .short_review_area .review_reaction .review_reaction_select_layer .icon_wrapper .icon { display: block; position: relative; width: 60px; height: 60px; margin: 0 auto -4px } .short_review_area .review_reaction .review_reaction_select_layer .icon_wrapper .icon::after { content: ""; position: absolute; top: 9px; right: 9px; bottom: 9px; left: 9px; z-index: 10; border: 2px solid rgba(0,0,0,0); border-radius: 50% } .short_review_area .review_reaction .review_reaction_select_layer .icon_wrapper .icon.selected::after { border-color: #424242 } .short_review_area .review_info { color: #939396; color: var(--booking-color-gray50); font-size: 13px; line-height: 17px; letter-spacing: -0.2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .short_review_area .review_info .item+.item::before { content: ""; display: inline-block; width: 2px; height: 2px; margin: 8px 4px 0; background-color: #d9d9dc; background-color: var(--booking-color-gray70); border-radius: 50%; vertical-align: top } .short_review_area .my_modify { float: right; font-size: 13px; line-height: 17px; color: #939396; color: var(--booking-color-gray50); letter-spacing: -0.2px } .short_review_area .my_modify::before { display: inline-block; margin: 0 8px 0 9px; width: 1px; height: 12px; background-color: #d9d9dc; background-color: var(--booking-color-gray70); vertical-align: -1px; content: "" } .short_review_area .reply_area { position: relative; margin: 18px 0 3px; padding: 11px 13px 13px 14px; border-radius: 0 5px 5px 5px; background-color: #f7f7f9; background-color: var(--booking-color-gray95) } .short_review_area .reply_area .reply_arr { overflow: hidden; position: absolute; top: -27px; left: -12px; width: 40px; height: 40px; -webkit-transform: scale(0.4); transform: scale(0.4) } .short_review_area .reply_area .reply_arr::before { content: ""; position: absolute; left: 0; bottom: 0; width: 200%; height: 200%; border-radius: 50%; -webkit-box-shadow: -50px 50px 0 0 #f8fafb; box-shadow: -50px 50px 0 0 #f8fafb; -webkit-box-shadow: -50px 50px 0 0 var(--booking-color-gray95); box-shadow: -50px 50px 0 0 var(--booking-color-gray95) } .short_review_area .reply_area .reply { padding-top: 2px; color: #555558; color: var(--booking-color-gray30); font-size: 15px; line-height: 21px } .short_review_area .reply_area .reply.blocked { color: #939396; color: var(--booking-color-gray50) } .short_review_area .reply_area .reply.blocked .fn-info1 { margin-right: 4px; vertical-align: -3px } .short_review_area .reply_area .reply_info .name { font-size: 14px; color: #222225; color: var(--booking-color-gray10); font-weight: bold } .short_review_area .reply_area .reply_info .accuse { color: #939396; color: var(--booking-color-gray50); font-size: 14px } .short_review_area .reply_area .reply_info .accuse:before { display: inline-block; width: 1px; height: 12px; margin: 0 7px; background: #eaebec; vertical-align: -1px; content: "" } .short_review_area .reply_area .reply_info .date { color: #939396; color: var(--booking-color-gray50); font-size: 14px } .short_review_area .reply_area .reply_info .date:before { display: inline-block; margin: 0 7px; width: 1px; height: 12px; background-color: #e9e9ec; background-color: var(--booking-color-gray80); vertical-align: -1px; content: "" } .short_review_area .review_translation_btn { float: right; padding: 6px 2px 0 0; background-color: rgba(0,0,0,0); font-size: 14px; color: #03c75a } .short_review_area .review_none { border-top: 1px solid; color: #f0f0f3; color: var(--booking-color-gray90) } .short_review_area .review_none .none_box { padding: 68px 0 60px; text-align: center } .short_review_area .review_none .none_box .ico_no_review { width: 78px; height: 78px; background-position: 0px -225px } .short_review_area .review_none .none_box .box_txt { display: block; margin-top: 27px; font-weight: 600; color: #444447; color: var(--booking-color-gray20) } .short_review_area .more_review { padding: 12px 0 39px; text-align: center } .short_review_area .more_review .link_more { display: inline-block; vertical-align: top; padding: 11px 24px 11px 26px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.08); box-shadow: 0 2px 4px 0 rgba(0,0,0,.08); border-radius: 22px; font-size: 16px; line-height: 20px; font-weight: bold; background-color: #fff; background-color: var(--booking-color-surface); color: #222225; color: var(--booking-color-gray10) } .short_review_area .more_review .link_more .fn-booking-forward2 { margin-left: 4px; color: #222225; color: var(--booking-color-gray10); font-size: 12px } .short_review_area .link_more_review { display: block; padding: 12px 0; border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80); font-size: 16px; font-weight: 500; text-align: center; color: #444447; color: var(--booking-color-gray20) } .short_review_area .link_more_review .fn-booking-down1 { margin-left: 4px; font-size: 16px; color: #222225; color: var(--booking-color-gray10); vertical-align: -3px } .short_review_area .review_loading_area { min-height: 100vh } .review_translation,.review_translation_link { display: block; padding: 3px 0 0 14px; font-size: 14px; font-weight: 400; color: #989898 } @-webkit-keyframes translating { 0% { opacity: .4 } 50% { opacity: 1 } 100% { opacity: .4 } } @keyframes translating { 0% { opacity: .4 } 50% { opacity: 1 } 100% { opacity: .4 } } .select_layer { display: none; z-index: 10001; position: fixed; top: 50%; left: 50%; margin-left: -104px; width: 208px; background-color: #fff; border-radius: 3px; text-align: center; -webkit-overflow-scrolling: touch; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .select_layer .select_tit { z-index: 10; padding: 12px 0 11px 0; width: 100%; max-width: 208px; background-color: #fff; border-bottom: 1px solid #d7dee2; border-top-left-radius: 3px; border-top-right-radius: 3px } .select_layer .select_tit>.header_h4 { font-weight: 500; font-size: 18px; color: #222 } .select_layer .select_tit .close { display: inline-block; position: absolute; top: 11.5px; right: 10px } .select_layer .select_tit .close .fn-close { font-size: 20px; color: #666 } .select_layer .lst_select { position: relative; overflow-y: auto; max-height: 307px; background-color: #fff; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; -webkit-overflow-scrolling: touch } .select_layer .lst_select .item .anchor { display: block; padding: 9px 0; height: 44px; font-size: 18px; color: #222; line-height: 26px; border-bottom: 1px solid #d7dee2; -webkit-box-sizing: border-box; box-sizing: border-box } .select_layer .lst_select .item:last-child .anchor { border-bottom-width: 0 } .select_layer .lst_select .item:hover,.select_layer .lst_select .item.selected { background-color: #e5f9eb } .select_layer .lst_select .item:focus,.select_layer .lst_select .item:active { outline: none } .select_layer .lst_select.lst_select_9 { max-height: 395px } .sel_box_on .select_layer { display: block } .sel_box_on .dimm_dark { display: block } .sel_box_on .gray_label { margin-left: 5px; margin-right: 5px; font-size: 18px; color: #888 } .sel_box_on .lst_select_time { margin-left: 5px; margin-right: 5px } .common_bottom_buttongroup_wrap { position: relative; margin: 13px -12px .5px } .common_bottom_buttongroup_wrap+.common_bottom_buttongroup_wrap { margin-top: 7.5px } .common_bottom_buttongroup { position: relative; display: table; width: 100%; background-color: #f7f7f9; background-color: var(--booking-color-gray95); border: solid 1px; border-color: #d9d9dc; border-color: var(--booking-color-gray70); text-align: center } .common_bottom_buttongroup .common_bottom_btn { display: table-cell; position: relative; padding: 8px 10px; width: 100%; text-decoration: none; color: #444447; color: var(--booking-color-gray20); font-size: 15px; vertical-align: middle } .common_bottom_buttongroup .common_bottom_btn .fn-nbooking-calender2 { font-size: 16px; vertical-align: -2px; color: #0ec645 } .common_bottom_buttongroup .common_bottom_btn.order .fn-call2 { font-size: 16px; color: #0abe16 } .common_bottom_buttongroup .common_bottom_btn:before { content: ""; width: 1px; height: 14px; position: absolute; left: 0; top: 50%; margin-top: -7px; background-color: #d9d9dc; background-color: var(--booking-color-gray70) } .common_bottom_buttongroup .common_bottom_btn:first-child:before { content: ""; width: 0; height: 0; position: static; left: 0; top: 0; margin-top: 0; background: none } .common_bottom_buttongroup.column2 .common_bottom_btn { width: 50% } .common_bottom_buttongroup.column2_review_example .common_bottom_btn { width: 50% } .common_bottom_buttongroup.column3 .common_bottom_btn { width: 31% } .common_bottom_buttongroup.column3 .common_bottom_btn:nth-child(2) { width: 38% } .common_bottom_buttongroup.column3 .common_bottom_btn .fn { display: block } .common_bottom_buttongroup.column4 .common_bottom_btn { width: 19% } .common_bottom_buttongroup.column4 .common_bottom_btn:nth-child(2) { width: 29% } .common_bottom_buttongroup.column4 .common_bottom_btn:nth-child(3) { width: 33% } .common_bottom_buttongroup.column4 .common_bottom_btn:last-child { width: 19% } .common_bottom_buttongroup.column4 .common_bottom_btn .fn { display: block } .common_bottom_buttongroup.column4 .common_bottom_btn .fn.fn-navigation2 { margin-bottom: -2px } @media screen and (max-width: 320px) { .common_bottom_buttongroup.column4 .common_bottom_btn { width:17% } .common_bottom_buttongroup.column4 .common_bottom_btn:nth-child(2) { width: 31% } .common_bottom_buttongroup.column4 .common_bottom_btn:nth-child(3) { width: 32% } } .common_bottom_buttongroup.para { border: solid 1px #e4e8ea; margin-left: 14px; margin-right: 14px } .common_bottom_buttongroup.para .common_bottom_btn { float: none; display: block; width: auto; padding: 8.5px 25px 6.5px; line-height: 20px; word-break: break-all; color: #171717; font-size: 14px } .common_inner_box { position: absolute; top: 100%; left: -10px; right: -10px; margin-top: -4px; font-size: 14px; line-height: 20px; color: #fff; letter-spacing: -0.5px; text-align: center; z-index: 15 } .common_inner_box .box_txt { position: relative; display: inline-block; padding: 10px 35px; -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); border-radius: 5px; background-color: #14a0fa; vertical-align: top; text-align: left } .common_inner_box .box_txt .fn-booking-pay-point2 { position: absolute; top: 10px; left: 10px; font-size: 18px } .common_inner_box .box_txt .txt { display: block } .common_inner_box .box_txt .emphasis { font-weight: bold; color: #fef88a } .common_inner_box .box_txt:after { content: ""; position: absolute; top: -5px; right: 50%; width: 0; height: 0; margin-right: -5px; border-left: 5px solid rgba(0,0,0,0); border-right: 5px solid rgba(0,0,0,0); border-bottom: 5px solid #14a0fa } .common_inner_box .box_txt .btn_close { overflow: hidden; position: absolute; top: 4px; right: 0; width: 30px; height: 30px } .common_inner_box .box_txt .btn_close .fn-cancel { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; width: 12px; height: 12px; font-size: 12px; color: #fff } .common_inner_box.right .box_txt:after { right: 25% } .common_inner_box.left .box_txt:after { left: 25%; margin: 0 0 0 -5px } .toast_area { z-index: 30000; overflow: hidden; position: fixed; top: 0; right: 0; left: 0; width: 100%; margin: 0 auto; opacity: 0; -webkit-transform: translateY(-100%); transform: translateY(-100%) } .toast_area.bottom_init { bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%) } .toast_area.top { -webkit-transition: opacity .1s ease-out,-webkit-transform .5s; transition: opacity .1s ease-out,-webkit-transform .5s; transition: transform .5s,opacity .1s ease-out; transition: transform .5s,opacity .1s ease-out,-webkit-transform .5s } .toast_area.bottom { top: auto; bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: opacity .1s ease-out,-webkit-transform .5s; transition: opacity .1s ease-out,-webkit-transform .5s; transition: transform .5s,opacity .1s ease-out; transition: transform .5s,opacity .1s ease-out,-webkit-transform .5s } .toast_area.custom_bottom { top: auto; -webkit-transform: translateY(1000%); transform: translateY(1000%); -webkit-transition: opacity .1s ease-out,-webkit-transform .7s; transition: opacity .1s ease-out,-webkit-transform .7s; transition: transform .7s,opacity .1s ease-out; transition: transform .7s,opacity .1s ease-out,-webkit-transform .7s } .toast_area.custom_show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity .45s ease-in,-webkit-transform .4s; transition: opacity .45s ease-in,-webkit-transform .4s; transition: transform .4s,opacity .45s ease-in; transition: transform .4s,opacity .45s ease-in,-webkit-transform .4s } .toast_area.show { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); -webkit-transition: opacity .3s ease-in,-webkit-transform .3s; transition: opacity .3s ease-in,-webkit-transform .3s; transition: transform .3s,opacity .3s ease-in; transition: transform .3s,opacity .3s ease-in,-webkit-transform .3s } .toast_area.rebooking { z-index: 9900 } .toast_area.jp .inner_area { padding: 16px; -webkit-box-shadow: none; box-shadow: none; background: #444 } .toast_area.jp .inner_area.type_2row { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; padding: 16px } .toast_area.jp .inner_area.type_2row .icon_wrapper [class*=icon] { vertical-align: top } .toast_area.jp .inner_area.type_2row .tit_area { line-height: 21px } .toast_area.jp .inner_area .icon_wrapper { margin-right: 6px } .toast_area.jp .inner_area .icon_wrapper [class*=icon] { vertical-align: -4px } .toast_area.jp .inner_area .tit_area { font-size: 14px; color: #fff } .toast_area.jp .inner_area .tit_area+.txt_area { margin-top: 2px } .toast_area.jp .inner_area .txt_area { font-size: 12px; color: rgba(255,255,255,.6); line-height: 18px } .toast_area.jp .inner_area .btn_area { -ms-flex-item-align: center; align-self: center; margin-left: 12px } .toast_area.jp .inner_area .btn_area .btn { font-size: 14px; font-weight: 700; color: #fff; text-decoration: none } .toast_area .toast_max_layout { max-width: 544px; margin: 0 auto } .toast_area .inner_area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 16px; padding: 12px 15px; border-radius: 8px; background: rgba(17,17,17,.95); -webkit-box-shadow: 0 4px 4px rgba(0,0,0,.15); box-shadow: 0 4px 4px rgba(0,0,0,.15); -webkit-box-sizing: border-box; box-sizing: border-box } .toast_area .inner_area.type_2row { padding: 16px 15px 13px } .toast_area .inner_area.type_2row .tit_area { line-height: 18px } .toast_area .inner_area .icon_wrapper { -webkit-box-flex: 0; -ms-flex: none; flex: none; position: relative; margin-right: 9px } .toast_area .inner_area .icon_wrapper i[class*=icon] { vertical-align: -4px } .toast_area .inner_area .icon_wrapper .icon_likeit { width: 24px; height: 20px; background-position: -90px -52px } .toast_area .inner_area .icon_wrapper .icon_likeit_b { width: 28px; height: 28px; background-position: -60px -30px } .toast_area .inner_area .icon_wrapper .icon_alarm { width: 28px; height: 28px; background-position: 0px 0px } .toast_area .inner_area .icon_wrapper .icon_alarm_b { width: 28px; height: 28px; background-position: -30px 0px } .toast_area .inner_area .icon_wrapper .icon_caution { vertical-align: -5px; width: 24px; height: 24px; background-position: -52px -60px } .toast_area .inner_area .icon_wrapper .icon_caution_b { vertical-align: -5px; width: 28px; height: 28px; background-position: 0px -30px } .toast_area .inner_area .icon_wrapper .icon_check { vertical-align: -5px; width: 24px; height: 24px; background-position: -90px 0px } .toast_area .inner_area .icon_wrapper .icon_check_b { vertical-align: -5px; width: 28px; height: 28px; background-position: -30px -30px } .toast_area .inner_area .icon_wrapper .icon_keword { width: 24px; height: 24px; background-position: -90px -26px } .toast_area .inner_area .icon_wrapper .icon_keword_b { width: 28px; height: 28px; background-position: -60px 0px } .toast_area .inner_area .icon_wrapper .icon_bookmark { width: 24px; height: 24px; background-position: 0px -60px } .toast_area .inner_area .icon_wrapper .icon_bookmark_b { width: 24px; height: 24px; background-position: -26px -60px } .toast_area .inner_area .icon_wrapper .icon_info,.toast_area .inner_area .icon_wrapper .icon_info_b { width: 20px; height: 20px; background-position: -22px -86px } .toast_area .inner_area .icon_wrapper .icon_coupon,.toast_area .inner_area .icon_wrapper .icon_coupon_b { width: 20px; height: 20px; background-position: 0px -86px } .toast_area .inner_area .icon_wrapper .icon_warning,.toast_area .inner_area .icon_wrapper .icon_warning_b { width: 20px; height: 20px; background-position: -44px -86px } .toast_area .inner_area .info_area { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .toast_area .inner_area .tit_area { position: relative; font-size: 15px; color: #fff; line-height: 24px } .toast_area .inner_area .tit_area+.txt_area { margin-top: 2px } .toast_area .inner_area .tit_area em { font-weight: 700 } .toast_area .inner_area .tit_area a { color: #fff } .toast_area .inner_area .tit_area+.txt_area { margin-top: 2px } .toast_area .inner_area .txt_area { font-size: 13px; color: rgba(255,255,255,.6); line-height: 17px } .toast_area .inner_area .btn_area { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-left: 15px } .toast_area .inner_area .btn_area .btn { display: inline-block; font-size: 13px; color: rgba(255,255,255,.8); letter-spacing: -0.5px; line-height: 24px; text-decoration: underline; vertical-align: top } .toast_area .inner_area.type_2row { padding: 16px 15px 13px } .toast_area .inner_area.type_2row .tit_area { line-height: 18px } .toast_area .inner_area.type_2row .icon_wrapper { width: 28px; height: 28px } .toast_area .inner_area.type_2row .icon_wrapper .icon_caution { width: 28px; height: 28px; background-position: -401px -136px } .toast_area.toast_free_promotion.show { -webkit-transform: translateY(-64px); transform: translateY(-64px) } .toast_area.toast_free_promotion .image_wrap { position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 40px; height: 40px; margin-right: 10px; border-radius: 50%; overflow: hidden } .toast_area.toast_free_promotion .image_wrap::after { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background-color: rgba(0,0,0,.02) } .toast_area.toast_free_promotion .image_wrap .img { border-radius: 50%; -o-object-fit: contain; object-fit: contain } .toast_area.toast_free_promotion .text_wrap { line-height: 1.2; color: #333 } .toast_area.toast_free_promotion .text_wrap .text1 { margin-bottom: 2px; font-size: 13px; color: #fff; opacity: .6 } .toast_area.toast_free_promotion .text_wrap .text2 { font-size: 15px; color: #fff } .toast_area.toast_free_promotion .text_wrap .limit_text { display: inline-block; vertical-align: top; max-width: 131px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .toast_area.toast_in_cart_page.show { -webkit-transform: translateY(-64px); transform: translateY(-64px) } .profile_border { position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; z-index: 20 } .profile_border.review { top: -7px; right: -7px; bottom: -7px; left: -7px } .profile_border.bunny { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: calc(100% + 22px); height: calc(100% + 22px); background: url(https://myplace-phinf.pstatic.net/20221227_296/1672096914139lSc9D_PNG/mission2301_profile_decorator1.png),url(https://myplace-phinf.pstatic.net/20221227_37/1672096914205TBPph_PNG/mission2301_profile_decorator2.png),url(https://myplace-phinf.pstatic.net/20221227_153/1672096914289B66On_PNG/mission2301_profile_decorator3.png),url(https://myplace-phinf.pstatic.net/20221227_133/1672096914335Tsx1i_PNG/mission2301_profile_decorator4.png),url(https://myplace-phinf.pstatic.net/20221227_211/1672096914491WshBF_PNG/mission2301_profile_decorator5.png),url(https://myplace-phinf.pstatic.net/20221227_119/1672096914596XoqXY_PNG/mission2301_profile_decorator6.png),url(https://myplace-phinf.pstatic.net/20221227_189/1672096914802MLTJW_PNG/mission2301_profile_decorator7.png),url(https://myplace-phinf.pstatic.net/20221227_178/1672096914852bOELm_PNG/mission2301_profile_decorator8.png); background-repeat: no-repeat; background-position: 0 0; background-size: 100% 100%; -webkit-animation: profile-decorator .8s steps(1) infinite; animation: profile-decorator .8s steps(1) infinite } @-webkit-keyframes profile-decorator { 0% { background-image: url(https://myplace-phinf.pstatic.net/20221227_296/1672096914139lSc9D_PNG/mission2301_profile_decorator1.png) } 14% { background-image: url(https://myplace-phinf.pstatic.net/20221227_37/1672096914205TBPph_PNG/mission2301_profile_decorator2.png) } 28% { background-image: url(https://myplace-phinf.pstatic.net/20221227_153/1672096914289B66On_PNG/mission2301_profile_decorator3.png) } 42% { background-image: url(https://myplace-phinf.pstatic.net/20221227_133/1672096914335Tsx1i_PNG/mission2301_profile_decorator4.png) } 56% { background-image: url(https://myplace-phinf.pstatic.net/20221227_211/1672096914491WshBF_PNG/mission2301_profile_decorator5.png) } 70% { background-image: url(https://myplace-phinf.pstatic.net/20221227_119/1672096914596XoqXY_PNG/mission2301_profile_decorator6.png) } 84% { background-image: url(https://myplace-phinf.pstatic.net/20221227_189/1672096914802MLTJW_PNG/mission2301_profile_decorator7.png) } 100% { background-image: url(https://myplace-phinf.pstatic.net/20221227_178/1672096914852bOELm_PNG/mission2301_profile_decorator8.png) } } @keyframes profile-decorator { 0% { background-image: url(https://myplace-phinf.pstatic.net/20221227_296/1672096914139lSc9D_PNG/mission2301_profile_decorator1.png) } 14% { background-image: url(https://myplace-phinf.pstatic.net/20221227_37/1672096914205TBPph_PNG/mission2301_profile_decorator2.png) } 28% { background-image: url(https://myplace-phinf.pstatic.net/20221227_153/1672096914289B66On_PNG/mission2301_profile_decorator3.png) } 42% { background-image: url(https://myplace-phinf.pstatic.net/20221227_133/1672096914335Tsx1i_PNG/mission2301_profile_decorator4.png) } 56% { background-image: url(https://myplace-phinf.pstatic.net/20221227_211/1672096914491WshBF_PNG/mission2301_profile_decorator5.png) } 70% { background-image: url(https://myplace-phinf.pstatic.net/20221227_119/1672096914596XoqXY_PNG/mission2301_profile_decorator6.png) } 84% { background-image: url(https://myplace-phinf.pstatic.net/20221227_189/1672096914802MLTJW_PNG/mission2301_profile_decorator7.png) } 100% { background-image: url(https://myplace-phinf.pstatic.net/20221227_178/1672096914852bOELm_PNG/mission2301_profile_decorator8.png) } } .snow_area { position: absolute; top: -10px; right: -10px; bottom: -10px; left: -10px; text-align: center } .snow_area .icon_snow { position: absolute; top: 0; left: 50%; z-index: 50; width: 100%; height: 100%; background-size: auto 100%; -webkit-animation: snow 6s forwards infinite; animation: snow 6s forwards infinite; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0) } .snow_area .icon_snow.type_particle1 { background-image: url("/public/assets/christmas/profile_snow_1.png") } .snow_area .icon_snow.type_particle2 { background-image: url("/public/assets/christmas/profile_snow_1.png"); -webkit-animation-delay: 2s; animation-delay: 2s } .snow_area .icon_snow.type_particle3 { background-image: url("/public/assets/christmas/profile_snow_3.png"); -webkit-animation-delay: 4s; animation-delay: 4s } @-webkit-keyframes snow { 0% { opacity: 0; -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px) } 50% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px) } } @keyframes snow { 0% { opacity: 0; -webkit-transform: translate(-50%, -10px); transform: translate(-50%, -10px) } 50% { opacity: 1 } 100% { opacity: 0; -webkit-transform: translate(-50%, 10px); transform: translate(-50%, 10px) } } .color1 { background-color: #fff } .color1::before { background-color: #fff !important } .color2 { background-color: #1bcb69 } .color2::before { background-color: #1bcb69 !important } .color3 { background-color: #d9dadb } .color3::before { background-color: #d9dadb !important } .color4 { background-color: #fff } .color4::before { background-color: #fff !important } .color5 { background-color: #fff } .color5::before { background-color: #fff !important } .color6 { background-color: #fff } .color6::before { background-color: #fff !important } .color7 { background-color: #fff } .color7::before { background-color: #fff !important } .color8 { background-color: #fff } .color8::before { background-color: #fff !important } .color9 { background-color: #fff } .color9::before { background-color: #fff !important } .color10 { background-color: #bbe0eb } .color10::before { background-color: #bbe0eb !important } .color11 { background-color: #acf2ca } .color11::before { background-color: #acf2ca !important } .color12 { background-color: #f0f0da } .color12::before { background-color: #f0f0da !important } .color13 { background-color: #fad2e3 } .color13::before { background-color: #fad2e3 !important } .color14 { background-color: #e2e2e2 } .color14::before { background-color: #e2e2e2 !important } .color15 { background-color: #e3dce6 } .color15::before { background-color: #e3dce6 !important } .color16 { background-color: #fcd7fc } .color16::before { background-color: #fcd7fc !important } .color17 { background-color: #f7e6df } .color17::before { background-color: #f7e6df !important } .color18 { background-color: #fbe599 } .color18::before { background-color: #fbe599 !important } .color19 { background-color: #fcf394 } .color19::before { background-color: #fcf394 !important } .color20 { background-color: #99d1e7 } .color20::before { background-color: #99d1e7 !important } .color21 { background-color: #a0f1c7 } .color21::before { background-color: #a0f1c7 !important } .color22 { background-color: #e8edd1 } .color22::before { background-color: #e8edd1 !important } .color23 { background-color: #f7b6d1 } .color23::before { background-color: #f7b6d1 !important } .color24 { background-color: #dad9d7 } .color24::before { background-color: #dad9d7 !important } .color25 { background-color: #d9d2e1 } .color25::before { background-color: #d9d2e1 !important } .color26 { background-color: #f6c8ee } .color26::before { background-color: #f6c8ee !important } .color27 { background-color: #f4d7cd } .color27::before { background-color: #f4d7cd !important } .color28 { background-color: #fcdc83 } .color28::before { background-color: #fcdc83 !important } .color29 { background-color: #fdee80 } .color29::before { background-color: #fdee80 !important } .color30 { background-color: #84c4e1 } .color30::before { background-color: #84c4e1 !important } .color31 { background-color: #90ecb8 } .color31::before { background-color: #90ecb8 !important } .color32 { background-color: #e3e9c5 } .color32::before { background-color: #e3e9c5 !important } .color33 { background-color: #f49ec1 } .color33::before { background-color: #f49ec1 !important } .color34 { background-color: #cacac8 } .color34::before { background-color: #cacac8 !important } .color35 { background-color: #c6bcd3 } .color35::before { background-color: #c6bcd3 !important } .color36 { background-color: #f5baeb } .color36::before { background-color: #f5baeb !important } .color37 { background-color: #f0c6b6 } .color37::before { background-color: #f0c6b6 !important } .color38 { background-color: #fcc86e } .color38::before { background-color: #fcc86e !important } .color39 { background-color: #ffe858 } .color39::before { background-color: #ffe858 !important } .color40 { background-color: #6bb2d6 } .color40::before { background-color: #6bb2d6 !important } .color41 { background-color: #66c993 } .color41::before { background-color: #66c993 !important } .color42 { background-color: #d9e6b8 } .color42::before { background-color: #d9e6b8 !important } .color43 { background-color: #f287b3 } .color43::before { background-color: #f287b3 !important } .color44 { background-color: #b8b8b9 } .color44::before { background-color: #b8b8b9 !important } .color45 { background-color: #b1a7c4 } .color45::before { background-color: #b1a7c4 !important } .color46 { background-color: #f4aae7 } .color46::before { background-color: #f4aae7 !important } .color47 { background-color: #eab8a0 } .color47::before { background-color: #eab8a0 !important } .color48 { background-color: #fab05d } .color48::before { background-color: #fab05d !important } .color49 { background-color: #ffe43c } .color49::before { background-color: #ffe43c !important } .color50 { background-color: #5198c0 } .color50::before { background-color: #5198c0 !important } .color51 { background-color: #6cb78f } .color51::before { background-color: #6cb78f !important } .color52 { background-color: #bbe0eb } .color52::before { background-color: #bbe0eb !important } .color53 { background-color: #acf2ca } .color53::before { background-color: #acf2ca !important } .color54 { background-color: #f0f0da } .color54::before { background-color: #f0f0da !important } .color55 { background-color: #fad2e3 } .color55::before { background-color: #fad2e3 !important } .color56 { background-color: #e2e2e2 } .color56::before { background-color: #e2e2e2 !important } .color57 { background-color: #e3dce6 } .color57::before { background-color: #e3dce6 !important } .calendar_month+.calendar_month { margin-top: 36px } .calendar_month .calendar_title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 130px; margin: 0 auto 24px; font-weight: 600; font-size: 20px; line-height: 25px; color: #222225; color: var(--booking-color-gray10) } .calendar_month .calendar_title .btn_next,.calendar_month .calendar_title .btn_prev { padding: 6px 5px 4px; line-height: 14px } .calendar_month .calendar_title .btn_next.disabled .ico_arrow,.calendar_month .calendar_title .btn_prev.disabled .ico_arrow { fill: #c5c5c7; fill: var(--booking-color-gray60) } .calendar_month .calendar_title .btn_next .ico_arrow,.calendar_month .calendar_title .btn_prev .ico_arrow { width: 8px; height: 14px; fill: #77777a; fill: var(--booking-color-gray40) } .calendar_month .calendar_title .btn_next .ico_arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .calendar_month .calendar_table { table-layout: fixed; width: 100%; border-spacing: 0; border-collapse: collapse } .calendar_month .calendar_header th { padding: 7px 0 3px; font-size: 15px; font-weight: 400; line-height: 20px; color: #555558; color: var(--booking-color-gray30) } .calendar_month .calendar_body::before { content: ""; display: table-row; height: 12px } .calendar_month .calendar_body td { position: relative; height: 50px } .calendar_month .calendar_date { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; width: 100%; height: 100%; color: #222225; color: var(--booking-color-gray10) } .calendar_month .calendar_date .num { display: block; margin-top: 9px; font-weight: 400; font-size: 15px; line-height: 18px } .calendar_month .calendar_date .text { display: block; margin-top: 2px; font-size: 10px; line-height: 12px } .calendar_month .calendar_date .text.hotdeal { padding: 1px 2px; border-radius: 2px; background-color: #fc4c4e; background-color: var(--booking-color-emphasis); color: #fff !important; white-space: nowrap } .calendar_month.accommodation.modal .calendar_title { margin: 0 auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; font-weight: 700 } .calendar_month.accommodation.modal .calendar_date.selected.start,.calendar_month.accommodation.modal .calendar_date.selected.end { border-radius: 9px } .calendar_month.accommodation.modal .calendar_date.selected .num { color: #222225 } .calendar_month.accommodation.modal .calendar_date .num { color: #222225; color: var(--booking-color-gray10) } .calendar_month.accommodation .calendar_body:has(.end) .calendar_date::before { background-color: #daf7e6 !important } .calendar_month.accommodation .calendar_date { position: relative } .calendar_month.accommodation .calendar_date .num { color: #222225 } .calendar_month.accommodation .calendar_date.dayoff .num,.calendar_month.accommodation .calendar_date.dayoff .text { color: #fc4c4e; color: var(--booking-color-emphasis) } .calendar_month.accommodation .calendar_date.today .num,.calendar_month.accommodation .calendar_date.today .text { color: #03aa5a } .calendar_month.accommodation .calendar_date.today .text { font-weight: 600 } .calendar_month.accommodation .calendar_date.selected { background-color: #e2f7e7 } .calendar_month.accommodation .calendar_date.selected.start,.calendar_month.accommodation .calendar_date.selected.end,.calendar_month.accommodation .calendar_date.selected.same { background-color: #03aa5a } .calendar_month.accommodation .calendar_date.selected.start .num,.calendar_month.accommodation .calendar_date.selected.start .text,.calendar_month.accommodation .calendar_date.selected.end .num,.calendar_month.accommodation .calendar_date.selected.end .text,.calendar_month.accommodation .calendar_date.selected.same .num,.calendar_month.accommodation .calendar_date.selected.same .text { color: #fff } .calendar_month.accommodation .calendar_date.selected.start .text,.calendar_month.accommodation .calendar_date.selected.end .text,.calendar_month.accommodation .calendar_date.selected.same .text { font-weight: 400 } .calendar_month.accommodation .calendar_date.selected.start::before { content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 50px; background-color: #fff; background-color: var(--booking-color-surface) } .calendar_month.accommodation .calendar_date.selected.start::after { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 50px; background-position: -385px -122px } .calendar_month.accommodation .calendar_date.selected.end::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 50px; background-color: #fff; background-color: var(--booking-color-surface) } .calendar_month.accommodation .calendar_date.selected.end::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 50px; background-position: -373px -122px } .calendar_month.accommodation .calendar_date.unselectable .num,.calendar_month.accommodation .calendar_date.unselectable .text { color: #c5c5c7; color: var(--booking-color-gray60) } .calendar_month.accommodation .calendar_date.closed .num,.calendar_month.accommodation .calendar_date.closed .text { color: #c5c5c7; color: var(--booking-color-gray60) } .calendar_month.common .calendar_date { position: relative } .calendar_month.common .calendar_date.dayoff .num,.calendar_month.common .calendar_date.dayoff .text { color: #fc4c4e; color: var(--booking-color-emphasis) } .calendar_month.common .calendar_date.today .num,.calendar_month.common .calendar_date.today .text { color: #03aa5a } .calendar_month.common .calendar_date.today .text { font-weight: 600 } .calendar_month.common .calendar_date.unselectable .num,.calendar_month.common .calendar_date.unselectable .text { color: #c5c5c7; color: var(--booking-color-gray60) } .calendar_month.common .calendar_date.closed .num,.calendar_month.common .calendar_date.closed .text { color: #c5c5c7; color: var(--booking-color-gray60) } .calendar_month.common .calendar_date.selected { border-radius: 8px; background-color: #03aa5a } .calendar_month.common .calendar_date.selected .num,.calendar_month.common .calendar_date.selected .text { color: #fff } .calendar_legend { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap } .calendar_legend .item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin: 10px 15px 0 0; font-size: 13px; line-height: 15px; color: #939396; color: var(--booking-color-gray50); white-space: nowrap } .calendar_legend .label { -ms-flex-negative: 0; flex-shrink: 0; width: 12px; height: 12px; margin-right: 6px; border-radius: 2px; border: 1px solid rgba(0,0,0,.05) } .calendar_legend .label.selectable { background-color: #03aa5a } .calendar_legend .label.unselectable { background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .calendar_legend .label.closed { background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .calendar_week { position: relative; overflow: hidden; margin: 0 20px } .calendar_week .week_scroll { overflow-x: auto; overflow-y: hidden; margin: 15px 0; padding-bottom: 10px; white-space: nowrap; -ms-overflow-style: none } .calendar_week .week_scroll::-webkit-scrollbar { display: none } .calendar_week .week_list { position: relative } .calendar_week .week_item { display: inline-block; overflow: hidden; padding: 0 2px; border-left: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); vertical-align: top; width: 56px; height: 56px } .calendar_week .week_item:first-child { padding-left: 0; border-left-width: 0 } .calendar_week .week_item.sunday .day_txt,.calendar_week .week_item.sunday .day_num { color: #ff5243 } .calendar_week .week_item.holiday .day_txt,.calendar_week .week_item.holiday .day_num { color: #ff5243 } .calendar_week .week_item.month { border-left-color: #fff; border-left-color: var(--booking-color-gray100) } .calendar_week .week_item.month+.week_item { border-left-color: #fff; border-left-color: var(--booking-color-gray100) } .calendar_week .week_item.on { border-left-color: #fff; border-left-color: var(--booking-color-gray100) } .calendar_week .week_item.on+.week_item { border-left-color: #fff; border-left-color: var(--booking-color-gray100) } .calendar_week .week_item.on .day_btn { background: #3787ff } .calendar_week .week_item.on .day_txt,.calendar_week .week_item.on .day_num,.calendar_week .week_item.on .day_label { color: #fff !important } .calendar_week .week_item.off .day_txt,.calendar_week .week_item.off .day_num { color: #bbb } .calendar_week .week_item.today .day_num::before { content: ""; position: absolute; top: 7px; left: 50%; width: 3px; height: 3px; background: #ff5658; border-radius: 50% } .calendar_week .week_item.today.sold_out .day_txt,.calendar_week .week_item.today.sold_out .day_num { color: #444447; color: var(--booking-color-gray20) } .calendar_week .week_item.today.sold_out .day_txt::before,.calendar_week .week_item.today.sold_out .day_num::before { background: #bbb !important } .calendar_week .week_item.today.sold_out .day_label { color: #ff5658 } .calendar_week .week_item.sold_out { border-left-color: #fff; border-left-color: var(--booking-color-gray100) } .calendar_week .week_item.sold_out+.week_item { border-left-color: #fff; border-left-color: var(--booking-color-gray100) } .calendar_week .week_item.sold_out .day_btn { overflow: hidden; position: relative; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); background-color: #f7f7f9; background-color: var(--booking-color-gray95); color: #bbb } .calendar_week .week_item.sold_out .day_btn::before { content: ""; display: block; position: absolute; top: 0; left: 100%; width: 1px; height: 75px; background-color: #d9d9dc; background-color: var(--booking-color-gray70); -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(47deg); transform: rotate(47deg) } .calendar_week .week_item.sold_out .day_num,.calendar_week .week_item.sold_out .day_label { color: #bbb } .calendar_week .month_btn { display: block; position: relative; width: inherit; height: inherit; padding-top: 9px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; z-index: 10 } .calendar_week .month_btn.fixed { position: absolute; left: 0 } .calendar_week .month_btn .ico_calendar { display: block; width: 16px; height: 16px; margin: 0 auto; fill: #444447; fill: var(--booking-color-gray20) } .calendar_week .month_btn .num { display: inline-block; vertical-align: top; position: relative; margin-top: 2px; font-size: 13px; font-weight: bold; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .calendar_week .month_btn .num::after { content: ""; display: inline-block; vertical-align: 3px; margin-left: 2px; border-left: 3px solid rgba(0,0,0,0); border-right: 3px solid rgba(0,0,0,0); border-top: 3px solid; border-top-color: #444447; border-top-color: var(--booking-color-gray20) } .calendar_week .day_btn { display: block; position: relative; width: inherit; height: inherit; background-color: #fff; background-color: var(--booking-color-surface); border-radius: 8px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; color: #444447; color: var(--booking-color-gray20) } .calendar_week .day_num { display: block; position: relative; padding-top: 12px; font-size: 15px; font-weight: 500; line-height: 18px; color: #444447; color: var(--booking-color-gray20) } .calendar_week .day_label { position: relative; font-size: 11px; line-height: 15px; color: #5498ff; vertical-align: top } .calendar_week .more_btn { display: inline-block; position: relative; width: inherit; height: inherit; padding-top: 8px; background-color: #fff; background-color: var(--booking-color-surface); color: #444447; color: var(--booking-color-gray20); font-size: 14px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box } .calendar_week .more_btn::after { content: "▾"; display: block; position: absolute; bottom: 10px; left: 50%; width: 15px; height: 15px; margin-left: -8px; border: 1px solid #424242; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; line-height: 12px } .calendar_time_slot .time_title { font-size: 14px; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .calendar_time_slot .time_list { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px; margin-top: 8px } .calendar_time_slot .time_list+.time_title { margin-top: 20px } .calendar_time_slot .time_item { width: calc(25% - 6px) } .calendar_time_slot .btn_time { width: 100%; border-radius: 8px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 14px; line-height: 38px; color: #444447; color: var(--booking-color-gray20) } .calendar_time_slot .btn_time.selected { border-color: #03aa5a; background-color: #03aa5a; font-weight: 600; color: #fff } .calendar_time_slot .btn_time.unselectable { color: #c5c5c7; color: var(--booking-color-gray60) } .calendar_time_selector .time_guide { font-size: 14px; line-height: 20px; color: #939396; color: var(--booking-color-gray50) } .calendar_time_selector .time_guide+.time_list { margin-top: 16px } .calendar_time_selector .time_list { -ms-overflow-style: none; scrollbar-width: none; display: -webkit-box; display: -ms-flexbox; display: flex; min-height: 74px; margin: 16px -16px 0; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: none } .calendar_time_selector .time_list::-webkit-scrollbar { display: none } .calendar_time_selector .time_item { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-negative: 0; flex-shrink: 0; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; width: 52px; padding-left: 1px; -webkit-box-sizing: border-box; box-sizing: border-box } .calendar_time_selector .time_item:first-child { margin-left: 16px } .calendar_time_selector .time_item:first-child .btn_time { border-radius: 6px 0 0 6px } .calendar_time_selector .time_item:last-child { margin-right: 16px } .calendar_time_selector .time_item:last-child .btn_time { border-radius: 0 6px 6px 0 } .calendar_time_selector .time_item+.time_item .time_text { position: relative } .calendar_time_selector .time_item+.time_item .time_text::before { content: ""; position: absolute; bottom: 0; left: -1px; width: 1px; height: 8px; background-color: #939396; background-color: var(--booking-color-gray50) } .calendar_time_selector .time_item.disabled .time_text { color: #939396; color: var(--booking-color-gray50) } .calendar_time_selector .time_item.disabled .btn_time { background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .calendar_time_selector .time_item.selected .btn_time::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 9px; background-color: #03aa5a !important } .calendar_time_selector .time_item.selected .btn_time::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background-color: #fff; background-color: var(--booking-color-surface) } .calendar_time_selector .time_item.half { width: 29px; -webkit-box-sizing: border-box; box-sizing: border-box } .calendar_time_selector .time_item.half.no_time { position: relative; width: 30px; padding-left: 0 } .calendar_time_selector .time_item.half.no_time::before { content: ""; position: absolute; left: 0; bottom: 36px; width: 1px; height: 8px; background-color: #e9e9ec; background-color: var(--booking-color-gray80); z-index: 10 } .calendar_time_selector .time_item.half.no_time::after { content: ""; position: absolute; left: 0; bottom: 0; width: 1px; height: 36px; background-color: rgba(0,0,0,.1); z-index: 10 } .calendar_time_selector .time_item.half.no_time .time_text::before { left: 0 } .calendar_time_selector .time_item.half:first-child::before,.calendar_time_selector .time_item.half:first-child::after { content: none } .calendar_time_selector .time_text { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; min-height: 30px; padding-bottom: 8px; font-size: 13px; line-height: 18px; color: #222225; color: var(--booking-color-gray10) } .calendar_time_selector .time_text .ampm { position: absolute; top: 0; left: 0; font-size: 12px; line-height: 12px; color: #555558; color: var(--booking-color-gray30) } .calendar_time_selector .btn_time { position: relative; width: 100%; height: 36px } .calendar_time_selector .calendar_legend { padding-top: 2px } .calendar_time_selector .slick-arrow { top: 56px } .booking_common_handlebar { display: block; padding: 10px 0; line-height: 5px; text-align: center; cursor: pointer } .booking_common_handlebar .handlebar { display: inline-block; vertical-align: top; width: 40px; height: 5px; border-radius: 3px; -webkit-box-shadow: inset 0px .5px .1px rgba(0,0,0,.06); box-shadow: inset 0px .5px .1px rgba(0,0,0,.06); background-color: #d9d9dc; background-color: var(--booking-color-gray70) } .common_alert_info { margin-top: 16px; padding: 18px; border-radius: 5px; background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .common_alert_info.center { text-align: center } .common_alert_info.type_green { background-color: #e6f7ee; background-color: var(--booking-color-green95) } .common_alert_info.type_green .text { color: #03aa5a } .common_alert_info.type_red { background-color: #fef4f4; background-color: var(--booking-color-red99) } .common_alert_info.type_red .ico_alert { fill: #fc4c4e; fill: var(--booking-color-emphasis) } .common_alert_info.type_red .title { color: #fc4c4e; color: var(--booking-color-emphasis) } .common_alert_info .ico_alert { vertical-align: -2px; margin-right: 4px; width: 14px; height: 14px; fill: #444447; fill: var(--booking-color-gray20) } .common_alert_info .title { font-size: 15px; font-weight: 700; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .common_alert_info .title+.text { padding-top: 8px } .common_alert_info .text { font-size: 15px; line-height: 20px; color: #77777a; color: var(--booking-color-gray40) } .common_alert_info .text .point { color: #fc4c42 } .bottom_floating_alert { z-index: 1000; position: fixed; left: 0; bottom: 0; width: 100%; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #f7f7f9; background-color: var(--booking-color-gray95) } .bottom_floating_alert .alert_inner { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 720px; margin: 0 auto; padding: 15px 40px 16px 18px } .bottom_floating_alert .alert_inner .ico_alert { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 14px; height: 14px; margin-top: 3px; margin-right: 4px; fill: #fc4c42 } .bottom_floating_alert .alert_inner .text_area { font-size: 14px; font-weight: 500; line-height: 20px; color: #939396; color: var(--booking-color-gray50) } .bottom_floating_alert .alert_inner .title { display: block; font-weight: 600; color: #444447; color: var(--booking-color-gray20) } .bottom_floating_alert .alert_inner .title+.text { margin-top: 2px } .bottom_floating_alert .alert_inner .btn_close { position: absolute; top: 0; right: 0; padding: 16px 18px; line-height: 18px } .bottom_floating_alert .alert_inner .btn_close .fn-booking-close1 { vertical-align: top; font-size: 18px; color: #77777a; color: var(--booking-color-gray40) } .common_modal { -webkit-transform: translateY(100%); transform: translateY(100%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; position: fixed; left: 0; right: 0; bottom: 0; height: calc(100% - 50px); border-radius: 24px 24px 0px 0px; background-color: #fff; background-color: var(--booking-color-surface); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; z-index: 10000; overflow: hidden } .common_modal.show { -webkit-transform: translateY(0); transform: translateY(0) } .common_modal .modal_header { position: relative; padding: 20px 50px 16px 16px; font-size: 18px; font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .common_modal .modal_header .btn_close { position: absolute; top: 0; right: 0; width: 50px; height: 60px; font-size: 18px; color: #77777a; color: var(--booking-color-gray40) } .common_modal .modal_header .btn_close .fn-booking::before { font-weight: bold } .common_modal .modal_body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); overflow-y: auto } .common_modal .modal_body .body_inner { padding: 16px } .common_modal .modal_footer { padding: 12px 20px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .common_modal .modal_footer .btn_group { display: -webkit-box; display: -ms-flexbox; display: flex } .common_modal .modal_footer .btn_group .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 44px; border-radius: 8px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 15px; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .common_modal .modal_footer .btn_group .btn+.btn { margin-left: 8px } .common_modal .modal_footer .btn_group .btn.type_green { border-color: #03aa5a; background-color: #03aa5a; color: #fff } .common_modal .modal_footer .btn_group .btn.disabled { border-color: #c5c5c7; border-color: var(--booking-color-gray60); background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .home_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: fixed; top: 0; left: 0; width: 100%; height: 50px; padding-right: 18px; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0))); background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0)); opacity: 1; -webkit-transition: opacity .2s ease,background-color .2s ease; transition: opacity .2s ease,background-color .2s ease; z-index: 9000 } .home_header.scroll { opacity: 0 } .home_header.isPcMapFixed { opacity: 1; background-image: none; background-color: #fff; background-color: var(--booking-color-surface) } .home_header.isPcMapFixed .link_back .ico_arrow { fill: #222225; fill: var(--booking-color-gray10) } .home_header.isPcMapFixed .header_title { display: block } .home_header .header_logo { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 18px } .home_header .header_logo .logo_link { margin-right: 4px } .home_header .header_logo .logo_link .logo_n_square { vertical-align: 1px; width: 21px; height: 21px; fill: #fff } .home_header .header_logo .book_link { font-size: 18px; font-weight: 600; line-height: 25px; color: #fff } .home_header .header_logo .logo_line { width: 122px; height: 17px; background-position: -136px -258px } .home_header .link_back { -ms-flex-negative: 0; flex-shrink: 0; position: relative; width: 45px; height: 50px; color: rgba(0,0,0,0) } .home_header .link_back .ico_arrow { position: absolute; top: 50%; left: 18px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 12px; height: 21px; fill: #fff } .home_header .header_title { display: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 20px; font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .home_header .link_my { -ms-flex-negative: 0; flex-shrink: 0; position: relative; width: 34px; height: 34px; padding: 2px } .home_header .link_my .profile_area { position: relative; width: 32px; height: 32px; border: 1px solid; border-color: #fff; border-color: var(--booking-color-surface); border-radius: 50%; -webkit-box-shadow: 1px 1px 6px 0 rgba(0,0,0,.1); box-shadow: 1px 1px 6px 0 rgba(0,0,0,.1) } .home_header .link_my .profile_area::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border: 1px solid rgba(0,0,0,.05); border-radius: 50% } .home_header .link_my .profile_area .img { border-radius: 50% } .home_header .link_my .ico_label { position: absolute; top: 2px; right: -1px; width: 19px; height: 12px } @media screen and (min-width: 720px) { .home_header { padding-right:10px; background-color: #fff; background-color: var(--booking-color-surface); background-image: none } .home_header.scroll { opacity: 1; height: 51px; border-bottom: 1px solid rgba(0,0,0,.04) } .home_header .header_logo { padding-left: 10px } .home_header .header_logo .logo_link .logo_n_square { fill: #222225; fill: var(--booking-color-gray10) } .home_header .header_logo .book_link { font-size: 20px; color: #222225; color: var(--booking-color-gray10) } .home_header .header_logo .logo_line { width: 79px; height: 11px; background-position: -102px -343px } } .section_summary .business_summary_area { position: relative; max-width: 720px; height: 400px; margin: 0 auto; overflow: hidden } .section_summary .business_summary_area .summary_info { position: absolute; bottom: 0; left: 0; right: 0; height: 350px; background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(80%, #35110c)); background-image: linear-gradient(to bottom, transparent, #35110c 80%) } .section_summary .business_summary_area .summary_info .info_detail { position: absolute; left: 22px; right: 22px; bottom: 43px } @media screen and (min-width: 720px) { .section_summary .business_summary_area .summary_info .info_detail { left:calc((100% - 720px)/2 + 22px) } } .section_summary .business_summary_area .summary_info .info_detail .detail_title { font-size: 32px; line-height: 38px; font-weight: 800; color: #f0f0f2 } .section_summary .business_summary_area .summary_info .info_detail .detail_sub { margin-top: 6px; font-size: 15px; line-height: 22px; opacity: .9; color: #f0f0f2 } .section_summary .business_summary_area .summary_info .info_detail .detail_text { display: inline-block; vertical-align: top; margin-top: 8px; font-size: 16px; line-height: 21px; font-weight: 300; color: #f0f0f2 } .section_summary .business_summary_area .summary_info .info_detail .detail_text+.detail_text::before { content: ""; display: inline-block; vertical-align: 4px; width: 3px; height: 3px; margin: 0 5px 0 7px; border-radius: 50%; background-color: #e1e5e7; opacity: .5 } .section_summary .business_summary_area .summary_info .info_detail .detail_text.star { font-weight: bold } .section_summary .business_summary_area .summary_info .info_detail .detail_text.star .fn-star2 { display: inline-block; vertical-align: -1px; margin-right: 5px; color: #f0f0f2 } .section_summary .summary_detail_area { overflow: hidden; position: relative; margin-top: -15px; -webkit-box-shadow: 0 -10px 10px 0 rgba(0,0,0,.05); box-shadow: 0 -10px 10px 0 rgba(0,0,0,.05); border-top-left-radius: 20px; border-top-right-radius: 20px; background-color: #fff; background-color: var(--booking-color-surface) } .section_summary .summary_detail_area .detail_notice { padding: 15px 0 18px; background-color: #aaa; text-align: center; color: #fff } .section_summary .summary_detail_area .detail_notice.d_day { background-color: #fc4c4e } .section_summary .summary_detail_area .detail_notice .notice_title { font-size: 18px; font-weight: 900 } .section_summary .summary_detail_area .detail_info { max-width: 720px; margin: 0 auto; padding: 21px; -webkit-box-sizing: border-box; box-sizing: border-box } .section_summary .summary_detail_area .detail_info>div+div { margin-top: 8px } .section_summary .summary_detail_area .business_hours,.section_summary .summary_detail_area .location_summary,.section_summary .summary_detail_area .business_amenities,.section_summary .summary_detail_area .business_seats,.section_summary .summary_detail_area .business_detail { position: relative; padding-left: 26px; color: #222225; color: var(--booking-color-gray10) } .section_summary .summary_detail_area .business_hours [class*=fn-booking],.section_summary .summary_detail_area .location_summary [class*=fn-booking],.section_summary .summary_detail_area .business_amenities [class*=fn-booking],.section_summary .summary_detail_area .business_seats [class*=fn-booking],.section_summary .summary_detail_area .business_detail [class*=fn-booking] { position: absolute; top: 4px; left: 0; font-size: 15px; color: #444447; color: var(--booking-color-gray20) } .section_summary .summary_detail_area .business_hours .schedule_row { position: relative; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; display: inline-block; vertical-align: top; max-width: 90%; padding-right: 23px } .section_summary .summary_detail_area .business_hours .schedule_row.on { white-space: initial; text-overflow: initial } .section_summary .summary_detail_area .business_hours .schedule_row.on .ico_arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .section_summary .summary_detail_area .business_hours .schedule_row .no_ellipsis { white-space: initial; text-overflow: initial } .section_summary .summary_detail_area .business_hours .schedule_row .no_ellipsis+.btn_hours { display: none } .section_summary .summary_detail_area .business_hours .text { display: inline-block; vertical-align: top } .section_summary .summary_detail_area .business_hours .text.point { font-weight: bold; color: #fc4c4e } .section_summary .summary_detail_area .business_hours .text.closed { color: #999 } .section_summary .summary_detail_area .business_hours .text+.text::before { content: ""; display: inline-block; vertical-align: 4px; width: 3px; height: 3px; margin: 0 6px 0 7px; border-radius: 50%; background-color: #333 } .section_summary .summary_detail_area .business_hours .btn_hours { position: absolute; top: 0; right: 0; padding: 0 6px; background-color: rgba(0,0,0,0) } .section_summary .summary_detail_area .business_hours .btn_hours .ico_arrow { position: relative; display: inline-block; width: 11px; height: 15px; vertical-align: -1px } .section_summary .summary_detail_area .business_hours .btn_hours .ico_arrow:before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-top: -2px; border-right: 1.5px solid var(--booking-color-gray10); border-bottom: 1.5px solid var(--booking-color-gray10) } .section_summary .summary_detail_area .business_hours .btn_hours.on .ico_arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .section_summary .summary_detail_area .business_hours .hours_list { margin: 10px 0 18px } .section_summary .summary_detail_area .business_hours .hours_list .item { display: -webkit-box; display: -ms-flexbox; display: flex; color: #222225; color: var(--booking-color-gray10) } .section_summary .summary_detail_area .business_hours .hours_list .item .day { width: 67px } .section_summary .summary_detail_area .business_hours .hours_list .item .hours { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .section_summary .summary_detail_area .business_hours .hours_list .item+.item { margin-top: 10px } .section_summary .summary_detail_area .location_summary .fn-pin2 { position: absolute; top: 3px; left: -3px; font-size: 19px; color: #444447; color: var(--booking-color-gray20) } .section_summary .summary_detail_area .business_detail .text { display: inline-block; vertical-align: top } .section_summary .summary_detail_area .business_detail .text+.text::before { content: ""; display: inline-block; vertical-align: 4px; width: 3px; height: 3px; margin: 0 6px 0 7px; border-radius: 50%; background-color: #444447; background-color: var(--booking-color-gray20) } .section_summary .summary_detail_area .business_amenities .fn-booking-all-view { top: 5px; font-size: 13px } .section_summary .summary_detail_area .business_seats .fn-booking-chair { top: 5px } .section_summary .summary_detail_area .business_links { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -ms-flex-wrap: wrap; flex-wrap: wrap; padding-left: 26px } .section_summary .summary_detail_area .business_links .link { -ms-flex-negative: 0; flex-shrink: 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 15px; line-height: 22px; color: #555558; color: var(--booking-color-gray30) } .section_summary .summary_detail_area .business_links .link+.link::before { content: ""; width: 3px; height: 3px; margin: 0 8px; border-radius: 50%; background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .section_summary .summary_detail_area .business_links .link [class^=ico_] { margin-right: 2px } .section_summary .summary_detail_area .business_links .link .ico_map { width: 14px; height: 14px; background-position: -96px -418px } .section_summary .summary_detail_area .business_links .link .ico_home { width: 14px; height: 14px; background-position: -48px -418px } .section_summary .summary_detail_area .business_links .link .ico_talk { width: 14px; height: 14px; background-position: -128px -418px } .section_summary .summary_detail_area .business_links .link .ico_phone { width: 14px; height: 14px; background-position: -112px -418px } .section_summary .summary_detail_area .business_links .btn_copy { margin: 1px 0 0 4px; font-size: 14px; line-height: 22px; color: #0c43b7 } .section_summary .summary_detail_area .green_ticket { -webkit-display: flex; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 24px !important; padding: 15px 0 10px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_summary .summary_detail_area .green_ticket .ticket_logo { -webkit-box-flex: 0; -ms-flex: none; flex: none; position: relative; float: left; width: 54px; height: 54px; margin-right: 12px; border-radius: 4px; -webkit-box-shadow: 0 2px 4px 0 rgba(3,199,90,.19); box-shadow: 0 2px 4px 0 rgba(3,199,90,.19); background-image: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to right, #0ad18e, #01d760) } .section_summary .summary_detail_area .green_ticket .ticket_logo .logo { width: 36px; height: 35px; background-position: -78px -358px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto } .section_summary .summary_detail_area .green_ticket .ticket_text { margin-top: -4px } .section_summary .summary_detail_area .green_ticket .ticket_text .txt1 { font-size: 15px; font-weight: bold; color: #222225; color: var(--booking-color-gray10) } .section_summary .summary_detail_area .green_ticket .ticket_text .txt2 { font-size: 14px; line-height: 1.36; color: #555558; color: var(--booking-color-gray30) } .section_summary .summary_detail_area .green_ticket .ticket_text .txt2 .point { font-weight: bold; color: #03c75a } .section_summary .summary_detail_area .plus_membership { overflow: hidden; margin-top: 15px !important; padding-top: 18px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 14px; color: #222225; color: var(--booking-color-gray10) } .section_summary .summary_detail_area .plus_membership .ico_plus_membership { width: 45px; height: 16px; background-position: -155px -375px; float: left; margin: 2px 6px 0 0 } .section_summary .summary_detail_area .plus_membership .text_plus_membership { overflow: hidden; line-height: 1.4 } .section_summary .summary_detail_area .npay_point { overflow: hidden } .section_summary .summary_detail_area .npay_point .point_label { display: block; float: left; width: 52px; height: 52px; padding-top: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50%; background-image: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to right, #0ad18e, #01d760); font-size: 12px; line-height: 18px; text-align: center; color: #fff } .section_summary .summary_detail_area .npay_point .point_label .percent { display: block; font-size: 16px } .section_summary .summary_detail_area .npay_point .point_content { overflow: hidden; padding-left: 9px } .section_summary .summary_detail_area .npay_point .point_content .text { font-size: 15px; line-height: 1.33; letter-spacing: -0.1px; color: #444447; color: var(--booking-color-gray20) } .section_summary .summary_detail_area .npay_point .point_content .text .ico_npay { width: 44px; height: 17px; background-position: -48px -398px; margin-top: 3px; vertical-align: top; font-size: 0; color: rgba(0,0,0,0) } .section_summary .summary_detail_area .npay_point .point_content .sub_text { margin-top: 5px; font-size: 14px; line-height: 1.43; color: #03c75a } .section_summary .summary_detail_area .npay_point .point_content .sub_text .ico_npay_plus_m { width: 52px; height: 17px; background-position: -260px -258px; margin-right: 5px; vertical-align: -2px } .section_summary .summary_detail_area .npay_point .point_content .sub_text .ico_arrow { position: relative; display: inline-block; width: 6px; height: 11px; margin-left: 2px } .section_summary .summary_detail_area .npay_point .point_content .sub_text .ico_arrow:before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-left: -2px; border-top: 1px solid #03c75a; border-right: 1px solid #03c75a } @media screen and (max-width: 720px) { .section_summary .summary_detail_area .business_links .link+.link::before { margin:0 4px } .section_summary .summary_detail_area .business_links .btn_copy { color: #0068c3; color: var(--booking-color-blue-link) } } .section_info { overflow: hidden; max-height: 700px; margin-bottom: 40px; padding: 0 20px; color: #222225; color: var(--booking-color-gray10) } .section_info .info_title { font-size: 17px } .section_info .info_desc { max-width: 720px; margin: 0 auto } .section_info .info_desc+.info_detail { margin-top: 21px } .section_info .desc_link { display: block } .section_info .desc_link+.desc_link { padding-top: 20px } .section_info .desc_link+.desc_img { padding-top: 20px } .section_info .desc_img { display: inline-block; vertical-align: top } .section_info .desc_img+.desc_img { padding-top: 20px } .section_info .desc_img+.desc_link { padding-top: 20px } .section_info .info_detail { max-width: 720px; margin: 0 auto; padding: 20px 0; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_info .info_detail.no_spacing .desc_link+.desc_link { padding-top: 0 } .section_info .info_detail.no_spacing .desc_img+.desc_img { padding-top: 0 } .section_info .info_detail .info_detail_title { font-size: 17px } .section_info .info_detail .info_detail_title+.info_detail_desc { margin-top: 5px } .section_info .info_detail .info_detail_title+.desc_link { padding-top: 20px } .section_info .info_detail .info_detail_title+.desc_img { padding-top: 20px } .section_info .info_detail .info_detail_desc+.desc_link { padding-top: 20px } .section_info .info_detail .info_detail_desc+.desc_img { padding-top: 20px } .section_info+.btn_more_area::before { top: -57px !important } .section_photos { padding: 0 20px 35px } .section_photos .photos_area:first-child .photo { height: 160px } .section_photos .photos_area .link_photo { display: inline-block; padding-bottom: 2px; -webkit-box-sizing: border-box; box-sizing: border-box; vertical-align: top } .section_photos .photos_area .link_photo+.link_photo { padding-left: 2px } .section_photos .photos_area .photo { overflow: hidden; display: inline-block; width: 100%; height: 110px; -o-object-fit: cover; object-fit: cover; border-radius: 2px; -webkit-box-shadow: 0 2px 16px 0 rgba(0,0,0,.08); box-shadow: 0 2px 16px 0 rgba(0,0,0,.08); vertical-align: top } .section_photos+.btn_more_area::before { display: none !important } .section_map { padding: 0 20px 40px } .section_map .map_figure { position: relative; overflow: hidden; border-radius: 6px } .section_map .map_figure::before { content: ""; overflow: hidden; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 6px; pointer-events: none; z-index: 10 } .section_map .map_figure .link_map { display: block } .section_map .map_figure .img_map { vertical-align: top } .section_map .map_figure .btns_area { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex } .section_map .map_figure .btns_area::before { content: ""; position: absolute; top: -1px; left: 0; right: 0; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_map .map_figure .btns_area .btn_transport { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 11px 0 10px; font-size: 14px; text-align: center; background-color: #fff; background-color: var(--booking-color-surface); color: #000; color: var(--booking-color-gray0) } .section_map .map_figure .btns_area .btn_transport+.btn_transport { border-left: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_map .map_figure .btns_area .btn_transport .fn-metro1,.section_map .map_figure .btns_area .btn_transport .fn-car1 { display: block; font-size: 24px; color: #222225; color: var(--booking-color-gray10) } .section_map .map_figure .btns_area .btn_transport .fn-booking-walking1 { display: block; font-size: 20px; margin-top: 3px; color: #222225; color: var(--booking-color-gray10) } .section_map .map_address { margin-top: 10px } .section_map .map_address .btn_address { display: block; height: 52px; border-radius: 6px; background-image: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to right, #0ad18e, #01d760); line-height: 52px; color: #fff; text-align: center } .section_map .map_address .btn_address::before { content: ""; width: 13px; height: 17px; background-position: -16px -418px; margin-right: 8px; vertical-align: -2px } .section_map .map_address .address_layer { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.95); z-index: 9999 } .section_map .map_address .address_layer .layer_area { position: absolute; top: 50%; left: 20px; right: 20px; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .section_map .map_address .address_layer .layer_area .btn_close { position: absolute; top: -40px; right: 0; color: rgba(0,0,0,0) } .section_map .map_address .address_layer .layer_area .btn_close .ico_close { position: relative; display: inline-block; width: 32px; height: 32px } .section_map .map_address .address_layer .layer_area .btn_close .ico_close:before,.section_map .map_address .address_layer .layer_area .btn_close .ico_close:after { content: ""; position: absolute; top: 50%; left: 50%; width: 43px; height: 2px; background-color: #fff } .section_map .map_address .address_layer .layer_area .btn_close .ico_close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .section_map .map_address .address_layer .layer_area .btn_close .ico_close:after { -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg) } .section_map .map_address .address_layer .layer_area .layer_header { padding: 23px 20px 20px 20px; border-top-left-radius: 6px; border-top-right-radius: 6px; background-color: #fff; text-align: center } .section_map .map_address .address_layer .layer_area .layer_header .title { display: block; display: -webkit-box; overflow: hidden; max-height: 56px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size: 20px; line-height: 28px; font-weight: 600; color: #000 } .section_map .map_address .address_layer .layer_area .layer_body { overflow: hidden; border-bottom-left-radius: 6px; border-bottom-right-radius: 6px; background-color: #fff } .section_map .map_address .address_layer .layer_area .layer_info { padding: 35px 31px 35px 26px; border-top: 1px solid rgba(0,0,0,.1) } .section_map .map_address .address_layer .layer_area .layer_info .txt1 { font-size: 24px; line-height: 1.46; font-weight: 600; word-break: keep-all; color: #222 } .section_map .map_address .address_layer .layer_area .layer_info .txt2 { display: inline-block; vertical-align: top; margin-top: 10px; font-size: 16px; line-height: 1.56; font-weight: 500; color: #03c75a } .section_map .map_address .address_layer .layer_area .layer_info .txt2::before { content: ""; width: 12px; height: 13px; background-position: -359px -265px; margin-right: 9px } .section_map .map_address .address_layer .layer_area .link_map { display: block; height: 52px; margin: 0 20px 20px 20px; border-radius: 6px; background-image: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to right, #0ad18e, #01d760); font-size: 16px; font-weight: 500; line-height: 52px; text-align: center; color: #fff } .section_map .map_address .address_layer .layer_area .link_map .ico_map { width: 13px; height: 17px; background-position: -16px -418px; margin-right: 8px; vertical-align: -3px } .section_map .map_info { padding-top: 19px } .section_map .map_info.type_map .map_info_tit { pointer-events: none } .section_map .map_info.type_map .map_info_tit.link { color: #000 } .section_map .map_info .map_info_tit { display: block; padding-bottom: 8px; font-size: 18px; line-height: 22px; font-weight: 500 } .section_map .map_info .map_info_tit.link { color: #005fc1; color: #0068c3; color: var(--booking-color-blue-link) } .section_map .map_info .info_area { position: relative; font-size: 16px; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .section_map .map_info .info_area+.info_area { margin-top: 19px } .section_map .map_info .info_area .fn-pin2 { position: absolute; top: 2px; left: -1px; font-size: 19px; color: #444447; color: var(--booking-color-gray20) } .section_map .map_info .info_area .fn-car2 { position: absolute; top: 0; left: -1px; font-size: 19px; color: #444447; color: var(--booking-color-gray20) } .section_map .map_info .info_area .fn-call2 { position: absolute; top: 3px; left: 2px; font-size: 18px; color: #444447; color: var(--booking-color-gray20) } .section_map .map_info .info_area .info_row { overflow: hidden; padding-left: 24px } .section_map .map_info .info_area .info_row+.info_row { margin-top: 9px } .section_map .map_info .info_area .info_row .row_title { float: left; margin-right: 10px; color: #555558; color: var(--booking-color-gray30) } .section_map .map_info .info_area .info_row .row_text { overflow: hidden; display: block } .section_map .map_info .info_area a { color: #000; color: var(--booking-color-gray0) } .section_map .map_info .info_area .phone_call { color: #03c75a; font-weight: bold } .section_map .map_info .info_area .road_name { color: #555558; color: var(--booking-color-gray30) } .section_map .map_info .info_area .parking_title { color: #fc4c4e } .section_map .map_info .info_area .parking_detail { margin-top: 8px; padding-left: 24px; font-size: 14px; line-height: 1.6; color: #222225; color: var(--booking-color-gray10) } .section_map .map_info .info_detail { margin-top: 11px; padding: 10px 12px 12px; border-radius: 8px; background-color: #fff7f5; font-size: 14px; line-height: 22px; color: #fc4c4e } .section_map .map_info .info_detail .text { position: relative; padding-left: 20px } .section_map .map_info .info_detail .text::before { content: ""; position: absolute; top: 4px; left: 0; width: 15px; height: 15px; background-position: -265px -281px } .popup_map { position: fixed; top: 0; bottom: 0; left: 0; right: 0; z-index: 9000; width: 100%; background-color: #fff } .popup_map .map_title { padding: 0 45px; border-bottom: 1px solid rgba(0,0,0,.05); text-align: center } .popup_map .map_title .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; display: inline-block; vertical-align: top; max-width: 100%; font-size: 18px; line-height: 48px; color: #222 } .popup_map .map_title .btn_close { position: relative; display: inline-block; width: 22px; height: 22px; position: absolute; top: 9px; right: 13px; padding: 5px; color: rgba(0,0,0,0) } .popup_map .map_title .btn_close:before,.popup_map .map_title .btn_close:after { content: ""; position: absolute; top: 50%; left: 50%; width: 30px; height: 1px; background-color: #222 } .popup_map .map_title .btn_close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .popup_map .map_title .btn_close:after { -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg) } .popup_map .map_area { height: 100% } @media screen and (orientation: landscape) { .section_map .map_address .address_layer .layer_area { left:61px; right: 61px } .section_map .map_address .address_layer .layer_area .btn_close { top: 0; right: -40px } .section_map .map_address .address_layer .layer_area .layer_info { text-align: center } .section_map .map_address .address_layer .layer_area .link_map { width: 295px; margin: 0 auto 20px } } .section_contact { padding: 0 20px } .section_contact.type_pc .contact_area:not(.talk_contact_area) .link_contact { color: #000; color: var(--booking-color-gray0); pointer-events: none } .section_contact .contact_area { position: relative; padding: 0 0 18px 25px; line-height: 21px } .section_contact .contact_area:last-child { padding: 0 0 40px 25px } .section_contact .contact_area+.contact_area { border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); padding-top: 18px } .section_contact .contact_area+.contact_area .fn-home2 { top: 20px } .section_contact .contact_area>a { color: #000; color: var(--booking-color-gray0) } .section_contact .contact_area .link_contact { display: inline-block; vertical-align: top; font-weight: bold; color: #03c75a } .section_contact .contact_area .link_contact+.contact_phrase { margin-top: 5px } .section_contact .fn-call2 { position: absolute; top: 0; left: 0; font-size: 18px; color: #444447; color: var(--booking-color-gray20) } .section_contact .fn-home2 { position: absolute; top: 0; left: 0; font-size: 18px; color: #444447; color: var(--booking-color-gray20) } .section_contact .fn-talktalk-fill { position: absolute; top: 20px; left: 0; font-size: 20px; color: #444447; color: var(--booking-color-gray20) } .section_contact .contact_phrase { display: block; color: #222225; color: var(--booking-color-gray10) } .section_contact .contact_phrase+.contact_phrase { margin-top: 5px } .section_contact .contact_phrase+.link_contact { margin-top: 5px } .section_menu_list { position: relative; padding-bottom: 35px } .section_menu_list .menu_list_area { position: relative; min-height: 115px; overflow-x: auto; -ms-overflow-style: none } .section_menu_list .menu_list_area::-webkit-scrollbar { display: none } .section_menu_list .menu_list_area.no_image { min-height: 76px } .section_menu_list .menu_list_area.no_image .list_menu>li:only-child .link_menu { width: 100% } .section_menu_list .menu_list_area.no_image .content_menu .link_menu { width: 120px; min-height: 48px; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(0,0,0,.13) } .section_menu_list .menu_list_area.no_image .content_menu .link_menu .img_wrap { display: none } .section_menu_list .menu_list_area.no_image .content_menu .link_menu .info_wrap { margin: 0 } .section_menu_list .list_menu { -webkit-didsply: flex; display: -webkit-box; display: -ms-flexbox; display: flex } .section_menu_list .list_menu .content_menu:first-child { padding-left: 22px } .section_menu_list .list_menu .content_menu:last-child { padding-right: 22px } .section_menu_list .list_menu>li:only-child { width: 100% } .section_menu_list .list_menu>li:only-child .link_menu { -webkit-display: flex; display: -webkit-box; display: -ms-flexbox; display: flex; width: 100% } .section_menu_list .list_menu>li:only-child .img_wrap { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 136px } .section_menu_list .list_menu>li:only-child .info_wrap { width: 100%; margin: 0 0 0 14px } .section_menu_list .list_menu>li:first-child:nth-last-child(2),.section_menu_list .list_menu>li:first-child:nth-last-child(2)~li { width: 50% } .section_menu_list .list_menu>li:first-child:nth-last-child(2) .link_menu,.section_menu_list .list_menu>li:first-child:nth-last-child(2)~li .link_menu { width: 100% } .section_menu_list .list_menu>li:first-child:nth-last-child(2) .img_menu,.section_menu_list .list_menu>li:first-child:nth-last-child(2)~li .img_menu { -webkit-object-fit: cover; -o-object-fit: cover; object-fit: cover } .section_menu_list .content_menu { -webkit-didsply: flex; display: -webkit-box; display: -ms-flexbox; display: flex; line-height: 1.3; -ms-flex-negative: 0; flex-shrink: 0 } .section_menu_list .content_menu+.content_menu { padding-left: 10px } .section_menu_list .link_menu { display: block; width: 136px } .section_menu_list .img_wrap { overflow: hidden; position: relative; height: 102px; border-radius: 6px; -webkit-box-shadow: 0 2px 16px 0 rgba(0,0,0,.08); box-shadow: 0 2px 16px 0 rgba(0,0,0,.08) } .section_menu_list .img_wrap .no_img { position: relative; display: block; height: 100%; background-color: #ededed } .section_menu_list .img_wrap .no_img::before { content: ""; width: 28px; height: 28px; background-position: -401px -106px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto } .section_menu_list .img_label { position: absolute; left: 0; top: 0; height: 19px; padding: 4px 8px 0 9px; border-radius: 6px 0 0 0; background-color: #fc4c4e; font-size: 13px; line-height: 15px; font-weight: bold; color: #fff } .section_menu_list .info_wrap { margin-top: 10px } .section_menu_list .info_wrap .menu_name { font-size: 15px; color: #000; color: var(--booking-color-gray0); display: block; display: -webkit-box; overflow: hidden; max-height: 72px; overflow-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis } .section_menu_list .info_wrap .menu_name.kor { display: block; display: -webkit-box; overflow: hidden; max-height: 48px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis } .section_menu_list .info_wrap .menu_price { margin-top: 3px; font-weight: bold; color: #fc4c4e } .section_menu_list .info_wrap .menu_price .price { display: inline-block; vertical-align: top; margin-right: 4px } .section_menu_list .info_wrap .menu_price .original { display: inline-block; vertical-align: 1px; font-size: 13px; font-weight: normal; color: #acacac } .booking_select { display: -webkit-box; display: -ms-flexbox; display: flex; position: relative; padding: 0 15px; border-radius: 8px; border: 1px solid; border-color: #939396; border-color: var(--booking-color-gray50); background-color: #fff; background-color: var(--booking-color-surface); -webkit-box-sizing: border-box; box-sizing: border-box } .booking_select+.booking_list { margin-top: 16px } .booking_select .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; padding-right: 19px; font-size: 14px; line-height: 38px; font-weight: 600; color: #555558; color: var(--booking-color-gray30) } .booking_select .btn+.btn { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-left: 33px } .booking_select .btn+.btn::before { position: absolute; top: 50%; left: -17px; width: 1px; height: 15px; background-color: #e9e9ec; background-color: var(--booking-color-gray80); -webkit-transform: translateY(-50%); transform: translateY(-50%); content: "" } .booking_select .btn .ico_calendar { vertical-align: top; width: 16px; height: 16px; margin-top: 11px; margin-right: 8px; fill: #555558; fill: var(--booking-color-gray30) } .booking_select .btn .fn-user2 { margin-right: 8px; font-size: 16px; vertical-align: -3px; color: #555558; color: var(--booking-color-gray30) } .booking_select .btn .fn-booking-down1 { position: absolute; top: 0; right: 0; margin-top: 13px; margin-left: 6px; font-size: 12px; color: #939396; color: var(--booking-color-gray50) } .booking_select .btn .fn-booking-down1::before { font-weight: bold } .booking_filter { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 720px; margin: 20px auto 0; overflow: auto hidden } .booking_filter+.booking_list { margin-top: 12px } .booking_filter .filter_item { -ms-flex-negative: 0; flex-shrink: 0; padding: 0px 15px; border-radius: 18px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); font-size: 14px; line-height: 36px; color: #444447; color: var(--booking-color-gray20) } .booking_filter .filter_item+.filter_item { margin-left: 6px } .booking_filter .filter_item.active { border-color: #555558; border-color: var(--booking-color-gray30); background-color: #555558; background-color: var(--booking-color-gray30); font-weight: 700; color: #fff } .section_booking_list { padding: 0 20px 40px 20px } .section_booking_list .booking_list .item { position: relative; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 12px; overflow: hidden } .section_booking_list .booking_list .item+.item { margin-top: 12px } .section_booking_list .booking_list .item.sold_out .link_img .img_txt { background-color: #777 } .section_booking_list .booking_list .item.sold_out .desc_area .desc_title { color: #777 } .section_booking_list .booking_list .item.sold_out .desc_area .box_bottom .btn_book { background: #e0e0e0 !important } .section_booking_list .booking_list .item.d_day .desc_area .desc_price,.section_booking_list .booking_list .item.d_day .desc_area .desc_txt { color: #fc4c4e !important } .section_booking_list .booking_list .item.d_day .desc_area .box_bottom .btn_book { background: rgba(252,76,78,.08) !important; color: #fc4c4e } .section_booking_list .booking_list .item.d_day .desc_area .desc_thumb .thumb_txt { background-color: rgba(252,76,78,.9) } .section_booking_list .booking_list .item.complex .desc_area .desc_box { padding: 20px 136px 16px 16px } .section_booking_list .booking_list .item.complex .desc_area .desc_box .box_top { min-height: 89px } .section_booking_list .booking_list .item.complex .desc_area .desc_box .box_top .desc_txt { display: block; display: -webkit-box; overflow: hidden; max-height: 44px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; white-space: normal } .section_booking_list .booking_list .link_img { position: relative } .section_booking_list .booking_list .link_img .slick-dots { position: absolute; left: 0; right: 0; bottom: 15px; height: 6px; text-align: center } .section_booking_list .booking_list .link_img .slick-dots .dot_list { display: inline-block; vertical-align: top } .section_booking_list .booking_list .link_img .slick-dots .dot_list>li { display: inline-block; vertical-align: top; padding: 0 3px } .section_booking_list .booking_list .link_img .slick-dots .dot_list>li .dot_link { display: inline-block; vertical-align: top; width: 6px; height: 6px; border-radius: 50%; background-color: rgba(255,255,255,.4) } .section_booking_list .booking_list .link_img .slick-dots .dot_list>li.slick-active .dot_link { background-color: #fff } .section_booking_list .booking_list .link_img .img { height: 190px; -o-object-fit: cover; object-fit: cover; vertical-align: top } .section_booking_list .booking_list .link_img .img_txt { position: absolute; top: 0; left: 0; max-width: 220px; padding: 7px 15px; border-top-left-radius: 8px; background-color: rgba(252,76,78,.96); font-size: 14px; line-height: 21px; color: #fff } .section_booking_list .booking_list .link_img .slick-slider .slick-list { overflow: hidden } .section_booking_list .booking_list .link_img .scroll_item { overflow: hidden; border-top-left-radius: 8px; border-top-right-radius: 8px; vertical-align: top } .section_booking_list .booking_list .link_img+.desc_area { border-top-left-radius: 0; border-top-right-radius: 0 } .section_booking_list .booking_list .link_img+.desc_area .desc_box .box_top { min-height: auto } .section_booking_list .booking_list .link_img+.desc_area .desc_box .box_top .desc_title { word-break: keep-all } .section_booking_list .booking_list .link_img+.desc_area .desc_box .box_top .desc_detail { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; display: block; font-size: 15px; line-height: 20px; color: #555558; color: var(--booking-color-gray30) } .section_booking_list .booking_list .item_desc { display: block } .section_booking_list .booking_list .desc_area { overflow: hidden; position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; border-radius: 8px; background-color: #fff; background-color: var(--booking-color-surface) } .section_booking_list .booking_list .desc_area .desc_thumb { position: absolute; top: 0; right: 0; bottom: 0; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 120px } .section_booking_list .booking_list .desc_area .desc_thumb .thumb_txt { position: absolute; left: 0; right: 0; bottom: 0; background-color: rgba(119,119,119,.9); font-size: 14px; line-height: 35px; text-align: center; font-weight: bold; color: #fff } .section_booking_list .booking_list .desc_area .desc_thumb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,.03) } .section_booking_list .booking_list .desc_area .desc_box { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; position: relative; overflow: hidden; padding: 20px 16px } .section_booking_list .booking_list .desc_area .desc_box .box_top { min-height: 35px } .section_booking_list .booking_list .desc_area .desc_title { display: block; display: -webkit-box; overflow: hidden; max-height: 48px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size: 18px; color: #222225; color: var(--booking-color-gray10) } .section_booking_list .booking_list .desc_area .desc_txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 15px; line-height: 22px; font-weight: 500; color: #03c75a } .section_booking_list .booking_list .desc_area .desc_price { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0 4px; margin-top: 4px } .section_booking_list .booking_list .desc_area .desc_detail { display: block; display: -webkit-box; overflow: hidden; max-height: 38px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-top: 8px; font-size: 14px; line-height: 19px; color: #77777a; color: var(--booking-color-gray40) } .section_booking_list .booking_list .desc_area .desc_detail.type_text { margin: 8px 0 16px } .section_booking_list .booking_list .desc_area .desc_review { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-top: 4px; font-size: 14px; line-height: 19px; color: #939396; color: var(--booking-color-gray50) } .section_booking_list .booking_list .desc_area .desc_review .review_txt { display: inline-block; vertical-align: top } .section_booking_list .booking_list .desc_area .desc_review .review_txt.star { font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .section_booking_list .booking_list .desc_area .desc_review .review_txt.star::before { content: ""; width: 13px; height: 13px; background-position: -356px -398px; vertical-align: -1px; margin-right: 5px } .section_booking_list .booking_list .desc_area .desc_review .review_txt .dividing_dot { display: inline-block; width: 3px; height: 3px; border-radius: 50%; background-color: #c5c5c7; background-color: var(--booking-color-gray60); margin: 0 5px; vertical-align: 3px } .section_booking_list .booking_list .desc_area .box_bottom { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end } .section_booking_list .booking_list .desc_area .box_bottom .btn_book { width: 94px; border-radius: 8px; background-color: #03aa5a; font-size: 15px; line-height: 38px; font-weight: bold; text-align: center; color: #fff } .section_booking_list .booking_list .unexposed_area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1 } .section_booking_list .booking_list .unexposed_area::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; background-color: var(--booking-color-surface); opacity: .5 } .section_booking_list .booking_list .unexposed_area .text { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; font-size: 15px; line-height: 22px; color: #fc4c4e; color: var(--booking-color-emphasis); text-align: center } .section_booking_list .booking_list .unexposed_area .fn-info1 { margin-bottom: 4px; font-size: 19px } .section_event { padding: 26px 23px 28px; font-size: 15px } .section_event .event_date { color: #fc4c4e } .section_event .event_date .point { font-weight: 600 } .section_event .event_info { overflow: hidden; color: #444447; color: var(--booking-color-gray20); position: relative } .section_event .event_info .event_text { max-height: 72px; overflow: hidden; display: inline-block; vertical-align: top; line-height: 23px } .section_event .event_info .show_event_text { max-height: 100%; overflow: visible } .section_event .event_info .btn_more { width: 40px; text-align: right; position: absolute; bottom: 2px; right: 1px; vertical-align: top; background: -webkit-gradient(linear, left top, right top, from(rgba(255, 255, 255, 0)), color-stop(40%, #fff)); background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, #fff 40%); background: -webkit-gradient(linear, left top, right top, from(var(--booking-color-surface-rgb)), color-stop(40%, var(--booking-color-surface))); background: linear-gradient(to right, var(--booking-color-surface-rgb) 0%, var(--booking-color-surface) 40%) } .section_event .event_info .btn_more .ico_arrow_down { position: relative; display: inline-block; width: 11px; height: 15px; margin-left: 8px; vertical-align: 0 } .section_event .event_info .btn_more .ico_arrow_down:before { content: ""; position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-top: -2px; border-right: 1.5px solid var(--booking-color-gray10); border-bottom: 1.5px solid var(--booking-color-gray10) } .section_event .event_info .btn_more .txt { padding-left: 4px; color: #03c75a } .section_price_info { padding: 0 22px 40px } .section_price_info .price_area+.price_area { margin-top: 20px } .section_price_info .price_area .price_title { display: block; font-size: 16px; line-height: 20px; color: #222 } .section_price_info .price_area .price_list { padding-top: 5px } .section_price_info .price_area .price_list .price_item { overflow: hidden; position: relative; font-size: 16px; color: #242424 } .section_price_info .price_area .price_list .price_item::before { content: ""; position: absolute; top: 50%; width: 100%; border: 1px dashed #e2e2e2 } .section_price_info .price_area .price_list .item_title { overflow: hidden; display: block; white-space: nowrap } .section_price_info .price_area .price_list .item_title .title { overflow: hidden; position: relative; display: inline-block; white-space: nowrap; text-overflow: ellipsis; max-width: 100%; vertical-align: top; padding-right: 5px; background-color: #fff } .section_price_info .price_area .price_list .item_price { position: relative; float: right; padding-left: 7px; background-color: #fff; text-align: right; font-weight: 500 } .section_price_info .price_notice { margin-top: 30px; padding: 12px; border-radius: 8px; background-color: #fff7f5; font-size: 14px; line-height: 20px; color: #fc4c4e } .section_price_info .price_notice .text { position: relative; padding-left: 20px } .section_price_info .price_notice .text::before { content: ""; position: absolute; top: 2px; left: 0; width: 15px; height: 15px; background-position: -265px -281px } .popup_select { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; -webkit-box-shadow: 0 0 6px 4px rgba(0,0,0,.03); box-shadow: 0 0 6px 4px rgba(0,0,0,.03); z-index: 9999 } .popup_select.show .select_dimmed { opacity: 1 } .popup_select.show .select_area { -webkit-transform: translateY(0); transform: translateY(0) } .popup_select .select_dimmed { height: 100%; background-color: rgba(0,0,0,.6); opacity: 0; -webkit-transition: opacity .3s ease; transition: opacity .3s ease } .popup_select .select_area { overflow: hidden; position: fixed; left: 0; bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); width: 100%; border-top-left-radius: 16px; border-top-right-radius: 16px; padding-bottom: 81px; padding-bottom: calc(81px + constant(safe-area-inset-bottom)); padding-bottom: calc(81px + env(safe-area-inset-bottom)); background-color: #fff; background-color: var(--booking-color-surface); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease } .popup_select .select_area.calendar { top: 67px } .popup_select .select_area.calendar .calendar_content .calender_bar { display: block } .popup_select .select_area.calendar .calendar_content+.bottom_btns { border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .popup_select .select_area.time .calendar_content .calendar_body { height: calc(100vh - 67px - 81px - 15px - 108px) } .popup_select .select_area .bar { display: block; height: 15px; text-align: center } .popup_select .select_area .bar::before { content: ""; display: inline-block; vertical-align: top; margin-top: 6px; width: 36px; height: 3px; background-color: #d8d8d8 } .popup_select .select_area .bottom_btns { position: fixed; bottom: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90); padding: 15px 22px; background-color: #f7f7f9; background-color: var(--booking-color-gray95); z-index: 100 } .popup_select .select_area .bottom_btns .bottom_btns_inner { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 720px; margin: 0 auto } .popup_select .select_area .bottom_btns .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 12px 0; border-radius: 6px; font-size: 18px; font-weight: bold } .popup_select .select_area .bottom_btns .btn.cancel { margin-right: 3px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); color: #222225; color: var(--booking-color-gray10) } .popup_select .select_area .bottom_btns .btn.confirm { margin-left: 3px; background-image: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to right, #0ad18e, #01d760); color: #fff } .popup_select .select_area .bottom_btns .btn.confirm.inactivate { background-color: rgba(0,0,0,0); background-image: -webkit-gradient(linear, left top, right top, from(rgba(10, 209, 142, 0.1)), to(rgba(1, 215, 96, 0.1))); background-image: linear-gradient(to right, rgba(10, 209, 142, 0.1), rgba(1, 215, 96, 0.1)) } .popup_select .select_area .calendar_content { position: relative } .popup_select .select_area .calendar_content .calender_bar { display: none; height: 15px; text-align: center } .popup_select .select_area .calendar_content .calender_bar::before { content: ""; display: inline-block; vertical-align: top; margin-top: 6px; width: 36px; height: 3px; background-color: #d8d8d8 } .popup_select .select_area .calendar_content .calendar_top { position: relative; -webkit-display: flex; display: -webkit-box; display: -ms-flexbox; display: flex; height: 70px; background-image: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to right, #0ad18e, #01d760) } .popup_select .select_area .calendar_content .calendar_top::before { content: ""; width: 26px; height: 70px; background-position: -373px 0px; position: absolute; top: 0; left: 50%; margin-left: -13px } .popup_select .select_area .calendar_content .calendar_top>div { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 11px 27px; color: #fff } .popup_select .select_area .calendar_content .calendar_top>div .txt { font-size: 13px; opacity: .8 } .popup_select .select_area .calendar_content .calendar_top>div .date { font-size: 17px; font-weight: bold } .popup_select .select_area .calendar_content .calendar_top+.calendar_body { -webkit-box-sizing: border-box; box-sizing: border-box; height: calc(100vh - 218px); padding: 30px 10px } .popup_select .select_area .calendar_content .calendar_body { overflow: hidden; overflow-y: auto; max-width: 720px; margin: 0 auto; padding: 15px 10px 30px; -webkit-box-sizing: border-box; box-sizing: border-box; height: calc(100vh - 67px - 81px - 15px); -ms-overflow-style: none } .popup_select .select_area .calendar_content .calendar_body::-webkit-scrollbar { display: none } .popup_select .select_area .calendar_content .calendar_body .schedule_month+.schedule_month { margin-top: 32px } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_header { padding: 0 15px 15px } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_header .calendar-btn { display: none } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_header .calendar-title { font-size: 22px; font-weight: bold; color: #444447; color: var(--booking-color-gray20) } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table { table-layout: fixed; width: 100% } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table.type_pc .calendar-date:hover .num { color: #03c75a } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table.type_pc .calendar-date:hover .txt { color: #03c75a } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_header>tr { font-size: 14px; letter-spacing: -0.1px; color: #888 } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr { font-size: 16px; font-weight: 500; text-align: center; color: #444 } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr .calendar-sun .calendar-date .num,.popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr .calendar-sun .calendar-date .txt { color: #ff5243 } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr .calendar-date { display: block; height: 50px; margin-top: 10px } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr .calendar-date .num { display: block; padding-top: 7px; line-height: 19px; font-weight: 500; color: #444447; color: var(--booking-color-gray20) } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr .calendar-date .txt { display: block; font-size: 10px; line-height: 11px; color: #999 } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.start-day .calendar-date { position: relative; background-color: #03aa5a } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.start-day .calendar-date .num,.popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.start-day .calendar-date .txt { color: #fff } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.start-day .calendar-date .txt { font-weight: 400 } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.start-day .calendar-date::before { content: ""; position: absolute; top: 0; right: 0; width: 8px; height: 50px; background-color: #e2f7e7 } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.start-day .calendar-date::after { content: ""; position: absolute; top: 0; right: 0; width: 10px; height: 50px; background-position: -385px -122px } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.calendar-gap .calendar-date { background-color: rgba(3,199,90,.1) } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.calendar-gap .calendar-date .txt { color: #fff } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.end-day .calendar-date { position: relative; background-color: #03aa5a } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.end-day .calendar-date .num,.popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.end-day .calendar-date .txt { color: #fff } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.end-day .calendar-date .txt { font-weight: 400 } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.end-day .calendar-date::before { content: ""; position: absolute; top: 0; left: 0; width: 8px; height: 50px; background-color: #e2f7e7 } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.end-day .calendar-date::after { content: ""; position: absolute; top: 0; left: 0; width: 10px; height: 50px; background-position: -373px -122px } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.calendar-selected .calendar-date { -webkit-box-shadow: 0 2px 4px 0 rgba(3,199,90,.23); box-shadow: 0 2px 4px 0 rgba(3,199,90,.23); border-radius: 6px; background-image: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to right, #0ad18e, #01d760) } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.calendar-selected .calendar-date .num { color: #fff !important } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.calendar-selected .calendar-date .txt { color: #fff !important } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.calendar-dayoff .calendar-date .num,.popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.calendar-dayoff .calendar-date .txt { color: #ff5243 } .popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.calendar-unselectable .calendar-date .num,.popup_select .select_area .calendar_content .calendar_body .calendar .calendar_table .tb_body>tr>td.calendar-unselectable .calendar-date .txt { color: #e9e9ec; color: var(--booking-color-gray80) } .popup_select .select_area .calendar_content .calendar_bottom { position: fixed; width: 100%; bottom: 81px; background-color: #f7f7f9; background-color: var(--booking-color-gray95); z-index: 100 } .popup_select .select_area .calendar_content .calendar_bottom .bottom_notice { padding: 25px 0 5px; font-size: 14px; line-height: 1.36; text-align: center; color: #777 } .popup_select .select_area .calendar_content .calendar_bottom .bottom_notice .fn-booking-caution { margin-right: 3px; vertical-align: -1px } .popup_select .select_area .calendar_content .calendar_bottom .bottom_title { max-width: 720px; margin: 0 auto; padding: 26px 22px 18px; font-size: 13px; line-height: 17px; color: #ff5243 } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content { max-width: 720px; margin: 0 auto } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content.slick-slider .content_time_range .btn:hover { background-color: #03c75a } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range { -webkit-overflow-scrolling: touch; overflow: hidden; overflow-x: auto; padding: 31px 0 12px 0; -ms-overflow-style: none } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range::-webkit-scrollbar { display: none } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .slick-arrow { margin-top: 9px } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_list { white-space: nowrap } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item { display: inline-block; vertical-align: top } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.start_time .item_box .btn { background-color: #03c75a } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.start_time .item_box .btn::before { display: none } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.start_time .item_box .btn::after { content: ""; position: absolute; bottom: 0; left: 0; width: 1px; height: 40px; background-color: #03c75a; z-index: 20 } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.time_gap .btn { background-color: #03c75a } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.time_gap .btn::before { display: none } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.end_time .btn { background-color: #03c75a } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.end_time .btn::before { display: none } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.end_time .btn::after { content: ""; position: absolute; bottom: 0; right: -1px; width: 1px; height: 40px; background-color: #03c75a; z-index: 20 } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.off_time .time { color: #c5c5c7; color: var(--booking-color-gray60) } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.off_time .btn { background-image: linear-gradient(135deg, rgba(0, 0, 0, 0.06) 10%, #f8f7fd 10%, #f8f7fd 50%, rgba(0, 0, 0, 0.06) 50%, rgba(0, 0, 0, 0.06) 60%, #f8f7fd 60%, #f8f7fd 100%); background-size: 4px 4px } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item.off_time .btn::before { display: none } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item:first-child { margin-left: 22px } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item:last-child { margin-right: 22px } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item:last-child.end_time .btn::after { right: 0 } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .time_item:last-child .item_box::after { content: ""; position: absolute; top: -10px; right: 0; width: 1px; height: 50px; background-color: #cacad4; z-index: 10 } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .item_box { position: relative; border-bottom: 1px solid #cacad4 } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .item_box::before { content: ""; position: absolute; top: -10px; left: 0; width: 1px; height: 50px; background-color: rgba(0,0,0,.15); z-index: 10 } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .item_box .time { position: absolute; top: -36px; left: 0; font-size: 13px; color: #222225; color: var(--booking-color-gray10) } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .item_box .btn { position: relative; display: block; width: 92px; height: 40px; background-color: rgba(3,199,90,.1) } .popup_select .select_area .calendar_content .calendar_bottom .bottom_content .content_time_range .item_box .btn::before { content: ""; position: absolute; top: 0; left: 45px; width: 1px; height: 40px; background-color: rgba(0,0,0,.05) } .popup_select .select_area .people_content { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 720px; margin: 0 auto; padding: 25px 22px 25px } .popup_select .select_area .people_content .text_wrap { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .popup_select .select_area .people_content .text_people { font-size: 16px; font-weight: 600; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .popup_select .select_area .people_content .text_info { margin-top: 5px; font-size: 14px; line-height: 1.36; color: #777 } .popup_select .select_area .people_content .counter { width: 104px; height: 34px; border-radius: 4px; border: 1px solid; border-color: #f2fbf7; border-color: var(--booking-color-green99); text-align: center } .popup_select .select_area .people_content .counter.minus_disabled { border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .popup_select .select_area .people_content .counter.minus_disabled .minus::before { opacity: .15 } .popup_select .select_area .people_content .counter.plus_disabled .plus::before { opacity: .15 } .popup_select .select_area .people_content .counter.plus_disabled .plus.button::after { opacity: .15 } .popup_select .select_area .people_content .counter .button { display: inline-block; vertical-align: top; width: 34px; height: 34px; position: relative } .popup_select .select_area .people_content .counter .button::before { content: ""; display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 11px; height: 2px; margin: auto; background-color: #03aa5a } .popup_select .select_area .people_content .counter .button.plus::after { content: ""; display: inline-block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 11px; height: 2px; margin: auto; background-color: #03aa5a; -webkit-transform: rotate(90deg); transform: rotate(90deg) } .popup_select .select_area .people_content .counter .num { display: inline-block; width: 36px; height: 34px; font-size: 17px; font-weight: bold; line-height: 34px; vertical-align: top; color: #03c95b } .popup_summary { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; padding-top: 50px; -webkit-box-shadow: 0 0 6px 4px rgba(0,0,0,.03); box-shadow: 0 0 6px 4px rgba(0,0,0,.03); background-color: #f7f7f9; background-color: var(--booking-color-gray95); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); z-index: 9002 } .popup_summary.type_button { padding-top: 134px } .popup_summary.type_button.no_time { padding-top: 124px } .popup_summary.type_button.no_time .schedule_time { display: none } .popup_summary.type_button.filter { padding-top: 186px } .popup_summary.type_schedule { padding-top: 245px } .popup_summary .summary_top { position: absolute; top: 0; left: 0; right: 0 } .popup_summary .summary_body { overflow: hidden; overflow-y: auto; max-height: 100% } .popup_summary .summary_desc { max-width: 720px; margin: 0 auto; padding: 8px 22px 16px; font-size: 17px; font-weight: 700; color: #444447; color: var(--booking-color-gray20) } .popup_summary .summary_desc .point { color: #03aa5a } .popup_summary .booking_list { max-width: 720px; margin: 0 auto } .popup_summary .summary_header { position: relative; height: 48px; background-color: #fff; background-color: var(--booking-color-surface); z-index: 100 } .popup_summary .summary_header .link_back { position: absolute; top: 0; left: 0; padding: 14px 16px 10px 16px } .popup_summary .summary_header .link_back .fn-backward1 { color: #222225; color: var(--booking-color-gray10); font-size: 23px; vertical-align: top } .popup_summary .summary_header .link_back .fn-backward1::before { font-weight: bold } .popup_summary .summary_header .header_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; margin-left: 53px; padding: 12px 53px 12px 0; text-align: center } .popup_summary .summary_header .header_title .title { font-size: 18px; color: #222225; color: var(--booking-color-gray10) } .popup_summary .summary_schedule { position: relative; z-index: 10; margin-bottom: 10px; padding-top: 51px; background-color: #fff; background-color: var(--booking-color-surface) } .popup_summary .summary_schedule .calendar_week { background-color: #fff; background-color: var(--booking-color-surface) } @media screen and (min-width: 720px) { .popup_summary .summary_schedule .calendar_week { max-width:720px; margin: 0 auto } } .popup_summary .summary_schedule .calendar_week.slick-slider .month_btn:hover .month_num { color: #03aa5a } .popup_summary .summary_schedule .calendar_week.slick-slider .month_btn:hover .month_num::after { border-top-color: #03aa5a } .popup_summary .summary_schedule .calendar_week.slick-slider .day_btn:hover .day_txt { color: #03aa5a } .popup_summary .summary_schedule .calendar_week.slick-slider .day_btn:hover .day_num { color: #03aa5a } .popup_summary .summary_schedule .calendar_week .week_scroll { margin: 0; padding: 10px 0 } .popup_summary .summary_schedule .calendar_week .week_item.on .day_btn { background-color: #03aa5a } .popup_summary .summary_schedule .calendar_week .week_item.on .day_btn .day_txt { font-weight: bold } .popup_summary .summary_schedule .calendar_week .week_item.today .day_txt::before { content: ""; position: absolute; top: 3px; left: 50%; width: 3px; height: 3px; background: #ff5658; border-radius: 50% } .popup_summary .summary_schedule .calendar_week .week_item.today .day_num::before { content: none } .popup_summary .summary_schedule .calendar_week .month_btn.fixed { left: 19px } .popup_summary .summary_schedule .calendar_week .day_txt { display: block; position: relative; font-size: 15px; line-height: 16px; font-weight: normal } .popup_summary .summary_schedule .calendar_week .day_num { padding-top: 3px; font-size: 13px } .popup_summary .summary_schedule .schedule_time { max-width: 720px; margin: 0 auto; padding-bottom: 15px } .popup_summary .summary_schedule .schedule_time .time_ampm { margin: 2px 16px 0; padding-top: 12px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90); text-align: center } .popup_summary .summary_schedule .schedule_time .time_ampm .btn_ampm { padding: 0 5px; font-size: 14px; line-height: 20px; color: #222225; color: var(--booking-color-gray10) } .popup_summary .summary_schedule .schedule_time .time_ampm .btn_ampm.active { font-weight: bold; color: #03aa5a } .popup_summary .summary_schedule .schedule_time .time_ampm .btn_ampm.disabled { color: #939396; color: var(--booking-color-gray50) } .popup_summary .summary_schedule .schedule_time .time_ampm .btn_ampm+.btn_ampm { padding-left: 0 } .popup_summary .summary_schedule .schedule_time .time_ampm .btn_ampm+.btn_ampm::before { content: ""; display: inline-block; vertical-align: 3px; width: 3px; height: 3px; margin-right: 5px; border-radius: 50%; background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .popup_summary .summary_schedule .schedule_time .beauty_time_scroll_wrapper { position: absolute; height: 52px; width: 100% } .popup_summary .summary_schedule .schedule_time .time_scroll { position: relative; margin-top: 5px; overflow: hidden; -webkit-overflow-scrolling: touch; overflow: hidden; overflow-x: auto; -ms-overflow-style: none } .popup_summary .summary_schedule .schedule_time .time_scroll::-webkit-scrollbar { display: none } .popup_summary .summary_schedule .schedule_time .time_list { white-space: nowrap } .popup_summary .summary_schedule .schedule_time .time_item { position: relative; display: inline-block; vertical-align: top } .popup_summary .summary_schedule .schedule_time .time_item.selected .btn { border-color: #03aa5a; background-color: #03aa5a; font-weight: bold; color: #fff } .popup_summary .summary_schedule .schedule_time .time_item+.time_item { margin-left: 8px } .popup_summary .summary_schedule .schedule_time .time_item:first-child { margin-left: 20px } .popup_summary .summary_schedule .schedule_time .time_item:last-child { margin-right: 20px } .popup_summary .summary_schedule .schedule_time .time_item .btn { display: block; position: relative; width: 61px; padding: 10px 0 12px; border-radius: 8px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); font-size: 14px; line-height: 18px; font-weight: 500; text-align: center; color: #555558; color: var(--booking-color-gray30) } @media screen and (min-width: 720px) { .popup_summary .summary_schedule .schedule_time .time_item:first-child { margin-left:0 } .popup_summary .summary_schedule .schedule_time .time_item:last-child { margin-right: 0 } } .popup_summary .summary_select { padding: 66px 20px 12px } .popup_summary .summary_select .booking_select { max-width: 720px; margin: 0 auto } .popup_summary .summary_select .booking_select .select_box:first-child { -webkit-box-flex: 1; -ms-flex: 1 0 auto; flex: 1 0 auto } .popup_summary .summary_select .booking_select .select_box+.select_box { min-width: 65% } .popup_summary .summary_no_result { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; height: 100% } .popup_summary .summary_no_result .result_box { text-align: center; line-height: 1.47 } .popup_summary .summary_no_result .result_box .fn-booking-caution { vertical-align: top; font-size: 52px; color: #d9d9dc; color: var(--booking-color-gray70) } .popup_summary .summary_no_result .result_box .result_txt { margin-top: 15px } .popup_summary .summary_no_result .result_box .txt1 { font-size: 17px; font-weight: bold; color: #444447; color: var(--booking-color-gray20) } .popup_summary .summary_no_result .result_box .txt2 { font-size: 15px; line-height: 1.47; color: #777 } .confirm_smart_around { background-color: #fff; background-color: var(--booking-color-surface) } .confirm_smart_around.single { z-index: 4000; position: fixed; left: 0; bottom: 0; width: 100%; border-top: 1px solid rgba(0,0,0,.05); padding-bottom: calc(constant(safe-area-inset-bottom)); padding-bottom: calc(env(safe-area-inset-bottom)) } .confirm_smart_around.single .place_contents { padding: 22px 18px 18px 18px } .confirm_smart_around .place_category .category_list { overflow: hidden; overflow-x: auto; white-space: nowrap; padding-bottom: 15px } .confirm_smart_around .place_category .category_item { display: inline-block; vertical-align: top } .confirm_smart_around .place_category .category_item .item_link { display: block; padding: 0 15px; line-height: 30px; color: #222225; color: var(--booking-color-gray10) } .confirm_smart_around .place_category .category_item .item_link.active { border-radius: 18px; background-color: #00c73c; font-weight: bold; color: #fff } .confirm_smart_around .place_category .category_item .item_link .fn-booking { margin-right: 4px; font-size: 15px; vertical-align: -2px } .confirm_smart_around .place_contents+.place_contents { margin-top: 18px; padding-top: 21px; border-top: 1px solid #ecf0f2 } .confirm_smart_around .place_contents .place_item { font-size: 15px; line-height: 1.5; color: #444447; color: var(--booking-color-gray20) } .confirm_smart_around .place_contents .place_item+.place_item { margin-top: 18px; padding-top: 21px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .confirm_smart_around .place_contents .item_photo { margin-bottom: 13px } .confirm_smart_around .place_contents .item_photo .photo_list { display: -webkit-box; display: -ms-flexbox; display: flex } .confirm_smart_around .place_contents .item_photo .photo_item { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .confirm_smart_around .place_contents .item_photo .photo_item:last-child .photo_link { margin-right: 0 } .confirm_smart_around .place_contents .item_photo .photo_link { position: relative; display: block; margin-right: 2px; font-size: 0; line-height: 0 } .confirm_smart_around .place_contents .item_photo .photo_link .photo { -o-object-fit: cover; object-fit: cover } .confirm_smart_around .place_contents .item_photo .photo_link::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0,0,0,.03) } .confirm_smart_around .place_contents .item_photo .photo_link .photo_view_more { position: absolute; right: 0; bottom: 0; width: 27px; height: 27px; background-color: rgba(0,0,0,.5) } .confirm_smart_around .place_contents .item_photo .photo_link .photo_view_more .fn-image3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 14px; text-align: center; color: #fff } .confirm_smart_around .place_contents .item_info:before,.confirm_smart_around .place_contents .item_info:after { content: " "; display: table } .confirm_smart_around .place_contents .item_info:after { clear: both } .confirm_smart_around .place_contents .item_info .info_thumb { float: right; width: 110px } .confirm_smart_around .place_contents .item_info .info_thumb .thumb_box { float: right; position: relative; width: 87px; height: 87px } .confirm_smart_around .place_contents .item_info .info_thumb .thumb_box::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid rgba(0,0,0,.03) } .confirm_smart_around .place_contents .item_info .info_thumb .thumb_box .photo_view_more { position: absolute; right: 0; bottom: 0; width: 27px; height: 27px; background-color: rgba(0,0,0,.5) } .confirm_smart_around .place_contents .item_info .info_thumb .thumb_box .photo_view_more .fn-image3 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 14px; text-align: center; color: #fff } .confirm_smart_around .place_contents .item_title { display: block; display: -webkit-box; overflow: hidden; max-height: 48px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size: 18px; font-weight: 500; line-height: 1.28; color: #0068c3 } .confirm_smart_around .place_contents .item_title .ico_npay_plus { width: 45px; height: 16px; background-position: -155px -375px; margin-left: 5px; vertical-align: -2px } .confirm_smart_around .place_contents .item_title .ico_smartorder { width: 36px; height: 16px; background-position: -318px -375px; margin-left: 5px; vertical-align: -2px } .confirm_smart_around .place_contents .item_title .ico_booking { width: 37px; height: 16px; background-position: -202px -375px; margin-left: 5px; vertical-align: -1px } .confirm_smart_around .place_contents .item_title .ico_talktalk { width: 37px; height: 16px; background-position: -241px -375px; margin-left: 5px; vertical-align: -1px } .confirm_smart_around .place_contents .item_title .sub_title { margin-left: 6px; font-size: 14px; font-weight: normal; line-height: 1.64; letter-spacing: -0.23px; color: #444447; color: var(--booking-color-gray20) } .confirm_smart_around .place_contents .item_text { position: relative; font-weight: 500 } .confirm_smart_around .place_contents .item_text .text .fn-booking-down1 { margin-left: 5px; vertical-align: -2px } .confirm_smart_around .place_contents .item_text .text+.text::before { content: ""; display: inline-block; vertical-align: -1px; width: 1px; height: 13px; margin: 0 6px; background-color: #e9e9ec; background-color: var(--booking-color-gray80) } .confirm_smart_around .place_contents .item_text .text.num { color: #fc4c4e } .confirm_smart_around .place_contents .item_text .text.open .fn-booking-down1 { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .confirm_smart_around .place_contents .item_text .text_address { z-index: 100; position: absolute; top: 105%; left: 0; right: 0; padding: 10px 12px; border-radius: 2px; border: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90); background-color: #fff; background-color: var(--booking-color-surface); -webkit-box-shadow: 0 2px 1px 0 rgba(0,0,0,.03); box-shadow: 0 2px 1px 0 rgba(0,0,0,.03) } .confirm_smart_around .place_contents .item_text .text_address .address_item { line-height: 1.5; color: #444447; color: var(--booking-color-gray20) } .confirm_smart_around .place_contents .item_text .text_address .address_item+.address_item { margin-top: 4px } .confirm_smart_around .place_contents .item_text .text_address .address_item .fn-copy3 { margin: 4px 0 0 3px; font-size: 14px; color: #03c75a } .confirm_smart_around .place_contents .item_text .text_address .item_point { display: inline-block; vertical-align: top; margin: 3px 6px 0 0; padding: 1px 2px; border-radius: 1px; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 11px; line-height: 1.2; font-weight: 500; color: #98989c } .confirm_smart_around .place_contents .item_time { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; margin-top: 4px } .confirm_smart_around .place_contents .item_desc .desc+.desc::before { content: ""; display: inline-block; vertical-align: -1px; width: 1px; height: 12px; margin: 0 6px; background-color: #e9e9ec; background-color: var(--booking-color-gray80) } .confirm_smart_around .place_contents .item_desc .desc>em { font-weight: bold } .confirm_smart_around .place_contents .item_tag { margin-top: 4px } .confirm_smart_around .place_contents .item_tag .tag { z-index: 0; position: relative; display: inline-block; vertical-align: top; margin-right: 6px; color: #444447; color: var(--booking-color-gray20) } .confirm_smart_around .place_contents .item_tag .tag::before { content: ""; z-index: -1; position: absolute; left: 0; right: 0; bottom: 0; height: 10px; background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .confirm_smart_around .place_contents .item_icon { margin-top: 12px } .confirm_smart_around .place_contents .item_icon .icon_wrap { overflow: hidden; overflow-x: auto; white-space: nowrap } .confirm_smart_around .place_contents .item_icon .icon { display: inline-block; vertical-align: top; padding: 6px 10px 6px 6px; border-radius: 18px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); font-size: 15px; color: #444447; color: var(--booking-color-gray20) } .confirm_smart_around .place_contents .item_icon .icon+.icon { margin-left: 6px } .confirm_smart_around .place_contents .item_icon .icon_point { position: relative; display: inline-block; vertical-align: top; width: 24px; height: 24px; margin-right: 4px; border-radius: 50%; background-color: #f0fbf5 } .confirm_smart_around .place_contents .item_icon .icon_point .fn { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; color: #04c75b; text-align: center } .confirm_smart_around .place_more { display: block; margin-top: 18px; padding-top: 15px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); line-height: 1.25; text-align: center; color: #444447; color: var(--booking-color-gray20) } .confirm_smart_around .place_more .fn-forward1 { margin: 0 0 0 11px } .smart_around_layer { overflow: hidden; z-index: 9999; position: fixed; top: 0; left: 0; bottom: 0; width: 100%; background-color: #fff; background-color: var(--booking-color-surface); padding-bottom: calc(constant(safe-area-inset-bottom)); padding-bottom: calc(env(safe-area-inset-bottom)) } .smart_around_layer .smart_aroud_top { z-index: 1000; overflow: hidden; position: fixed; top: 0; left: 0; width: 100% } .smart_around_layer .smart_around_header { display: -webkit-box; display: -ms-flexbox; display: flex; height: 46px; font-size: 20px; line-height: 46px; background-color: #03c75a } .smart_around_layer .smart_around_header .header_link { position: relative; width: 48px } .smart_around_layer .smart_around_header .header_link .fn-backward1 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; text-align: center; color: #fff } .smart_around_layer .smart_around_header .header_link .fn-backward1::before { font-weight: bold } .smart_around_layer .smart_around_header .header_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-right: 10px; letter-spacing: -0.33px; font-weight: bold; color: #fff } .smart_around_layer .smart_around_header .link_my { width: 60px; text-align: center; font-weight: 500; color: #fff } .smart_around_layer .smart_around_filter { background-color: #fff; background-color: var(--booking-color-surface) } .smart_around_layer .smart_around_filter .filter_list { overflow: hidden; overflow-x: auto; white-space: nowrap; padding: 9px 0; border-bottom: 1px solid rgba(0,0,0,.05) } .smart_around_layer .smart_around_filter .filter_item { display: inline-block; vertical-align: top } .smart_around_layer .smart_around_filter .filter_item:first-child { margin-left: 18px } .smart_around_layer .smart_around_filter .filter_item:last-child { margin-right: 18px } .smart_around_layer .smart_around_filter .filter_item .item_link { display: block; padding: 6px 12px; font-size: 15px; line-height: 1.2; color: #222225; color: var(--booking-color-gray10) } .smart_around_layer .smart_around_filter .filter_item .item_link.active { border-radius: 16px; background-color: #00c73c; font-weight: 600; color: #fff } .smart_around_layer .smart_around_filter .filter_item .item_link .fn-booking { margin-right: 4px; font-size: 15px; vertical-align: -2px } .smart_around_layer .smart_around_contents { position: relative; height: 100% } .smart_around_layer .smart_around_contents .smart_around_store { overflow: hidden; overflow-y: auto; -webkit-overflow-scrolling: auto; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; -ms-overflow-style: none; scrollbar-width: none } .smart_around_layer .smart_around_contents .smart_around_store::-webkit-scrollbar { display: none } .smart_around_layer .smart_around_contents .smart_around_store .store_area { z-index: 100; position: relative; padding: 18px; border-top: 1px solid rgba(0,0,0,.05); background-color: #fff; background-color: var(--booking-color-surface) } .smart_around_layer .smart_around_contents .smart_around_map { overflow: hidden; position: fixed; top: 95px; left: 0; bottom: 0; width: 100%; background-color: #fff } .smart_around_layer .smart_around_contents .smart_around_map .map_wrap { -webkit-transition: -webkit-transform .3s cubic-bezier(0.22, 0.61, 0.36, 1) .1s; transition: -webkit-transform .3s cubic-bezier(0.22, 0.61, 0.36, 1) .1s; transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1) .1s; transition: transform .3s cubic-bezier(0.22, 0.61, 0.36, 1) .1s, -webkit-transform .3s cubic-bezier(0.22, 0.61, 0.36, 1) .1s } .smart_around_layer .smart_around_contents .smart_around_map .map_area { position: relative } .smart_around_layer .smart_around_contents .smart_around_map .map_area a[class^=btn_] { overflow: hidden; display: block; position: absolute; width: 40px; height: 40px; border: 1px solid rgba(0,0,0,.15); border-radius: 3px; background-color: rgba(255,255,255,.95); -webkit-box-sizing: border-box; box-sizing: border-box; color: rgba(0,0,0,0); text-align: center } .smart_around_layer .smart_around_contents .smart_around_map .map_area a[class^=btn_] .fn,.smart_around_layer .smart_around_contents .smart_around_map .map_area a[class^=btn_] .fn-booking { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 20px; color: #545454 } .smart_around_layer .smart_around_contents .smart_around_map .map_area .btn_location { z-index: 9000; bottom: 20px; left: 12px } .smart_around_layer .smart_around_contents .smart_around_map .map_area .btn_location.active { background-color: #03c75a } .smart_around_layer .smart_around_contents .smart_around_map .map_area .btn_location.active .fn-presentlocation { color: #fff } .smart_around_layer .smart_around_contents .smart_around_map .map_area .map_button { z-index: 9000; position: absolute; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; right: 12px; bottom: 20px } .smart_around_layer .smart_around_contents .smart_around_map .map_area .map_button .btn_zoom { position: relative; border-top-right-radius: 2px; border-top-left-radius: 2px; border-bottom-right-radius: 0; border-bottom-left-radius: 0 } .smart_around_layer .smart_around_contents .smart_around_map .map_area .map_button .btn_zoom+.btn_zoom { margin-top: -1px; border-top-color: #cdd0d9; border-top-right-radius: 0; border-top-left-radius: 0; border-bottom-right-radius: 2px; border-bottom-left-radius: 2px } .smart_around_layer .smart_around_contents .combined-shape { position: relative; line-height: 0; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: -webkit-transform .2s cubic-bezier(0.22, 0.61, 0.36, 1); transition: -webkit-transform .2s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .2s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .2s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform .2s cubic-bezier(0.22, 0.61, 0.36, 1); -webkit-transform-origin: 18px 100%; transform-origin: 18px 100% } .smart_around_layer .smart_around_contents .combined-shape .marker-box { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: relative; z-index: 10; padding: 4px; border: 1px solid #0475f4; border-radius: 19px; background-color: #fff; -webkit-box-shadow: 0 3px 10px 0 rgba(0,0,0,.08),0 0 1px 0 rgba(0,0,0,.17); box-shadow: 0 3px 10px 0 rgba(0,0,0,.08),0 0 1px 0 rgba(0,0,0,.17) } .smart_around_layer .smart_around_contents .combined-shape .marker-triangle { display: inline-block; vertical-align: top; position: relative; left: 14px; width: 0; height: 0; margin-top: -2px; border-width: 8px 5px 0; border-style: solid; border-color: #0475f4 rgba(0,0,0,0) rgba(0,0,0,0) } .smart_around_layer .smart_around_contents .combined-shape .marker-triangle::before { content: ""; position: absolute; bottom: -2px; left: -5px; width: 10px; height: 3px; background-color: #000; -webkit-filter: blur(1px); filter: blur(1px); opacity: .1 } .smart_around_layer .smart_around_contents .combined-shape .marker-triangle::after { content: ""; z-index: 10; position: absolute; top: -9px; left: 50%; width: 0; height: 0; margin-left: -4px; border-width: 6px 4px 0; border-style: solid; border-color: #fff rgba(0,0,0,0) rgba(0,0,0,0) } .smart_around_layer .smart_around_contents .combined-shape.active { -webkit-transform: scale(1.17); transform: scale(1.17) } .smart_around_layer .smart_around_contents .combined-shape.active .marker-box { background-color: #0475f4; color: #fff } .smart_around_layer .smart_around_contents .combined-shape.active .marker-box .fn-pin4,.smart_around_layer .smart_around_contents .combined-shape.active .marker-box .fn-booking-mug { background-color: #fff; color: #0475f4 } .smart_around_layer .smart_around_contents .combined-shape.active .marker-box .fn-pin4::before,.smart_around_layer .smart_around_contents .combined-shape.active .marker-box .fn-booking-mug::before { font-size: 15px; vertical-align: -1px } .smart_around_layer .smart_around_contents .combined-shape.active .marker-triangle::after { border-color: #0475f4 rgba(0,0,0,0) rgba(0,0,0,0) } .smart_around_layer .smart_around_contents .combined-shape .marker-bubble { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; width: auto; white-space: nowrap; font-size: 13px; font-weight: 600; letter-spacing: -0.54px } .smart_around_layer .smart_around_contents .combined-shape .marker-bubble .fn-pin4,.smart_around_layer .smart_around_contents .combined-shape .marker-bubble .fn-booking-mug { width: 24px; height: 24px; border-radius: 50%; background-color: #0475f4; text-align: center; line-height: 28px; color: #fff } .smart_around_layer .smart_around_contents .combined-shape .marker-bubble .name { margin: 0 7px 0 5px; line-height: 1.6rem; color: #000 } .smart_around_layer .smart_around_contents .combined-reserve.active .reserve-marker { -webkit-transform: scale(1.2); transform: scale(1.2) } .smart_around_layer .smart_around_contents .combined-reserve.active .reserve-text { bottom: 56px } .smart_around_layer .smart_around_contents .combined-reserve .reserve-marker { position: relative; width: 28px; height: 40px; -webkit-transition: -webkit-transform .2s cubic-bezier(0.22, 0.61, 0.36, 1); transition: -webkit-transform .2s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .2s cubic-bezier(0.22, 0.61, 0.36, 1); transition: transform .2s cubic-bezier(0.22, 0.61, 0.36, 1), -webkit-transform .2s cubic-bezier(0.22, 0.61, 0.36, 1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100% } .smart_around_layer .smart_around_contents .combined-reserve .reserve-marker::before { content: ""; position: absolute; bottom: 0; left: 50%; width: 30px; height: 24px; background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADwAAAAwCAYAAABNPhkJAAAAAXNSR0IArs4c6QAABshJREFUaAXlmdmOHEUQRRn2VYAAsYNBbEI88P9fwhOLsBD7DgZsM8TJqtN9JybLs9gea0RI0ZF540Zk3Kru6h774L6LsfvrmAdXZ40ZD2p9OJAl/rvue4QDhslfdmd4ZYg7bQh4ePWHKnLGA+WYIhg4BYhTi6UgLwgYF0nR1sA/tXnAqQs2iPR5fPXHKjpYF9ZF5tCurcm4lRPfGOs4fDt3GJFPlD+5xrwTDJIX0wtQ8O5ikAdXWHLgaeS3cuJwTmXnEUzNs6vnwB7qgESEa8nNi0EerhfAGvasrVNcQcN6DfsT7SyC+Vy+UI5YmxO9mw7qYAysmytoWMezxrWCrOl7eGB41sifRh8m0+QK0uzl8ivlfE7ZazkEIjTXRDjdzCee3K08/J5zb8yex9YnCX6qKt4vf3qtpGkK6PuVdizkMHmRjhELSG7P53kn8Xrt2N9K8IvFeKdcTh7Q1+z10XjyYo2xCxen1FxitgTD5YgTZ/zM78QcAWvzevkbHay9hxC7iTlQ5h2wY+573j1xZs7Rc+JbdVPBr1aXN8stMtJ8a22OfAoXJ2JZz94BWXeTayTv2niWs0Z/364exlP43XIbgducNeaQcjJvbmHuX7dwa7fy+w7LHJ4pTj3e65NnftSkYB5QH5X7FM5mkNljxr7OvbVyjXAw9xkdUmxh7i8+eM/J6VEu0b6Do2BEflz+SCN45Y4VFi8x1mnWeZj5xLOeWvYdS5y1/Vhr9rRenJi5gSv4ldrxXYtRqLm2EFws14l1nJyDyjPC7WaO6Do5HXPvGTPubn4Ff1isR1emDXqhRUbyubbOaJ6YGHuM2rOYZxl7rWcYMw82zkMwPxk/WLOSe1zTY/BdcYHyyDvIaLwWkE/OCu+45jtnhssheoY8+ub5yfVM4gGC+YGBp9kwMZvYOHOszRvNy0881/A8L3Hr7JO5XPc8OfuZIw4cwVfK/elYy92VgqCDa2CYcdktrx5kzijHvRG8C7sVN+u21tkPTvIOEfx2OX8UmDAWNCwbdKxz2eMKl2+0V+btYZRrtMZ9RmuIuZYDlmfdRPB75f6ZaJEFxmwI1hvJIzrgrNcM26qRuxU9k7yi5JLLtfvrCOYJ3X9sQMAc3vUA1xca2tRIinXWZY68Bm7O88mJGeXPRJlLbq5zDv4mv4FgntCQ8N40i10biz7MvRHQNdGeg7y+mHegzpnVgVmXvVzPcvYh/l1+yFv5ejlfTRiJJA1wfWEo7gRXSh5rhxUr6IiJw+2W/XqOupl5kcj3ntZkjjPQeJNm3GF+YfHQwizIpktmn4ODz4Rab43RGvc99vzsfGvkyhEnZs49F+UPNhiCny9/hk0YhbOGYsSZmadec22Ne/NEzxPrnL73HPk9ykfsb+WePQTzV1L/4UEDh7BYjIjN8KzJvPzEXGd0PQ5YXxJzbVSI+6zjLfxr+ZG3PXeY39Cvlc+KZlhRd1zyuAd75d0nlzWWuQXZv1q/R5aVeK/N83PWa1WG2M4fdxgi/3ZlMgsLPoJnziHgaOaJun2TkzxxovjWOvNZ55qzEPq7QI88pflA04inGQW8BbKxODncXOKs860jz0hNz1tjv6IMs8YoTgTLOnqKcVd/LB9P44pT4y1NwVvl/McX5gDGBd2/zvCOuSfinJGWeXD3rq1L3BwxDYE/lP9S3s9J3lgjGOMfAHh4Yf2QBV2akaNpclz3SJ0DmANLs5c8c32f9db8U+Sfy78v53v2VOZvaN7zL5X7NjXS3LeiWL6l8hC45jKCOyR8ht/qSR7zrDyfOoTxGeVuIvjMpmC+q2iYwzgkWBq4ghJ3SHPW2UfcfdaKUcPaz6bzcCcR+Wf5bVkX7ME07QI8aAs3Tw/FpWjyiXuXE6cWIyLwp/IjPxxqf1uWgh2mN0wBPTerEVOskdrsBY4rnDUieQBxR8VreedMwXw15TCc4DAI6DnyYHAUCKZZw9BwMGP2Ys3z47tyhN4ov6umYA7mrcM/9ShAQQ7Q94oCtwauF8q1+6xX5LdF4s+2CzMFcyBD+G9bKcBhxBSQeIpOYdYQ+WHw9eq7v15sclExBeeTOofOWRSA6C4cHhhmjq8RRH5VzueTvvfUUjDfbwhiKNx1f3gk7gUo+jD2KZIfBb1+Yd6j1y7YO6QQ9mI5Yl4Q8ux58HxZzh296w+fOuNcloJ5y6U476TiOYA8d8wcdxCRV8sv9OFT553LUjAPFe5MYjb1QnAneet/sfo9e/g42FljF8eD67ny/Nwhkovxefln5fz6ubTWBXP3EMwd5cc5Aj8t/6Yc4ZfeuuBPStFf5VdXzzt96cX+LwX8B4MF2iWFEPc3AAAAAElFTkSuQmCC) no-repeat 50% 0; background-size: 30px 24px; -webkit-transform: translateX(-2px); transform: translateX(-2px) } .smart_around_layer .smart_around_contents .combined-reserve .reserve-marker .marker-svg { position: absolute; bottom: 0 } .smart_around_layer .smart_around_contents .combined-reserve .reserve-marker .fn-booking-hotel { position: absolute; top: 7px; left: 50%; width: 16px; height: 16px; -webkit-transform: translateX(-50%); transform: translateX(-50%); color: #fff } .smart_around_layer .smart_around_contents .combined-reserve .reserve-marker .icon_body { fill: #9264c2 } .smart_around_layer .smart_around_contents .combined-reserve .reserve-text { position: absolute; bottom: 47px; left: 50%; width: 125px; text-align: center; -webkit-transition: all .2s cubic-bezier(0.22, 0.61, 0.36, 1); transition: all .2s cubic-bezier(0.22, 0.61, 0.36, 1); -webkit-transform: translateX(-50%) scale(1); transform: translateX(-50%) scale(1); -webkit-transform-origin: 50% 100%; transform-origin: 50% 100% } .smart_around_layer .smart_around_contents .combined-reserve .reserve-text .text { display: inline-block; vertical-align: top; position: relative; padding: 5px 7px; border-radius: 4px; border: 1px solid rgba(0,0,0,.15); background-color: #fff; background-clip: padding-box; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 14px; line-height: 18px; color: #000 } .smart_around_layer .smart_around_contents .combined-reserve .reserve-text .text::after { content: ""; display: block; position: absolute; bottom: -4.5px; left: 50%; width: 7px; height: 7px; border: 1px solid; border-color: rgba(0,0,0,0) rgba(0,0,0,.15) rgba(0,0,0,.15) rgba(0,0,0,0); background-color: #fff; background-clip: padding-box; -webkit-transform: translateX(-50%) rotate(45deg); transform: translateX(-50%) rotate(45deg) } .smart_around_layer .smart_around_contents .pin { position: relative; z-index: 10; vertical-align: top } .smart_around_layer .smart_around_contents .pin_my_location { display: block; -webkit-transform: scale(1); transform: scale(1); -webkit-transform-origin: 50% 50%; transform-origin: 50% 50% } .smart_around_layer .smart_around_contents .pin_my_location::after { content: ""; display: block; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #fff; border-radius: 50%; background: #2e91ff; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-animation: loader 1.5s infinite ease-in-out; animation: loader 1.5s infinite ease-in-out } .smart_around_layer .smart_around_contents .range { display: block; width: 24px; height: 24px; border: 1px solid rgba(26,133,255,.25); border-radius: 50%; background: rgba(89,167,255,.25); -webkit-box-shadow: 0 0 5px rgba(0,0,0,.4); box-shadow: 0 0 5px rgba(0,0,0,.4) } @-webkit-keyframes loader { 0% { -webkit-transform: scale(0.7); transform: scale(0.7) } 50% { -webkit-transform: scale(1); transform: scale(1) } 100% { -webkit-transform: scale(0.7); transform: scale(0.7) } } @keyframes loader { 0% { -webkit-transform: scale(0.7); transform: scale(0.7) } 50% { -webkit-transform: scale(1); transform: scale(1) } 100% { -webkit-transform: scale(0.7); transform: scale(0.7) } } .smart_around_layer .smart_around_map_btn { z-index: 1000; position: fixed; bottom: 18px; left: 50%; display: block; padding: 10px 25px 9px; border-radius: 19px; background-color: #03c75a; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-transform: translate(-50%, 180%); transform: translate(-50%, 180%); opacity: 0; font-size: 15px; line-height: 1.3; text-align: center; color: #fff; -webkit-transition: opacity .3s ease,-webkit-transform .3s ease; transition: opacity .3s ease,-webkit-transform .3s ease; transition: transform .3s ease,opacity .3s ease; transition: transform .3s ease,opacity .3s ease,-webkit-transform .3s ease } .smart_around_layer .smart_around_map_btn.show { -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); opacity: 1 } .smart_around_layer .smart_around_map_btn .fn-pin4 { margin-right: 3px; vertical-align: -1px; color: #fff } .smart_around_layer .smart_around_list_btn { position: fixed; left: 50%; bottom: 20px; -webkit-transform: translateX(-50%); transform: translateX(-50%); padding: 0 16px; border: 1px solid rgba(112,115,126,.6); border-radius: 30px; background-color: rgba(255,255,255,.93); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 15px; line-height: 32px; font-weight: 600; color: #626a85; text-align: center } .smart_around_layer .smart_around_list_btn .fn-drawer { margin-right: 6px; vertical-align: -1px; color: #03c75a } .home_calendar_modal { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; z-index: 9999 } .home_calendar_modal.show .dimmed { opacity: 1 } .home_calendar_modal.show .modal_layout { -webkit-transform: translateY(0); transform: translateY(0) } .home_calendar_modal.accommodation .modal_body { padding: 16px 8px 12px 8px; background-color: #f0f0f3; background-color: var(--booking-color-background); overflow: hidden } .home_calendar_modal.accommodation .modal_box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 8px; background-color: #fff; background-color: var(--booking-color-surface) } .home_calendar_modal.accommodation .modal_box+.modal_box { margin-top: 12px } .home_calendar_modal.accommodation .modal_box.fold .btn_fold .fn-booking-up1 { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .home_calendar_modal.accommodation .modal_box.step1 { height: 100% } .home_calendar_modal.accommodation .title_area { padding: 16px; font-size: 17px; font-weight: 600; line-height: 23px; color: #222225; color: var(--booking-color-gray10) } .home_calendar_modal.accommodation .title_area .ico_dot { display: inline-block; vertical-align: middle; width: 3px; height: 3px; margin: 0 5px; border-radius: 50%; background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .home_calendar_modal.accommodation .week_area { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 12px; border-bottom: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .home_calendar_modal.accommodation .week_area .day { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 2px 0 11px; font-size: 15px; line-height: 20px; color: #555558; color: var(--booking-color-gray30); text-align: center } .home_calendar_modal.accommodation .calendar_area { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto } .home_calendar_modal.accommodation .btn_area { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; padding: 12px 0; margin: 0 16px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .home_calendar_modal.accommodation .btn_area .btn_cancel { padding: 12px 0; font-size: 15px; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .home_calendar_modal.accommodation .btn_area .btn_next { width: 98px; height: 44px; border-radius: 8px; background: #03aa5a; font-size: 15px; line-height: 20px; color: #fff } .home_calendar_modal.accommodation .count_area { padding: 3px 16px 24px } .home_calendar_modal.accommodation .count_area .biz_item_count .count_info .info_tit { font-size: 16px } .home_calendar_modal.accommodation .btn_fold { position: absolute; top: 0; right: 0; padding: 15px 18px; font-size: 14px; color: #555558; color: var(--booking-color-gray30) } .home_calendar_modal .dimmed { opacity: 0; -webkit-transition: opacity .3s ease; transition: opacity .3s ease } .home_calendar_modal .modal_layout { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; overflow: hidden; position: fixed; left: 0; bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); width: 100%; height: calc(100% - 44px); border-radius: 24px 24px 0 0; background-color: #fff; background-color: var(--booking-color-surface); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; z-index: 10000 } .home_calendar_modal .modal_header { position: relative; padding: 20px 50px 16px 16px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 18px; font-weight: 600; letter-spacing: -0.3px; color: #222225; color: var(--booking-color-gray10) } .home_calendar_modal .modal_header .btn_close { position: absolute; right: 0; bottom: 3px; width: 50px; height: 50px } .home_calendar_modal .modal_header .btn_close .ico_close { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 18px; height: 18px; fill: #77777a; fill: var(--booking-color-gray40) } .home_calendar_modal .modal_body { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; overflow-y: auto } .home_calendar_modal .modal_body .calendar_area { padding: 20px 12px 16px } .home_calendar_modal .modal_body .time_area { padding: 20px 16px 40px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .home_calendar_modal .modal_body .legend_area { padding: 16px 16px 20px } .home_calendar_modal .modal_body .alert_area { padding: 20px 20px 85px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .home_calendar_modal .modal_body .alert_area .alert_box { padding: 20px; border-radius: 12px; background-color: #f0f0f3; background-color: var(--booking-color-gray90); font-size: 14px; line-height: 19px; color: #555558; color: var(--booking-color-gray30); text-align: center } .home_calendar_modal .modal_footer { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 12px 20px; -webkit-box-shadow: 0px -2px 5px 0px rgba(0,0,0,.05); box-shadow: 0px -2px 5px 0px rgba(0,0,0,.05) } .home_calendar_modal .modal_footer .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 44px; border-radius: 8px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 15px; line-height: 20px; letter-spacing: -0.3px; color: #444447; color: var(--booking-color-gray20) } .home_calendar_modal .modal_footer .btn+.btn { margin-left: 8px } .home_calendar_modal .modal_footer .btn.type_green { border-color: #03aa5a; background-color: #03aa5a; color: #fff } .home_calendar_modal .modal_footer .btn.disabled { border-color: #c5c5c7; border-color: var(--booking-color-gray60); background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .section_green { margin: 0 19px; padding: 28px 0 14px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } @media screen and (min-width: 720px) { .section_green { max-width:682px; margin: 0 auto } } .section_green .green_desc { font-size: 15px; color: #444447; color: var(--booking-color-gray20); line-height: 1.2; word-break: keep-all } .section_green .green_desc+.green_desc { margin-top: 8px } .section_green .green_desc .desc_left { position: relative; float: left; width: 80px; height: 18px } .section_green .green_desc .desc_right { overflow: hidden } .section_green .green_desc .ico_green_pass { position: absolute; top: 3px; left: 0; width: 72px; height: 15px; background-position: -231px -358px } .section_green .green_desc .ico_green_ticket { position: absolute; top: 3px; left: 0; width: 67px; height: 15px; background-position: -305px -358px } .section_required { margin: 24px 0 } .section_required .alert_area { padding: 12px 0 } .section_required .required_area { padding: 15px 0 } .section_required .required_area:before,.section_required .required_area:after { content: " "; display: table } .section_required .required_area:after { clear: both } .section_required .required_area+.required_area { border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80) } .section_required .required_area.soldout { opacity: .4 } .section_required .required_area.soldout .checkmark { background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid; border-color: #c5c5c7; border-color: var(--booking-color-gray60) } .section_required .required_area.soldout .checkmark::after { display: none } .section_required .info_area { position: relative; overflow: hidden; padding-left: 30px } .section_required .info_area .checkmark { position: absolute; top: 0; left: 0; width: 24px; height: 24px; background-color: #3787ff; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box } .section_required .info_area .checkmark::after { content: ""; display: block; position: absolute; top: 4px; left: 8px; width: 6px; height: 10px; border: 1px solid; border-color: #fff; border-color: var(--booking-color-gray100); border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .section_required .info_area .title { display: block; min-height: 24px; font-size: 18px; font-weight: bold; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .section_required .info_area .title .ico_soldout { vertical-align: 2px; margin-right: 4px; padding: 4px 8px; border-radius: 6px; background-color: #000; font-size: 11px; line-height: 13px; letter-spacing: -0.4px; color: #fff; font-style: normal } .section_required .info_area .desc { padding-top: 3px; font-size: 16px; line-height: 1.4; color: #444447; color: var(--booking-color-gray20) } .section_required .info_area .desc:empty { display: none } .section_required .info_area .price { padding-top: 3px; font-size: 16px; font-weight: bold; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .section_required .info_area .price .sale { font-weight: normal; color: #999 } .section_required .info_area .price .sale .percent { color: #ff5658 } .section_required .info_area .info { display: block; padding-top: 4px; font-size: 15px; line-height: 1.4; color: #999 } .section_required .info_area .info:empty { display: none } .section_required .thumb_area { float: right; position: relative; width: 98px; height: 98px; margin: 0; margin-left: 15px } .section_required .thumb_area:before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; border: 1px solid rgba(0,0,0,.03) } .section_option { margin-top: 15px } .section_option .alert_area { padding: 12px 0 } .section_option .option_tab_area { position: relative; margin: 0 -20px } .section_option .option_tab_area::before { content: ""; position: absolute; top: 0; left: 0; width: 20px; height: 100%; background: -webkit-gradient(linear, left top, right top, color-stop(60%, #fff), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, #fff 60%, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, left top, right top, color-stop(60%, var(--booking-color-surface)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to right, var(--booking-color-surface) 60%, rgba(255, 255, 255, 0) 100%); z-index: 1 } .section_option .option_tab_area::after { content: ""; position: absolute; top: 0; right: 0; width: 20px; height: 100%; background: -webkit-gradient(linear, right top, left top, color-stop(0, #fff), to(rgba(255, 255, 255, 0))); background: linear-gradient(to left, #fff 0, rgba(255, 255, 255, 0) 100%); background: -webkit-gradient(linear, right top, left top, color-stop(0, var(--booking-color-surface)), to(rgba(255, 255, 255, 0))); background: linear-gradient(to left, var(--booking-color-surface) 0, rgba(255, 255, 255, 0) 100%); z-index: 1 } .section_option .option_tab_area.type_pc .option_tab_list { overflow: visible; height: auto; white-space: normal; text-align: center } .section_option .option_tab_area.type_pc .option_tab_list .item { margin-top: 6px } .section_option .option_tab_area.type_pc .option_tab_list .item:not(.on):not(.more) .btn:hover { border-color: #3787ff; color: #3787ff } .section_option .option_tab_list { overflow-x: auto; overflow-y: hidden; height: 40px; padding: 0 20px; white-space: nowrap; font-size: 0; -webkit-overflow-scrolling: touch } .section_option .option_tab_list .item { display: inline-block; margin-right: 6px; vertical-align: top } .section_option .option_tab_list .item .btn { display: block; padding: 5px 14px 7px; background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); border-radius: 20px; font-size: 15px; line-height: 1.2; color: #939396; color: var(--booking-color-gray50) } .section_option .option_tab_list .item.on .btn { background: #3787ff; border-color: #3787ff; color: #fff } .section_option .option_tab_list .item.more .btn { width: 14px; padding: 5px 13px 7px; background-color: #e9e9ec; background-color: var(--booking-color-gray80); border-color: rgba(0,0,0,0) } .section_option .option_tab_list .item.more .fn-more2 { font-size: 16px; color: #fff; vertical-align: -3px } .section_option .option_check_area.type_box .check_list { border: 1px solid #dbdbdb } .section_option .option_check_area.type_box .check_list .item { padding: 15px } .section_option .option_check_area.type_box .check_list .item .title { padding-top: 3px; font-size: 16px } .section_option .option_check_area.type_box .total_area { margin-top: 6px } .section_option .option_check_list .item { padding: 15px 0; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_option .option_check_list .item:first-child { border-top-width: 0 } .section_option .option_check_list .item.soldout { opacity: .4 } .section_option .option_check_list .item.soldout .checkmark { background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid; border-color: #c5c5c7; border-color: var(--booking-color-gray60) } .section_option .option_check_list .item.soldout .checkmark::after { display: none } .section_option .option_check_list .detail_area { position: relative } .section_option .option_check_list .detail_area:before,.section_option .option_check_list .detail_area:after { content: " "; display: table } .section_option .option_check_list .detail_area:after { clear: both } .section_option .option_check_list .info_area { position: relative; overflow: hidden; padding-left: 35px; min-height: 25px } .section_option .option_check_list .info_area .checkmark { position: absolute; top: 0; left: 0; width: 25px; height: 25px; background-color: #e9e9ec; background-color: var(--booking-color-gray80); border-radius: 3px } .section_option .option_check_list .info_area .checkmark::after { content: ""; display: block; position: absolute; top: 2px; left: 8px; width: 7px; height: 13px; border: solid; border-color: #fff; border-color: var(--booking-color-gray100); border-width: 0 2px 2px 0; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .section_option .option_check_list .info_area input[type=checkbox] { overflow: hidden; position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; padding: 0; border: 0; clip: rect(0 0 0 0) } .section_option .option_check_list .info_area input[type=checkbox]:checked~.checkmark { background-color: #3787ff } .section_option .option_check_list .info_area input[type=checkbox]:checked~.checkmark::after { border-color: #fff } .section_option .option_check_list .info_area .title { display: block; font-size: 18px; font-weight: bold; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .section_option .option_check_list .info_area .title .ico_soldout { vertical-align: 3px; margin-right: 4px; padding: 4px 8px; border-radius: 6px; background-color: #000; font-size: 11px; line-height: 13px; letter-spacing: -0.4px; color: #fff; font-style: normal } .section_option .option_check_list .info_area .desc { padding-top: 3px; font-size: 16px; line-height: 1.4; color: #444447; color: var(--booking-color-gray20) } .section_option .option_check_list .info_area .price { padding-top: 3px; font-size: 16px; font-weight: bold; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .section_option .option_check_list .info_area .price .sale { display: block; font-weight: normal; color: #999 } .section_option .option_check_list .info_area .price .sale .percent { color: #ff5658 } .section_option .option_check_list .info_area .info { display: block; padding-top: 4px; font-size: 15px; line-height: 1.4; color: #999 } .section_option .option_check_list .thumb_area { float: right; position: relative; width: 98px; height: 98px; margin: 0; margin-left: 15px } .section_option .option_check_list .thumb_area:before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; border: 1px solid rgba(0,0,0,.03) } .section_option .option_check_list .further_area { margin-top: 12px; margin-left: 35px; padding-top: 12px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_option .option_check_list .further_area:before,.section_option .option_check_list .further_area:after { content: " "; display: table } .section_option .option_check_list .further_area:after { clear: both } .section_option .option_check_list .further_area .desc { overflow: hidden; font-size: 15px; line-height: 1.5; color: #999 } .section_option .option_quantity_list .item { padding: 20px 0; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_option .option_quantity_list .item:first-child { border-top-width: 0 } .section_option .option_quantity_list .item.soldout { opacity: .4 } .section_option .option_quantity_list .detail_area { position: relative } .section_option .option_quantity_list .detail_area:before,.section_option .option_quantity_list .detail_area:after { content: " "; display: table } .section_option .option_quantity_list .detail_area:after { clear: both } .section_option .option_quantity_list .info_area { position: relative; overflow: hidden } .section_option .option_quantity_list .info_area .title { display: block; font-size: 18px; font-weight: bold; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .section_option .option_quantity_list .info_area .title .ico_soldout { vertical-align: 3px; margin-right: 4px; padding: 4px 8px; border-radius: 6px; background-color: #000; font-size: 11px; line-height: 13px; letter-spacing: -0.4px; color: #fff; font-style: normal } .section_option .option_quantity_list .info_area .desc { padding-top: 3px; font-size: 16px; line-height: 1.4; color: #444447; color: var(--booking-color-gray20) } .section_option .option_quantity_list .info_area .price { padding-top: 3px; font-size: 16px; font-weight: bold; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .section_option .option_quantity_list .info_area .price .sale { display: block; font-weight: normal; color: #999 } .section_option .option_quantity_list .info_area .price .sale .percent { color: #ff5658 } .section_option .option_quantity_list .info_area .info { display: block; padding-top: 4px; font-size: 15px; line-height: 1.4; color: #999 } .section_option .option_quantity_list .thumb_area { float: right; position: relative; width: 98px; height: 98px; margin: 0; margin-left: 15px } .section_option .option_quantity_list .thumb_area:before { content: ""; position: absolute; top: 0; right: 0; left: 0; bottom: 0; border: 1px solid rgba(0,0,0,.03) } .section_option .option_quantity_list .figures_area { position: relative; float: right; margin-left: 10px } .section_option .option_quantity_list .figures_area .sum_area { padding-top: 6px; font-size: 18px; color: #444447; color: var(--booking-color-gray20); text-align: right } .section_option .option_quantity_list .counter_area { -webkit-box-shadow: 0 2px 4px 0 var(--booking-color-bg197),0 0 15px 0 var(--booking-color-bg198); box-shadow: 0 2px 4px 0 var(--booking-color-bg197),0 0 15px 0 var(--booking-color-bg198) } .section_option .option_quantity_list .counter_area .counter_btn { overflow: hidden; position: relative; width: 40px; height: 40px; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); line-height: 42px; vertical-align: top } .section_option .option_quantity_list .counter_area .counter_btn .ico_minus { display: inline-block; width: 12px; height: 1px; background-color: #000; background-color: var(--booking-color-gray0); vertical-align: 6px } .section_option .option_quantity_list .counter_area .counter_btn .ico_plus { display: inline-block; position: relative; width: 13px; height: 1px; background-color: #fff; vertical-align: 7px } .section_option .option_quantity_list .counter_area .counter_btn .ico_plus:before { content: ""; position: absolute; top: -6px; left: 6px; width: 1px; height: 13px; background-color: #fff } .section_option .option_quantity_list .counter_area .counter_btn.minus { background-color: #f0f0f3; background-color: var(--booking-color-gray90); border-radius: 3px 0 0 3px } .section_option .option_quantity_list .counter_area .counter_btn.plus { background: #3787ff; border-color: #3787ff; border-radius: 0 3px 3px 0 } .section_option .option_quantity_list .counter_area .counter_btn.disabled { background-color: #fff; background-color: var(--booking-color-surface); border-color: #d9d9dc; border-color: var(--booking-color-gray70) } .section_option .option_quantity_list .counter_area .counter_btn.disabled .ico_minus { background-color: #d1d1d1 } .section_option .option_quantity_list .counter_area .counter_btn.disabled .ico_plus { background-color: #d1d1d1 } .section_option .option_quantity_list .counter_area .counter_btn.disabled .ico_plus:before { background-color: #d1d1d1 } .section_option .option_quantity_list .counter_area .counter_num { display: inline-block; overflow: hidden; width: 40px; height: 40px; margin: 0 -1px; background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px; font-weight: bold; line-height: 40px; white-space: nowrap; color: #222225; color: var(--booking-color-gray10); text-align: center; vertical-align: top } .section_option .option_quantity_list .further_area { margin-top: 12px; padding-top: 12px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_option .option_quantity_list .further_area:before,.section_option .option_quantity_list .further_area:after { content: " "; display: table } .section_option .option_quantity_list .further_area:after { clear: both } .section_option .option_quantity_list .further_area .desc { overflow: hidden; font-size: 15px; line-height: 1.5; color: #999 } .option_total_area { margin: 0 19px 40px; padding: 8px 8px 10px; background-color: #f0f0f3; background-color: var(--booking-color-gray90); border-top: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70) } .option_total_area:before,.option_total_area:after { content: " "; display: table } .option_total_area:after { clear: both } .option_total_area .text { font-size: 16px; color: #000; color: var(--booking-color-gray0) } .option_total_area .sum { float: right; font-size: 16px; text-align: right; color: #000; color: var(--booking-color-gray0) } .option_total_area .sum .price { font-size: 18px; color: #ff5658 } .precaution_section { margin: -15px 20px 0; padding: 22px 0; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .precaution_section .precaution_header { position: relative; text-align: center; margin-bottom: 10px } .precaution_section .precaution_header .title { position: relative; display: inline-block; padding: 0 10px; background-color: #fff; background-color: var(--booking-color-surface); font-size: 18px; color: #ff5658; z-index: 20 } .precaution_section .precaution_header::after { content: ""; display: block; position: absolute; top: 50%; left: 0; right: 0; width: 100%; height: 1px; margin-top: -1px; background: #ff5658; z-index: 10 } .coupon_alert_box { padding: 16px; border-radius: 12px; background-color: #f2fbf7; background-color: var(--booking-color-green99); border: 1px solid; border-color: #d7f1e5; border-color: var(--booking-color-green90) } .coupon_alert_box .title { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 15px; font-weight: 600; line-height: 20px; color: #222225; color: var(--booking-color-gray10) } .coupon_alert_box .title .fn-info1 { margin-right: 2px } .coupon_alert_box .text { padding-top: 4px; font-size: 14px; line-height: 20px; color: #77777a; color: var(--booking-color-gray40) } .section_price { margin: 30px 0 40px } .section_price .sect_cont { position: relative; margin: 0 20px } .section_price .sect_cont:before,.section_price .sect_cont:after { content: " "; display: table } .section_price .sect_cont:after { clear: both } .section_price .alert_area { padding-top: 12px } .section_price .price_area { padding: 15px 0 14px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_price .price_area:before,.section_price .price_area:after { content: " "; display: table } .section_price .price_area:after { clear: both } .section_price .price_area:first-child { border-top-width: 0 } .section_price .price_area:last-child { padding-bottom: 0 } .section_price .info_area { position: relative; overflow: hidden } .section_price .info_area .title { display: block; font-size: 17px; font-weight: bold; line-height: 1.4; color: #000; color: var(--booking-color-gray0) } .section_price .info_area .price { padding-top: 3px; font-size: 16px; font-weight: bold; line-height: 1.3; color: #222225; color: var(--booking-color-gray10) } .section_price .info_area .price .sale { margin-left: 2px; font-weight: normal; color: #999 } .section_price .info_area .price .sale .percent { display: inline-block; color: #ff5658 } .section_price .info_area .desc { padding-top: 5px; font-size: 15px; line-height: 1.3; color: #666; letter-spacing: -0.5px; word-break: keep-all } .section_price .info_area .info { display: block; padding-top: 4px; font-size: 15px; line-height: 1.4; color: #999; letter-spacing: -0.5px } .section_price .figures_area { position: relative; float: right; margin-left: 10px } .section_price .figures_area .counter_box { text-align: right; -webkit-box-shadow: 0 2px 4px 0 var(--booking-color-bg197),0 0 15px 0 var(--booking-color-bg198); box-shadow: 0 2px 4px 0 var(--booking-color-bg197),0 0 15px 0 var(--booking-color-bg198) } .section_price .figures_area .counter_box .counter_btn { overflow: hidden; position: relative; width: 40px; height: 40px; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); line-height: 42px; vertical-align: top } .section_price .figures_area .counter_box .counter_btn .ico_minus { display: inline-block; width: 12px; height: 1px; background-color: #000; background-color: var(--booking-color-gray0); vertical-align: 6px } .section_price .figures_area .counter_box .counter_btn .ico_plus { display: inline-block; position: relative; width: 13px; height: 1px; background-color: #fff; vertical-align: 7px } .section_price .figures_area .counter_box .counter_btn .ico_plus:before { content: ""; position: absolute; top: -6px; left: 6px; width: 1px; height: 13px; background-color: #fff } .section_price .figures_area .counter_box .counter_btn.minus { background-color: #f0f0f3; background-color: var(--booking-color-gray90); border-radius: 3px 0 0 3px } .section_price .figures_area .counter_box .counter_btn.plus { background: #3787ff; border-color: #3787ff; border-radius: 0 3px 3px 0 } .section_price .figures_area .counter_box .counter_btn.disabled { background-color: #fff; background-color: var(--booking-color-surface); border-color: #d9d9dc; border-color: var(--booking-color-gray70) } .section_price .figures_area .counter_box .counter_btn.disabled .ico_minus { background-color: #d1d1d1 } .section_price .figures_area .counter_box .counter_btn.disabled .ico_plus { background-color: #d1d1d1 } .section_price .figures_area .counter_box .counter_btn.disabled .ico_plus:before { background-color: #d1d1d1 } .section_price .figures_area .counter_box .counter_num { display: inline-block; overflow: hidden; width: 40px; height: 40px; margin: 0 -1px; background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 16px; font-weight: bold; line-height: 40px; white-space: nowrap; color: #222225; color: var(--booking-color-gray10); text-align: center; vertical-align: top } .section_price .figures_area .sum_box { padding-top: 6px; font-size: 18px; color: #444447; color: var(--booking-color-gray20); text-align: right } .section_price .total_area { margin-top: 14px; padding: 8px 8px 10px; border-top: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); background-color: #f7f7f9; background-color: var(--booking-color-gray95) } .section_price .total_area:before,.section_price .total_area:after { content: " "; display: table } .section_price .total_area:after { clear: both } .section_price .total_area .text { font-size: 16px; color: #000; color: var(--booking-color-gray0) } .section_price .total_area .sum { float: right; font-size: 16px; text-align: right; color: #000; color: var(--booking-color-gray0) } .section_price .total_area .sum .price { font-size: 18px; color: #ff5658 } .section_ticket { margin: 30px 0 } .section_ticket .sect_cont { padding-top: 12px } .section_ticket .alert_wrap { padding-top: 10px } .section_ticket .ticket_check_group { display: table; width: 100%; margin: 0 -4px } .section_ticket .ticket_check_group .check_item { display: table-cell; width: 50%; text-align: center } .section_ticket .ticket_check_group .check_item input[type=radio],.section_ticket .ticket_check_group .check_item input[type=checkbox] { position: absolute; left: -9999px } .section_ticket .ticket_check_group .check_item input[type=radio]:checked+.input_label,.section_ticket .ticket_check_group .check_item input[type=checkbox]:checked+.input_label { background-color: #3787ff; border-width: 0 } .section_ticket .ticket_check_group .check_item input[type=radio]:checked+.input_label .check_txt,.section_ticket .ticket_check_group .check_item input[type=checkbox]:checked+.input_label .check_txt { font-weight: bold; color: #fff } .section_ticket .ticket_check_group .check_item input[type=radio]:checked+.input_label .fn-booking-check2,.section_ticket .ticket_check_group .check_item input[type=checkbox]:checked+.input_label .fn-booking-check2 { display: inline-block; margin-right: 7px; color: #fff } .section_ticket .ticket_check_group .check_item .input_label { position: relative; display: block; margin: 0 4px; padding: 12px 0; border-radius: 3px; border: solid 1px; border-color: #d9d9dc; border-color: var(--booking-color-gray70); background-color: #f7f7f9; background-color: var(--booking-color-gray95); white-space: nowrap } .section_ticket .ticket_check_group .check_item .input_label .fn-booking-check2 { display: none; vertical-align: -2px } .section_ticket .ticket_check_group .check_item .input_label .check_txt { font-size: 16px; color: #222225; color: var(--booking-color-gray10) } .section_ticket .entery_area .entery_info { margin: 0; padding: 0 } .section_schedule { margin: 30px 0 25px } .section_schedule .section_inner { max-width: 720px; margin: 0 auto } .section_schedule .sect_cont { min-height: 69px } .section_schedule .schedule_month { margin: 0 19px } .section_schedule .schedule_month .calendar { z-index: 10; position: relative; top: 0px; left: 0px; display: block; padding: 0; min-height: 280px; background-color: #fff; background-color: var(--booking-color-surface); border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_schedule .schedule_month .calendar .calendar_header { position: relative; padding: 10px 0 18px; margin: 0 -6px; margin-bottom: 2px; text-align: center } .section_schedule .schedule_month .calendar .calendar_header .calendar-title { display: inline-block; min-width: 80px; font-size: 28px; line-height: 30px; font-weight: 600; color: #000; color: var(--booking-color-gray0); letter-spacing: -1.2px; text-align: center; vertical-align: middle } .section_schedule .schedule_month .calendar .calendar_header .calendar-btn { display: inline-block; padding: 14px 14px 10px; vertical-align: middle } .section_schedule .schedule_month .calendar .calendar_header .calendar-btn.off { opacity: .3; -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30) } .section_schedule .schedule_month .calendar .calendar_header .calendar-btn .fn-booking { color: #222225; color: var(--booking-color-gray10); font-size: 20px; vertical-align: top } .section_schedule .schedule_month .calendar .calendar_header .calendar-btn .fn-booking::before { font-weight: bold } .section_schedule .schedule_month .calendar .calendar_table { display: table; position: relative; table-layout: fixed; width: 100%; margin-top: -18px; margin-bottom: 3px; border-spacing: 0; border-collapse: collapse } .section_schedule .schedule_month .calendar .calendar_table.type_pc td:not(.sold_out):not(.off) .calendar-date:hover .num { color: #3787ff } .section_schedule .schedule_month .calendar .calendar_table.type_pc td:not(.sold_out):not(.off) .calendar-date:hover .txt { color: #3787ff } .section_schedule .schedule_month .calendar .calendar_table .tb_header tr { background-color: #f7f7f9; background-color: var(--booking-color-gray95); border-top: 1px solid; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_schedule .schedule_month .calendar .calendar_table .tb_header th { padding: 8px 0; font-size: 14px; line-height: 12px; font-weight: 600; color: #545454 } .section_schedule .schedule_month .calendar .calendar_table .tb_body td { height: 46px; padding: 1px; text-align: center; color: #000; vertical-align: top; line-height: 17px } .section_schedule .schedule_month .calendar .calendar_table .tb_body td .calendar-date { position: relative; z-index: 1; display: inline-block; width: 100%; height: 46px; font-weight: 400; vertical-align: top; border-radius: 3px; -webkit-box-sizing: border-box; box-sizing: border-box } .section_schedule .schedule_month .calendar .calendar_table .tb_body td .calendar-date .num { display: block; position: relative; padding: 8px 0 2px; margin: 0 auto; border-radius: 50%; font-size: 16px; line-height: 17px; font-weight: 400; color: #444447; color: var(--booking-color-gray20); white-space: nowrap } .section_schedule .schedule_month .calendar .calendar_table .tb_body td .calendar-date .txt { display: block; position: relative; margin-top: -1px; font-size: 12px; color: #3787ff; line-height: 12px } .section_schedule .schedule_month .calendar .calendar_table .tb_body td .calendar-date .txt .rest { color: #3787ff } .section_schedule .schedule_month .calendar .calendar_table .tb_body td .calendar-date .start-day-txt,.section_schedule .schedule_month .calendar .calendar_table .tb_body td .calendar-date .end-day-txt { min-height: 20px; margin-bottom: -10px } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.calendar-sun .num { color: #ff5658 } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.calendar-sun .txt { color: #3787ff } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.calendar-sat .num,.section_schedule .schedule_month .calendar .calendar_table .tb_body td.calendar-sat .txt { color: #3787ff } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.on .calendar-date { background: #3787ff } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.on .num,.section_schedule .schedule_month .calendar .calendar_table .tb_body td.on .txt { font-weight: 600; color: #fff !important } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.on.start-day,.section_schedule .schedule_month .calendar .calendar_table .tb_body td.on.end-day { position: relative } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.off .num { opacity: .2; color: #444447; color: var(--booking-color-gray20) } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.off .txt { display: none } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.sold_out .calendar-date { overflow: hidden; border-radius: 3px; position: relative; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); background-color: #f7f7f9; background-color: var(--booking-color-gray95); color: #bbb } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.sold_out .calendar-date::before { content: ""; display: block; position: absolute; top: 0; left: 100%; width: 1px; height: 68px; background-color: #d9d9dc; background-color: var(--booking-color-gray70); -webkit-transform-origin: top left; transform-origin: top left; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.sold_out .txt,.section_schedule .schedule_month .calendar .calendar_table .tb_body td.sold_out .num { color: #bbb } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.today { position: relative } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.today .num { font-size: 13px; font-weight: bold; color: #444447; color: var(--booking-color-gray20) } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.today::after { content: ""; display: block; position: absolute; top: 5px; left: 50%; width: 3px; height: 3px; margin-left: -2px; background: #ff5658; border-radius: 50%; z-index: 99 } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.today.sold_out .txt { color: #ff5658 } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.today.sold_out::after { background: #bbb } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.hotdeal .num { color: #ff5658 !important } .section_schedule .schedule_month .calendar .calendar_table .tb_body td.hotdeal .txt_hotdeal_s { display: inline-block; margin: -2px -4.5px -10px; padding: 1.5px 2px 1px; color: #fff !important; line-height: 1; vertical-align: top } .section_schedule .schedule_month .calendar .calendar_table .tb_body::before { content: ""; display: table-row; height: 10px } .section_schedule .schedule_month .calendar.off_all .num,.section_schedule .schedule_month .calendar.off_all .txt { color: #bbb !important } .section_schedule .schedule_month .calendar .calendar-selected .calendar-date { background-color: #3787ff; border-radius: 5px } .section_schedule .schedule_time { margin: -1px 19px 0; padding-top: 12px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_schedule .schedule_time .time_title { margin-bottom: 10px; font-size: 16px; font-weight: normal; color: #222225; color: var(--booking-color-gray10) } .section_schedule .schedule_time .time_info { margin-top: 8px; padding: 14px; border: 1px solid #efefef } .section_schedule .schedule_time .time_info .fn-board1 { margin-top: -3px; background: #fff; vertical-align: middle } .section_schedule .schedule_time .time_info .title { padding: 1px; background: #e2edff; font-size: 16px } .section_schedule .schedule_time .time_info .desc { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #424242; word-break: keep-all } .section_schedule .schedule_time .time_box_wrap { position: relative } .section_schedule .schedule_time .time_box_wrap .info_am,.section_schedule .schedule_time .time_box_wrap .info_pm { position: absolute; top: 0; left: 0; display: inline-block; padding-bottom: 2px; font-size: 15px; color: #bbb; font-weight: 500 } .section_schedule .schedule_time .time_box_wrap .info_am { top: 16px; left: 24px } .section_schedule .schedule_time .time_box_wrap .time_box_body { overflow-y: hidden; overflow-x: auto; -webkit-overflow-scrolling: touch; position: relative; word-wrap: normal; white-space: nowrap } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc { overflow: visible; white-space: normal } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_time { display: block; margin: 0 -5px; white-space: normal } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_time .item { width: 33.3333%; padding-bottom: 9px } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_time .item+.item { margin-left: 0 } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_time .item:last-child { margin-right: 0 } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_time .item.on .anchor:hover { color: #fff } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_time .item:not(.sold_out):not(.on) .anchor:hover { border-color: #3787ff; color: #3787ff } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_time .item .anchor { width: auto; margin: 0 5px } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_more { position: relative; margin: 2px 0 16px; text-align: center } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_more::before { content: ""; position: absolute; top: 18px; left: 0; right: 0; height: 1px; background-color: #e7e7e7 } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_more .expand_btn { position: relative; display: inline-block; padding: 5px 21px; background-color: #fff; border: solid 1px #e7e7e7; border-radius: 18px; color: #3787ff; -webkit-box-shadow: 0 1px 4px 0 rgba(0,0,0,.04); box-shadow: 0 1px 4px 0 rgba(0,0,0,.04) } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_more .ico_arr { position: relative; display: inline-block; width: 11px; height: 7px; margin-left: 4px; vertical-align: 3px } .section_schedule .schedule_time .time_box_wrap .time_box_body.type_pc .list_more .ico_arr:before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-top: -2px; border-right: 1px solid #3787ff; border-bottom: 1px solid #3787ff } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time { display: inline-block; font-size: 0; white-space: nowrap } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item { position: relative; display: inline-block; padding-bottom: 15px; vertical-align: top } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item+.item { margin-left: 9px } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item.list_pm { margin-left: 5px } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item.on .anchor { background-color: #3787ff; border-width: 0; color: #fff } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item.on .anchor.empty .box_info_wrap:after { display: none } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item.sold_out .anchor { position: relative; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); background-color: #f7f7f9; background-color: var(--booking-color-gray95); color: #bbb; pointer-events: none } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item.sold_out .anchor::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url('data:image/svg+xml;utf8,') } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item .anchor { overflow: hidden; display: block; width: 105px; height: 57px; border-radius: 3px; text-decoration: none; font-size: 14px; border: solid 1px; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); color: #444447; color: var(--booking-color-gray20); -webkit-box-sizing: border-box; box-sizing: border-box } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item .anchor .box_info_wrap { position: relative; text-align: center } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item .anchor .box_info { display: block; padding-top: 8px; font-weight: bold; line-height: 19px } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item .anchor .box_info2 { display: block; padding-top: 2px; line-height: 15px } .section_schedule .schedule_time .time_box_wrap .time_box_body .list_time .item:last-child { margin-right: 11px } .section_schedule .schedule_time .time_box_wrap .box_booking_info .ico_board { margin-right: 6px; vertical-align: -2px; width: 12px; height: 15px; background-position: -359px -248px } .section_schedule .schedule_time .time_box_wrap .box_booking_info .in_tit { display: inline-block; padding: 1px; font-size: 16px; line-height: 1.2; background-color: #dbe7fb; background-color: var(--booking-color-blue90); color: #000; color: var(--booking-color-gray0) } .section_schedule .schedule_time .time_box_wrap .box_booking_info .dsc { margin-top: 8px; font-size: 15px; line-height: 1.5; color: #939396; color: var(--booking-color-gray50); word-break: keep-all } .section_schedule .schedule_time .time_box_wrap .box_booking_info.close .dsc { height: 63px; display: block; display: -webkit-box; overflow: hidden; max-height: 66px; overflow-wrap: break-word; -webkit-line-clamp: 3; -webkit-box-orient: vertical; text-overflow: ellipsis } .section_schedule .schedule_time .time_box_wrap .box_slot_info .seat_info { padding: 8px 0 7px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_schedule .schedule_time .time_box_wrap .box_slot_info .seat_info .seat_info_table { width: 100% } .section_schedule .schedule_time .time_box_wrap .box_slot_info .seat_info .seat_info_table td { padding-top: 5px; vertical-align: top; font-size: 16px; font-weight: 600; color: #000; color: var(--booking-color-gray0) } .section_schedule .schedule_time .time_box_wrap .box_slot_info .seat_info .seat_info_table td.txt_gray { font-weight: normal; text-indent: 5px; color: #555558; color: var(--booking-color-gray30) } .section_schedule .schedule_time .time_box_wrap .box_slot_info .seat_info .seat_info_table td.txt_right { text-align: right; color: #444447; color: var(--booking-color-gray20) } .section_schedule .schedule_time .time_box_wrap .box_slot_info .seat_info.double { margin-top: 4px; padding-top: 6px; border: solid 1px; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_schedule .schedule_time .time_box_wrap .box_slot_info .episode_info { margin-bottom: 15px; padding: 15px; border: solid 1px; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_schedule .schedule_time .seat_info_color { display: inline-block; margin-top: 3px; width: 12px; height: 12px; vertical-align: top; border: 1px solid; border-color: rgba(0,0,0,.25) } .section_schedule .schedule_none { margin: 0 18px; padding-top: 12px; font-size: 16px; line-height: 1.25; letter-spacing: normal; color: #222225; color: var(--booking-color-gray10) } .section_schedule .schedule_none .schedule_none_text { margin-top: 15px; padding: 18px 0; border-radius: 3px; border: solid 1px; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #f7f7f9; background-color: var(--booking-color-gray95); font-size: 15px; line-height: 1.33; text-align: center; color: #c5c5c7; color: var(--booking-color-gray60) } .section_seat_schedule { position: fixed; top: 50px; left: 0; right: 0; -webkit-box-shadow: 0px 2px 4px 0px rgba(0,0,0,.05); box-shadow: 0px 2px 4px 0px rgba(0,0,0,.05); background-color: #fff; background-color: var(--booking-color-surface); z-index: 10 } .section_seat_schedule .schedule_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; max-width: 720px; margin: 0 auto; padding: 8px 16px 16px; -webkit-box-sizing: border-box; box-sizing: border-box; color: #222225; color: var(--booking-color-gray10); font-size: 20px; font-weight: 600; line-height: 24px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .section_seat_schedule .ico_calendar { margin-right: 8px; width: 18px; height: 18px; fill: #222225; fill: var(--booking-color-gray10) } .section_seat_map { position: absolute; top: 0; left: 0; bottom: 110px; width: 100%; margin-top: 98px; background-color: #f0f0f3; background-color: var(--booking-color-background) } .section_seat_map .map_inner { position: relative; height: 100%; max-width: 720px; margin: 0 auto } .section_seat_map .button_zoom_area { position: absolute; top: 20px; right: 20px; border-radius: 4px; border: 1px solid; border-color: #c5c5c7; border-color: var(--booking-color-gray60); overflow: hidden; z-index: 101 } .section_seat_map .button_zoom_area .button { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 40px; height: 40px; background-color: #fff; background-color: var(--booking-color-surface) } .section_seat_map .button_zoom_area .button.off .fn-booking { color: #c5c5c7; color: var(--booking-color-gray60) } .section_seat_map .button_zoom_area .button+.button { border-top: 1px solid; border-color: #c5c5c7; border-color: var(--booking-color-gray60) } .section_seat_map .button_zoom_area .button .fn-booking { font-size: 20px; color: #555558; color: var(--booking-color-gray30) } .section_seat_select { position: fixed; left: 0; bottom: 0; width: 100%; background-color: #fff; background-color: var(--booking-color-surface); border-radius: 24px 24px 0 0; -webkit-box-shadow: 0px 3px 6px 0px rgba(0,0,0,.1),0px 0px 6px 0px rgba(0,0,0,.05); box-shadow: 0px 3px 6px 0px rgba(0,0,0,.1),0px 0px 6px 0px rgba(0,0,0,.05); z-index: 1201 } .section_seat_select .pc_link_button { position: absolute; top: -65px; left: 50%; background-color: #0475f4; border-radius: 23px; padding: 10px 20px 11px; background-color: #fff; background-color: var(--booking-color-surface); font-size: 15px; font-weight: bold; -webkit-box-shadow: 0 4px 10px 0 rgba(0,0,0,.2); box-shadow: 0 4px 10px 0 rgba(0,0,0,.2); -webkit-transform: translateX(-50%); transform: translateX(-50%) } .section_seat_select .pc_link_button::before { content: ""; width: 13px; height: 13px; background-position: -311px -398px; margin-right: 6px; vertical-align: -1px } .section_seat_select .seat_title { overflow: hidden; padding-top: 20px; font-size: 17px; line-height: 23px; color: #222225; color: var(--booking-color-gray10) } .section_seat_select .seat_title .info { float: left; width: 40%; padding: 0 0 8px 18px; -webkit-box-sizing: border-box; box-sizing: border-box } .section_seat_select .seat_title .seat { float: left; width: 60%; padding: 0 0 8px 12px; -webkit-box-sizing: border-box; box-sizing: border-box } .section_seat_select .seat_title .seat .count { margin-left: 3px; color: #0091ff } .section_seat_select .seat_info { overflow: hidden; position: relative; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .section_seat_select .seat_info:before { position: absolute; top: 0; left: 40%; bottom: 0; width: 1px; background-color: #f0f0f3; background-color: var(--booking-color-gray90); content: "" } .section_seat_select .seat_info .badge { display: inline-block; width: 15px; height: 15px; margin-right: 6px; border: 1px solid rgba(0,0,0,.1); vertical-align: -2px } .section_seat_select .seat_info .info { float: left; overflow-y: auto; width: 40%; max-height: 151px; padding: 16px; -webkit-box-sizing: border-box; box-sizing: border-box } .section_seat_select .seat_info .info .item { display: table; width: 100%; font-size: 16px; line-height: 20px } .section_seat_select .seat_info .info .item+.item { margin-top: 9px } .section_seat_select .seat_info .info .item .title { display: table-cell; position: relative; padding-left: 21px; color: #222225; color: var(--booking-color-gray10) } .section_seat_select .seat_info .info .item .title .badge { position: absolute; top: 3px; left: 0 } .section_seat_select .seat_info .info .item .count { display: table-cell; color: #555558; color: var(--booking-color-gray30); text-align: right; white-space: nowrap } .section_seat_select .seat_info .seat { float: left; overflow-y: auto; width: 60%; max-height: 151px; padding: 6px 12px 6px 18px; -webkit-box-sizing: border-box; box-sizing: border-box } .section_seat_select .seat_info .seat .grade { position: relative; padding: 7px 0 8px 24px } .section_seat_select .seat_info .seat .grade+.grade { border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .section_seat_select .seat_info .seat .grade .badge { position: absolute; top: 11px; left: 0 } .section_seat_select .seat_info .seat .grade .item { overflow: hidden; line-height: 23px; color: #555558; color: var(--booking-color-gray30) } .section_seat_select .seat_info .seat .grade .item .cancel_button { float: right; padding: 0 6px } .section_seat_select .seat_info .seat .grade .item .cancel_button .fn-booking-close1 { vertical-align: -1px; font-size: 12px; color: #555558; color: var(--booking-color-gray30) } .step_button { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 12px 16px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90); background-color: #fff; background-color: var(--booking-color-surface) } .step_button .button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 44px; border-radius: 8px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-elevated-surface); -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 15px; line-height: 44px; color: #444447; color: var(--booking-color-gray20); text-align: center } .step_button .button+.button { margin-left: 7px; border-color: #c5c5c7; border-color: var(--booking-color-gray60); background-color: #c5c5c7; background-color: var(--booking-color-gray60); color: #fff } .step_button .button+.button.active { border-color: #03aa5a; background-color: #03aa5a } .seat_price_wrap { position: relative; min-height: 100vh } .seat_price_wrap .section_inner { max-width: 720px; margin: 0 auto } .seat_price_wrap .step_button { position: fixed; left: 0; bottom: 0; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 0 -1px 20px 0 rgba(0,0,0,.15); box-shadow: 0 -1px 20px 0 rgba(0,0,0,.15); z-index: 9100; background-color: #e9e9ec; background-color: var(--booking-color-gray80) } .seat_price_wrap .section_select_info { padding-top: 48px; border-bottom: 1px solid; background-color: #fff; background-color: var(--booking-color-surface); border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .seat_price_wrap .section_select_info .section_inner { padding: 0 21px; -webkit-box-sizing: border-box; box-sizing: border-box } .seat_price_wrap .section_select_info .title { position: relative; padding-bottom: 8px } .seat_price_wrap .section_select_info .title .text { display: inline-block; padding-top: 19px; font-size: 21px; color: #222225; color: var(--booking-color-gray10); letter-spacing: -0.5px } .seat_price_wrap .section_select_info .title .date { padding: 2px 48px 0 0; color: #444447; color: var(--booking-color-gray20) } .seat_price_wrap .section_select_info .title .change_button { position: absolute; bottom: 6px; right: 0; height: 28px; padding: 0 10px; background-color: #3794ff; border-radius: 3px; color: #fff; line-height: 28px } .seat_price_wrap .section_select_info .seat_info { padding: 6px 0 15px; border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80) } .seat_price_wrap .section_select_info .seat_info .grade { display: table-row; table-layout: fixed } .seat_price_wrap .section_select_info .seat_info .grade .grade_text { overflow: hidden; display: table-cell; padding: 4px 16px 0 0 } .seat_price_wrap .section_select_info .seat_info .grade .grade_text .badge { float: left; width: 13px; height: 13px; margin: 5px 8px 0 0; border: 1px solid rgba(0,0,0,.1) } .seat_price_wrap .section_select_info .seat_info .grade .grade_text .text { overflow: hidden; font-weight: bold; color: #000; color: var(--booking-color-gray0) } .seat_price_wrap .section_select_info .seat_info .grade .seat_text { display: table-cell } .seat_price_wrap .section_select_info .seat_info .grade .seat_text .text { color: #444447; color: var(--booking-color-gray20); white-space: nowrap } .seat_price_wrap .section_seat_select_detail { overflow: hidden; margin-top: 8px; border-top: 1px solid; background-color: #fff; background-color: var(--booking-color-surface); border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .section_simple_summay { margin: 0 19px; padding: 13px 0 12px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } @media screen and (min-width: 720px) { .section_simple_summay { max-width:682px; margin: 0 auto } } .section_simple_summay .info_text { display: inline-block; position: relative; margin-right: 4px; padding-left: 6px; font-size: 15px; color: #222225; color: var(--booking-color-gray10); vertical-align: top } .section_simple_summay .info_text::before { content: ""; position: absolute; top: 11px; left: 0; width: 3px; height: 3px; background-color: var(--booking-color-gray30); border-radius: 50% } .section_simple_summay .info_text.emphasis { color: #ff5658 } .section_simple_summay .info_text.emphasis::before { background: #ff5658 } .section_simple_summay .info_text:empty { display: none } .coupon_my { position: relative } .coupon_my .icon_coupon_bar { position: absolute; top: 3px; bottom: 3px; left: 0; width: 4px; z-index: 15 } .coupon_my .coupon_shape_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex } .coupon_my .coupon_shape_wrapper::before { content: ""; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; z-index: 10; border-radius: 12px 0 0 12px; border: 1px solid; border-right-width: 0; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-elevated-surface) } .coupon_my .coupon_shape_wrapper .icon_coupon { vertical-align: top; position: relative; fill: #fff; fill: var(--booking-color-elevated-surface); z-index: 10 } .coupon_my .coupon_shape_wrapper [class*=path_coupon_border] { fill: #e9e9ec; fill: var(--booking-color-gray80) } .coupon_my .coupon_info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 20 } .coupon_my .coupon_info.click-disabled { cursor: default } .coupon_my .coupon_info.long-pressable { -webkit-touch-callout: none !important; -webkit-user-select: none !important } .coupon_my .coupon_checkbox { padding: 0 9px 0 25px; height: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .coupon_my .coupon_checkbox .icon_check { display: block; width: 22px; height: 22px; border-radius: 50%; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,.04); box-shadow: 0px 2px 3px rgba(0,0,0,.04); -webkit-box-sizing: border-box; box-sizing: border-box } .coupon_my .coupon_checkbox .icon_checked { width: 22px; height: 22px; fill: #03aa5a } .coupon_my .coupon_txt_area { overflow: hidden; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding-left: 8px; padding-right: 12px; line-height: 20px } .coupon_my .coupon_txt_area .txt_target { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 12px; font-weight: 600; line-height: 14px; color: #03aa5a } .coupon_my .coupon_txt_area .txt_target.service_name { font-weight: 700; line-height: 16px } .coupon_my .coupon_txt_area .txt_target+.txt { margin-top: 2px } .coupon_my .coupon_txt_area .txt_type { display: inline-block; vertical-align: 2px; -ms-flex-negative: 0; flex-shrink: 0; margin-right: 4px; padding: 0 4px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #03aa5a; border-radius: 4px; -webkit-box-shadow: 0px 1px 2px rgba(0,182,81,.07); box-shadow: 0px 1px 2px rgba(0,182,81,.07); font-size: 9px; font-weight: 600; line-height: 16px; letter-spacing: -0.6px; color: #03aa5a } .coupon_my .coupon_txt_area .txt_type .icon_naver { margin-right: 1px; width: 7px; height: 7px; fill: #03aa5a } .coupon_my .coupon_txt_area .txt { font-size: 15px; font-weight: 600; letter-spacing: -0.6px; color: #444447; color: var(--booking-color-gray20) } .coupon_my .coupon_txt_area .txt_sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 12px; line-height: 16px; color: #77777a; color: var(--booking-color-gray40) } .coupon_my .coupon_txt_area .txt_date { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; margin-top: 2px; font-size: 12px; line-height: 16px; color: #939396; color: var(--booking-color-gray50) } .coupon_my .coupon_txt_area .txt_date .warning { color: #fc4c4e; color: var(--booking-color-emphasis) } .coupon_my .coupon_txt_area .txt_date .deadline_imminent { margin-right: 2px; color: #fc4c4e; color: var(--booking-color-emphasis) } .coupon_my .coupon_txt_area .txt_limit { margin-top: 2px; font-size: 12px; line-height: 16px; color: #939396; color: var(--booking-color-gray50) } .coupon_my .coupon_txt_area .txt_limit.warning { color: #fc4c4e; color: var(--booking-color-emphasis) } .coupon_my .coupon_txt_area .txt_limit .fn-forward2 { vertical-align: -2px } .coupon_my .coupon_txt_area .txt_limit .fn-forward2::before { font-weight: bold } .coupon_my .coupon_state { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: 0; right: 0; bottom: 0; z-index: 20; width: 68px } .coupon_my .coupon_state.click-disabled { cursor: default } .coupon_my .coupon_state::before { content: ""; position: absolute; top: 5px; left: 0; bottom: 5px; border-left: 1px dashed; border-color: #d9d9dc; border-color: var(--booking-color-gray70) } .coupon_my .coupon_state [class*=icon] { width: 20px; height: 20px } .coupon_my .coupon_state [class*=icon]+.txt { margin-top: 6px } .coupon_my .coupon_state .txt { font-size: 13px; font-weight: 600; line-height: 15px; color: #03aa5a; text-align: center; word-break: keep-all; white-space: pre } .coupon_my .coupon_state .txt:only-child { font-size: 15px; line-height: 20px } .coupon_my.state_download .coupon_state .icon { width: 19px; height: 19px; fill: #444447; fill: var(--booking-color-gray20) } .coupon_my.state_check .coupon_state .icon_checkbox { border-radius: 50%; border: 1px solid; border-color: #c5c5c7; border-color: var(--booking-color-gray60); -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,.04); box-shadow: 0px 2px 3px 0px rgba(0,0,0,.04); -webkit-box-sizing: border-box; box-sizing: border-box } .coupon_my.state_check .coupon_state .txt { font-size: 12px; line-height: 14px; letter-spacing: -0.6px; color: #77777a; color: var(--booking-color-gray40) } .coupon_my.state_checked.type_large [class*=path_coupon_state],.coupon_my.state_checked.type_medium [class*=path_coupon_state] { fill: #f2fbf7; fill: var(--booking-color-green99) } .coupon_my.state_checked .coupon_state .icon { fill: #03aa5a } .coupon_my.state_checked .coupon_state .txt { font-size: 12px; line-height: 14px; letter-spacing: -0.6px; color: #03aa5a } .coupon_my.state_disabled [class*=path_coupon_bar],.coupon_my.state_check_disabled [class*=path_coupon_bar],.coupon_my.state_disabled_clickable [class*=path_coupon_bar],.coupon_my.state_denied_check [class*=path_coupon_bar],.coupon_my.state_used [class*=path_coupon_bar],.coupon_my.state_expired [class*=path_coupon_bar] { fill: #c5c5c7; fill: var(--booking-color-gray60) } .coupon_my.state_disabled.type_large [class*=path_coupon_state],.coupon_my.state_disabled.type_medium [class*=path_coupon_state],.coupon_my.state_check_disabled.type_large [class*=path_coupon_state],.coupon_my.state_check_disabled.type_medium [class*=path_coupon_state],.coupon_my.state_disabled_clickable.type_large [class*=path_coupon_state],.coupon_my.state_disabled_clickable.type_medium [class*=path_coupon_state],.coupon_my.state_denied_check.type_large [class*=path_coupon_state],.coupon_my.state_denied_check.type_medium [class*=path_coupon_state],.coupon_my.state_used.type_large [class*=path_coupon_state],.coupon_my.state_used.type_medium [class*=path_coupon_state],.coupon_my.state_expired.type_large [class*=path_coupon_state],.coupon_my.state_expired.type_medium [class*=path_coupon_state] { fill: #f7f7f9; fill: var(--booking-color-gray95) } .coupon_my.state_disabled.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_extra_small .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_extra_small .coupon_thumb_area .icon_discount { width: 36px; height: 36px; background-position: 0px -38px } .coupon_my.state_disabled.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_extra_small .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_extra_small .coupon_thumb_area .icon_gift { width: 36px; height: 36px; background-position: -76px -38px } .coupon_my.state_disabled.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_modal_small .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_modal_small .coupon_thumb_area .icon_discount { width: 30px; height: 30px; background-position: -65px -76px } .coupon_my.state_disabled.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_modal_small .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_modal_small .coupon_thumb_area .icon_gift { width: 30px; height: 30px; background-position: -114px -64px } .coupon_my.state_disabled .coupon_thumb_area .coupon_thumb::after,.coupon_my.state_check_disabled .coupon_thumb_area .coupon_thumb::after,.coupon_my.state_disabled_clickable .coupon_thumb_area .coupon_thumb::after,.coupon_my.state_denied_check .coupon_thumb_area .coupon_thumb::after,.coupon_my.state_used .coupon_thumb_area .coupon_thumb::after,.coupon_my.state_expired .coupon_thumb_area .coupon_thumb::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; border-radius: 9px; background-color: rgba(255,255,255,.4) } .coupon_my.state_disabled .coupon_txt_area .txt_type,.coupon_my.state_check_disabled .coupon_txt_area .txt_type,.coupon_my.state_disabled_clickable .coupon_txt_area .txt_type,.coupon_my.state_denied_check .coupon_txt_area .txt_type,.coupon_my.state_used .coupon_txt_area .txt_type,.coupon_my.state_expired .coupon_txt_area .txt_type { border-color: #939396; border-color: var(--booking-color-gray50); color: #939396; color: var(--booking-color-gray50) } .coupon_my.state_disabled .coupon_txt_area .txt_type .icon_naver,.coupon_my.state_check_disabled .coupon_txt_area .txt_type .icon_naver,.coupon_my.state_disabled_clickable .coupon_txt_area .txt_type .icon_naver,.coupon_my.state_denied_check .coupon_txt_area .txt_type .icon_naver,.coupon_my.state_used .coupon_txt_area .txt_type .icon_naver,.coupon_my.state_expired .coupon_txt_area .txt_type .icon_naver { fill: #939396; fill: var(--booking-color-gray50) } .coupon_my.state_disabled .coupon_txt_area .txt_target,.coupon_my.state_disabled .coupon_txt_area .txt,.coupon_my.state_check_disabled .coupon_txt_area .txt_target,.coupon_my.state_check_disabled .coupon_txt_area .txt,.coupon_my.state_disabled_clickable .coupon_txt_area .txt_target,.coupon_my.state_disabled_clickable .coupon_txt_area .txt,.coupon_my.state_denied_check .coupon_txt_area .txt_target,.coupon_my.state_denied_check .coupon_txt_area .txt,.coupon_my.state_used .coupon_txt_area .txt_target,.coupon_my.state_used .coupon_txt_area .txt,.coupon_my.state_expired .coupon_txt_area .txt_target,.coupon_my.state_expired .coupon_txt_area .txt { color: #555558; color: var(--booking-color-gray30) } .coupon_my.state_disabled .coupon_state,.coupon_my.state_check_disabled .coupon_state,.coupon_my.state_disabled_clickable .coupon_state,.coupon_my.state_denied_check .coupon_state,.coupon_my.state_used .coupon_state,.coupon_my.state_expired .coupon_state { cursor: default } .coupon_my.state_disabled .coupon_state .icon,.coupon_my.state_check_disabled .coupon_state .icon,.coupon_my.state_disabled_clickable .coupon_state .icon,.coupon_my.state_denied_check .coupon_state .icon,.coupon_my.state_used .coupon_state .icon,.coupon_my.state_expired .coupon_state .icon { fill: #77777a; fill: var(--booking-color-gray40) } .coupon_my.state_disabled .coupon_state .txt,.coupon_my.state_check_disabled .coupon_state .txt,.coupon_my.state_disabled_clickable .coupon_state .txt,.coupon_my.state_denied_check .coupon_state .txt,.coupon_my.state_used .coupon_state .txt,.coupon_my.state_expired .coupon_state .txt { color: #77777a; color: var(--booking-color-gray40) } .coupon_my.state_check_disabled .coupon_state .icon_checkbox { border-radius: 50%; border: 1px solid; border-color: #c5c5c7; border-color: var(--booking-color-gray60); -webkit-box-shadow: 0px 2px 3px 0px rgba(0,0,0,.04); box-shadow: 0px 2px 3px 0px rgba(0,0,0,.04); -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #e9e9ec; background-color: var(--booking-color-gray80) } .coupon_my.state_disabled_clickable .coupon_state { cursor: pointer } .coupon_my.state_denied_check .coupon_state .icon { fill: #77777a; fill: var(--booking-color-gray40) } .coupon_my.state_usable.type_large [class*=path_coupon_state],.coupon_my.state_usable.type_medium [class*=path_coupon_state],.coupon_my.state_before.type_large [class*=path_coupon_state],.coupon_my.state_before.type_medium [class*=path_coupon_state] { fill: #f2fbf7; fill: var(--booking-color-green99) } .coupon_my.state_usable .coupon_state .icon_day,.coupon_my.state_before .coupon_state .icon_day { height: 19px; padding: 0 6px; border-radius: 10px; background-color: #03aa5a; font-size: 14px; font-weight: bold; line-height: 19px; letter-spacing: -0.28px; color: #fff } .coupon_my.state_added.type_large [class*=path_coupon_state],.coupon_my.state_added.type_medium [class*=path_coupon_state] { fill: #f2fbf7; fill: var(--booking-color-green99) } .coupon_my.state_added.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_added.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_added.type_extra_small .coupon_thumb_area .icon_discount { width: 36px; height: 36px; background-position: -38px 0px } .coupon_my.state_added.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_added.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_added.type_extra_small .coupon_thumb_area .icon_gift { width: 36px; height: 36px; background-position: -76px 0px } .coupon_my.state_added .coupon_thumb_area { position: relative } .coupon_my.state_added .coupon_thumb_area .coupon_thumb::before { background-color: rgba(0,0,0,.5) } .coupon_my.state_added .coupon_thumb_area .fn-booking-check2 { position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; font-size: 14px; color: #fff; text-align: center; z-index: 30 } .coupon_my.state_added .coupon_state .txt { opacity: .5 } .coupon_my.type_large .icon_coupon_bar { height: 90px } .coupon_my.type_large .icon_coupon { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 76px; height: 96px } .coupon_my.type_large .coupon_info { right: 68px } .coupon_my.type_large .coupon_txt_area .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .coupon_my.type_medium .icon_coupon_bar { height: 71px } .coupon_my.type_medium .icon_coupon { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 76px; height: 76px } .coupon_my.type_medium .coupon_info { right: 68px } .coupon_my.type_medium .coupon_txt_area .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .coupon_my.type_medium .coupon_txt_area .txt_limit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .coupon_my.type_medium .coupon_state .txt:only-child { font-size: 13px; line-height: 15px } .coupon_my.type_modal_medium .icon_coupon_bar { height: 71px } .coupon_my.type_modal_medium .icon_coupon { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 76px; height: 76px } .coupon_my.type_modal_medium .coupon_txt_area .txt { display: block; display: -webkit-box; overflow: hidden; max-height: 40px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; line-height: 20px } .coupon_my.type_modal_medium .coupon_txt_area .txt_limit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .coupon_my.type_modal_small .icon_coupon_bar { height: 60px } .coupon_my.type_modal_small .icon_coupon { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 58px; height: 66px } .coupon_my.type_modal_small .coupon_thumb_area { margin-left: 14px } .coupon_my.type_modal_small .coupon_thumb_area .thumb { width: 30px; height: 30px } .coupon_my.type_modal_small .coupon_thumb_area .icon_discount { width: 31px; height: 30px; background-position: 0px -76px } .coupon_my.type_modal_small .coupon_thumb_area .icon_gift { width: 30px; height: 30px; background-position: -114px 0px } .coupon_my.type_modal_small .coupon_txt_area { padding-right: 15px } .coupon_my.type_modal_small .coupon_txt_area .txt { display: block; display: -webkit-box; overflow: hidden; max-height: 36px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size: 14px; font-weight: 600; line-height: 18px; text-align: left } .coupon_my.type_modal_small .coupon_txt_area .txt_limit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .coupon_my.type_extra_small .coupon_shape_wrapper { display: -webkit-box; display: -ms-flexbox; display: flex } .coupon_my.type_extra_small .coupon_shape_wrapper::before { content: ""; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; z-index: 10; border-radius: 12px 0 0 12px; border: 1px solid; border-right-width: 0; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-elevated-surface) } .coupon_my.type_extra_small .icon_coupon { -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 59px; height: 61px } .coupon_my.type_extra_small .coupon_info { right: 53px } .coupon_my.type_extra_small .coupon_thumb_area { margin-left: 14px } .coupon_my.type_extra_small .coupon_txt_area .txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; margin-top: 0; line-height: 20px } .coupon_my.type_extra_small .coupon_txt_area .txt_date { margin-top: 0; line-height: 20px } .coupon_my.type_extra_small .coupon_txt_area .txt_limit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal } .coupon_my.type_extra_small .coupon_state { width: 53px } .coupon_my.type_extra_small .coupon_state .txt:only-child { font-size: 13px; font-weight: 700; line-height: 16px } .coupon_thumb_area { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-left: 16px } .coupon_thumb_area .coupon_thumb { display: block; position: relative; width: 100% } .coupon_thumb_area .coupon_thumb .thumb { position: relative; vertical-align: top; width: 36px; height: 36px; border-radius: 9px; -o-object-fit: cover; object-fit: cover } .coupon_thumb_area .coupon_thumb::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; border: 1px solid; border-color: rgba(0,0,0,.07); border-radius: 9px } .coupon_thumb_area .icon_discount { width: 36px; height: 36px; background-position: 0px 0px; vertical-align: top } .coupon_thumb_area .icon_gift { width: 36px; height: 36px; background-position: -38px -38px; vertical-align: top } @media screen and (max-width: 320px) { .coupon_my.state_disabled.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_check_disabled.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_disabled_clickable.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_denied_check.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_used.type_modal_medium .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_large .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_expired.type_modal_medium .coupon_thumb_area .icon_discount { background-image:url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 30px; height: 30px; background-position: -65px -76px } .coupon_my.state_disabled.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_check_disabled.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_disabled_clickable.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_denied_check.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_used.type_modal_medium .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_large .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_expired.type_modal_medium .coupon_thumb_area .icon_gift { background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 30px; height: 30px; background-position: -114px -64px } .coupon_my.state_added.type_medium .coupon_thumb_area .icon_discount,.coupon_my.state_added.type_modal_medium .coupon_thumb_area .icon_discount { background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 30px; height: 30px; background-position: -33px -76px } .coupon_my.state_added.type_medium .coupon_thumb_area .icon_gift,.coupon_my.state_added.type_modal_medium .coupon_thumb_area .icon_gift { background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 30px; height: 30px; background-position: -114px -32px } .coupon_my.type_large .coupon_thumb_area .thumb { width: 30px; height: 30px } .coupon_my.type_large .coupon_thumb_area .icon_discount { background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 31px; height: 30px; background-position: 0px -76px } .coupon_my.type_large .coupon_thumb_area .icon_gift { background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 30px; height: 30px; background-position: -114px 0px } .coupon_my.type_medium .coupon_thumb_area .thumb { width: 30px; height: 30px } .coupon_my.type_medium .coupon_thumb_area .icon_discount { background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 31px; height: 30px; background-position: 0px -76px } .coupon_my.type_medium .coupon_thumb_area .icon_gift { background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 30px; height: 30px; background-position: -114px 0px } .coupon_my.type_modal_medium .coupon_thumb_area .thumb { width: 30px; height: 30px } .coupon_my.type_modal_medium .coupon_thumb_area .icon_discount { background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 31px; height: 30px; background-position: 0px -76px } .coupon_my.type_modal_medium .coupon_thumb_area .icon_gift { background-image: url(/public/images/sprites/sp_coupon-6bb13de1.png); background-size: 144px 131px; width: 30px; height: 30px; background-position: -114px 0px } } .coupon_profile { -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,.08); box-shadow: 0 1px 6px 0 rgba(0,0,0,.08); position: relative; margin: -43px 18px 0; border-radius: 12px; background-color: #fff; background-color: var(--booking-color-surface); z-index: 1 } @media screen and (min-width: 720px) { .coupon_profile { max-width:684px; margin: -43px auto 0 } } .coupon_profile.order_view { margin: 20px 14px 0 } .coupon_profile+.coupon_message { margin-top: 24px } .coupon_profile .profile_info { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 18px } .coupon_profile .profile_info .info_thumb { min-width: 53px; height: 53px; margin-right: 12px } .coupon_profile .profile_info .info_thumb .thumb { overflow: hidden; position: relative; display: block; width: 53px; height: 53px; border-radius: 50% } .coupon_profile .profile_info .info_thumb .thumb::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%; background-color: rgba(0,0,0,.05) } .coupon_profile .profile_info .info_thumb .thumb img { -o-object-fit: cover; object-fit: cover } .coupon_profile .profile_info .info_detail { overflow: hidden } .coupon_profile .profile_info .detail_name { display: inline-block; vertical-align: top; font-size: 18px; line-height: 24px; font-weight: bold; color: #000; color: var(--booking-color-gray0) } .coupon_profile .profile_info .detail_text { color: #444447; color: var(--booking-color-gray20) } .coupon_profile .profile_info .detail_text .text { display: inline-block; vertical-align: top; white-space: nowrap } .coupon_profile .profile_info .detail_text .text+.text::before { content: ""; display: inline-block; width: 1px; height: 12px; margin: 0 9px; background-color: rgba(72,72,76,.5); vertical-align: -1px } .coupon_profile .profile_info .detail_text .number { font-weight: bold; color: #18c85a } .coupon_profile .profile_info .btn_more { position: absolute; top: 20px; right: 0; padding: 0 20px; background-color: rgba(0,0,0,0); outline: none } .coupon_profile .profile_info .btn_more .ico_more { width: 3px; height: 15px; background-position: -684px -247px; opacity: .3; color: rgba(0,0,0,0) } .coupon_profile .profile_info .box_more { -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,.14); box-shadow: 0 1px 6px 0 rgba(0,0,0,.14); position: absolute; top: 50px; right: 20px; min-width: 159px; border: 1px solid; border-radius: 5px; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface) } .coupon_profile .profile_info .box_more .more_link { display: block; padding: 0 36px 0 16px; font-size: 16px; line-height: 42px; color: #555558; color: var(--booking-color-gray30) } .coupon_profile .profile_info .box_more .more_link .ico_disconnect { width: 17px; height: 17px; background-position: -430px -495px; margin-right: 7px; vertical-align: -2px } .coupon_profile .profile_info .box_more .more_link .ico_arrow { position: relative; display: inline-block; width: 7px; height: 11px; position: absolute; top: 22px; right: 16px } .coupon_profile .profile_info .box_more .more_link .ico_arrow:before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-left: -2px; border-top: 1px solid #333; border-right: 1px solid #333 } .coupon_profile .profile_text { padding: 9px; background-color: rgba(201,201,201,.1); font-size: 15px; line-height: 20px; font-weight: 500; text-align: center; color: #444447; color: var(--booking-color-gray20) } .coupon_profile .ico_arrow { position: relative; display: inline-block; width: 8px; height: 14px; position: absolute; top: 50%; right: 18px; margin-top: -7px } .coupon_profile .ico_arrow:before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-left: -2px; border-top: 2px solid #333; border-right: 2px solid #333 } .coupon_profile .guide_text { border-radius: 0 0 12px 12px; background-color: #f8fafb; font-size: 14px; line-height: 35px; text-align: center; color: #666 } .coupon_stamp { margin: 20px 18px 0 } .coupon_stamp.store { margin-top: 58px } .coupon_bookmark_add+.coupon_stamp { margin-top: 36px } .coupon_stamp+.coupon_ticket { margin-top: 22px } .coupon_stamp .stamp_header { margin-bottom: 17px } .coupon_stamp .stamp_header:before,.coupon_stamp .stamp_header:after { content: " "; display: table } .coupon_stamp .stamp_header:after { clear: both } .coupon_stamp .stamp_header .title { font-weight: 700; font-size: 17px; line-height: 20px; color: #222225; color: var(--booking-color-gray10) } .coupon_stamp .stamp_header .title .now { font-weight: bold; color: #03aa5a } .coupon_stamp .stamp_header .stamp_info_area { position: relative; float: right; margin-top: 2px; padding-right: 23px; font-size: 14px; line-height: 20px; color: #03c75a } .coupon_stamp .stamp_header .stamp_info_area .link { position: absolute; right: 0px; top: -3px; padding: 5px; width: 14px; height: 14px } .coupon_stamp .stamp_header .stamp_info_area .link .ico_info_green { width: 14px; height: 14px; background-position: -64px -418px; content: "" } .coupon_stamp .stamp_header .guide_box { position: absolute; top: 25px; right: 0; min-width: 175px; padding: 0 37px 0 18px; border-radius: 5px; -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,.14); box-shadow: 0 1px 6px 0 rgba(0,0,0,.14); border: solid 1px; border-color: #d9d9dc; border-color: var(--booking-color-gray70); background-color: #fff; background-color: var(--booking-color-surface); line-height: 44px; font-size: 16px; color: #555558; color: var(--booking-color-gray30); z-index: 30 } .coupon_stamp .stamp_header .guide_box .btn_close { position: absolute; top: 0; right: 3px; padding: 0 15px; font-size: 19px } .coupon_stamp .stamp_header .guide_box .btn_close .ico_close { position: relative; display: inline-block; width: 14px; height: 14px } .coupon_stamp .stamp_header .guide_box .btn_close .ico_close:before,.coupon_stamp .stamp_header .guide_box .btn_close .ico_close:after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background-color: var(--booking-color-gray30) } .coupon_stamp .stamp_header .guide_box .btn_close .ico_close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .coupon_stamp .stamp_header .guide_box .btn_close .ico_close:after { -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg) } .coupon_stamp .coupon_wrap { -webkit-box-shadow: 0 1px 8px 0 rgba(0,0,0,.06); box-shadow: 0 1px 8px 0 rgba(0,0,0,.06); background-color: #fff; background-color: var(--booking-color-surface); border-radius: 3px } .coupon_stamp .stamp_area { position: relative; padding: 15px 0 20px; background-color: #fff; background-color: var(--booking-color-surface) } .coupon_stamp .stamp_area::before { content: ""; position: absolute; top: -5px; left: 0; right: 0; height: 5px; background: url("../assets/bg_local_pay.png") repeat-x; background-size: auto 5px } @media(prefers-color-scheme: dark) { body.is_dark .coupon_stamp .stamp_area::before { opacity:.05 } } .coupon_stamp .stamp_title { position: relative; padding: 0 22px 10px; border-bottom: 1px solid; border-bottom-color: #e9e9ec; border-bottom-color: var(--booking-color-gray80) } .coupon_stamp .stamp_title .title { padding-right: 50px; font-size: 22px; font-weight: bold; line-height: 32px; color: #222225; color: var(--booking-color-gray10) } .coupon_stamp .stamp_title .btn_more { position: absolute; top: 7px; right: 0; height: 20px; padding: 0 20px; background-color: rgba(0,0,0,0); outline: none } .coupon_stamp .stamp_title .btn_more .ico_more { width: 4px; height: 20px; background-position: -684px -173px; color: rgba(0,0,0,0) } .coupon_stamp .stamp_title+.stamp_box { margin-top: 22px } .coupon_stamp .stamp_title+.stamp_box .stamp_list { padding-bottom: 0; border-bottom: 0 } .coupon_stamp .stamp_title+.stamp_list { margin-top: 21px } .coupon_stamp .stamp_title .box_more { -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,.14); box-shadow: 0 1px 6px 0 rgba(0,0,0,.14); position: absolute; top: 30px; right: 0; min-width: 121px; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); border-radius: 5px; background-color: #fff; background-color: var(--booking-color-surface); z-index: 100 } .coupon_stamp .stamp_title .box_more .more_link { display: block; padding: 0 22px; font-size: 16px; line-height: 42px; color: #555558; color: var(--booking-color-gray30) } .coupon_stamp .stamp_title .box_more .more_link .ico_disconnect { width: 17px; height: 17px; background-position: -430px -495px; margin-right: 7px; vertical-align: -2px } .coupon_stamp .stamp_title .count { font-size: 14px; line-height: 22px; color: #333 } .coupon_stamp .stamp_title .count .now { font-weight: bold; color: #03c75a } .coupon_stamp .stamp_title .count_text { position: absolute; bottom: 10px; right: 0; font-size: 14px; line-height: 22px; color: #333 } .coupon_stamp .stamp_box { padding: 0 20px } .coupon_stamp .stamp_box .saving_title:before,.coupon_stamp .stamp_box .saving_title:after { content: " "; display: table } .coupon_stamp .stamp_box .saving_title:after { clear: both } .coupon_stamp .stamp_box .saving_title .title { font-size: 17px; font-weight: 600; line-height: 20px; color: #222225; color: var(--booking-color-gray10) } .coupon_stamp .stamp_box .saving_title .title.stamp::before { content: ""; width: 19px; height: 19px; background-position: -373px -284px; margin-right: 5px; vertical-align: -3px } .coupon_stamp .stamp_box .saving_title .title.smart::before { content: ""; width: 18px; height: 18px; background-position: -299px -146px; margin-right: 5px; vertical-align: -3px } .coupon_stamp .stamp_box .saving_title .title .count { margin-left: 4px } .coupon_stamp .stamp_box .saving_title .title .count .now { font-weight: bold; color: #03c75a } .coupon_stamp .stamp_box .saving_title .stamp_info_area { position: relative; float: right; margin-top: 1px; font-size: 14px; line-height: 20px; color: #666 } .coupon_stamp .stamp_box .saving_title .stamp_info_area .count .now { font-weight: bold; color: #03c75a } .coupon_stamp .stamp_box .saving_title .stamp_info_area .count+.stamp_info { margin-left: 4px } .coupon_stamp .stamp_box .saving_title .stamp_info_area .stamp_info { position: relative; display: inline-block; margin-right: 23px; font-size: 14px; line-height: 20px; color: #03c75a } .coupon_stamp .stamp_box .saving_title .stamp_info_area .stamp_info .link { position: absolute; right: -23px; top: -3px; padding: 5px; width: 14px; height: 14px } .coupon_stamp .stamp_box .saving_title .stamp_info_area .stamp_info .link .ico_info_green { width: 14px; height: 14px; background-position: -64px -418px } .coupon_stamp .stamp_box .saving_title .stamp_info_area .guide_box { position: absolute; top: 25px; right: 0; min-width: 175px; padding: 0 37px 0 18px; border-radius: 5px; -webkit-box-shadow: 0 1px 6px 0 rgba(0,0,0,.14); box-shadow: 0 1px 6px 0 rgba(0,0,0,.14); border: solid 1px; border-color: #d9d9dc; border-color: var(--booking-color-gray70); background-color: #fff; background-color: var(--booking-color-surface); line-height: 44px; font-size: 16px; color: #555558; color: var(--booking-color-gray30); z-index: 30 } .coupon_stamp .stamp_box .saving_title .stamp_info_area .guide_box .btn_close { position: absolute; top: 0; right: 3px; padding: 0 15px; font-size: 19px } .coupon_stamp .stamp_box .saving_title .stamp_info_area .guide_box .btn_close .ico_close { position: relative; display: inline-block; width: 14px; height: 14px } .coupon_stamp .stamp_box .saving_title .stamp_info_area .guide_box .btn_close .ico_close:before,.coupon_stamp .stamp_box .saving_title .stamp_info_area .guide_box .btn_close .ico_close:after { content: ""; position: absolute; top: 50%; left: 50%; width: 18px; height: 2px; background-color: var(--booking-color-gray30) } .coupon_stamp .stamp_box .saving_title .stamp_info_area .guide_box .btn_close .ico_close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .coupon_stamp .stamp_box .saving_title .stamp_info_area .guide_box .btn_close .ico_close:after { -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg) } .coupon_stamp .stamp_box .saving_title+.stamp_list { margin-top: 12px } .coupon_stamp .stamp_box+.stamp_box { margin-top: 26px } .coupon_stamp .stamp_box+.stamp_box:before { content: ""; display: block; height: 1px; width: 100%; margin-bottom: 25px; background: repeating-linear-gradient(90deg, #fff, #fff 4px, #e3e3e3 0, #e3e3e3 8px) } .coupon_stamp .stamp_box .saving_info_area { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; padding: 0 15px; margin-top: 10px; border-radius: 14px; background-color: #f7f7f9; background-color: var(--booking-color-gray95); font-size: 13px; line-height: 28px; text-align: center } .coupon_stamp .stamp_box .saving_info_area .saving_count .num { font-weight: bold; color: #03c75a } .coupon_stamp .stamp_box .saving_info_area .saving_count::after { content: ""; display: inline-block; margin: 0 5px; width: 2px; height: 2px; background-color: #dbe2e6; border-radius: 1px; vertical-align: 3px } .coupon_stamp .stamp_box .saving_info_area+.stamp_list { margin-top: 21px } .coupon_stamp .stamp_btn_area { margin: 24px 20px 0 } .coupon_stamp .stamp_btn_area .btn_add { width: 100%; height: 47px; border-radius: 3px; background: -webkit-gradient(linear, right top, left top, from(#0ad18e), to(#01d760)); background: linear-gradient(270deg, #0ad18e 0%, #01d760 100%); color: #fff; font-weight: 700; font-size: 16px; line-height: 47px } .coupon_stamp .stamp_btn_area .btn_add::before { width: 13px; height: 13px; background-position: -463px -522px; content: ""; margin-right: 8px } .coupon_stamp .stamp_detail { position: relative; margin: 0 22px; border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80); font-size: 15px; line-height: 50px; text-align: center; color: #555558; color: var(--booking-color-gray30) } .coupon_stamp .stamp_detail .detail_link { display: block; color: #555558; color: var(--booking-color-gray30) } .coupon_stamp .stamp_detail .detail_link strong { color: #444447; color: var(--booking-color-gray20) } .coupon_stamp .stamp_detail .detail_link em { font-weight: bold; color: #03c75a } .coupon_stamp .stamp_detail .fn-booking-forward1 { margin-left: 3px; font-size: 11px; color: #555558; color: var(--booking-color-gray30) } .coupon_stamp .stamp_detail .tooltip { -webkit-box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); box-shadow: 0 2px 4px 0 rgba(0,0,0,.1); position: absolute; left: 50%; top: 44px; display: block; padding: 10px 35px 12px 10px; border-radius: 5px; background-color: #14a0fa; -webkit-transform: translate(-50%, 0); transform: translate(-50%, 0); font-size: 15px; line-height: 18px; white-space: nowrap; color: #fff; z-index: 10 } .coupon_stamp .stamp_detail .tooltip::after { content: ""; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -6px; -webkit-transform: rotate(135deg); transform: rotate(135deg); border-radius: 0px 10px 0 0; background-color: #14a0fa } .coupon_stamp .stamp_detail .tooltip em { font-weight: bold; color: #fef88a } .coupon_stamp .stamp_detail .tooltip .ico_close { position: relative; display: inline-block; width: 12px; height: 12px; position: absolute; top: 14px; right: 15px; color: rgba(0,0,0,0) } .coupon_stamp .stamp_detail .tooltip .ico_close:before,.coupon_stamp .stamp_detail .tooltip .ico_close:after { content: ""; position: absolute; top: 50%; left: 50%; width: 16px; height: 1px; background-color: #fff } .coupon_stamp .stamp_detail .tooltip .ico_close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .coupon_stamp .stamp_detail .tooltip .ico_close:after { -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg) } .coupon_stamp .bookmark .bookmark_agreement { padding: 24px 18px 27px } .stamp_list { position: relative; padding-bottom: 20px } .stamp_list:before,.stamp_list:after { content: " "; display: table } .stamp_list:after { clear: both } .stamp_list .stamp_item { float: left; width: 20%; text-align: center } .stamp_list .stamp_item:nth-child(n+6):nth-last-child(n+1) { margin-top: 10px } .stamp_list .stamp_item .stamp { overflow: hidden; display: inline-block; vertical-align: top; width: 52px; height: 52px; border-radius: 50% } .stamp_list .stamp_item .ico_stamp { width: 52px; height: 52px; background-position: -496px -305px } .stamp_list .stamp_item .ico_stamp_reward { width: 52px; height: 52px; background-position: -496px -359px } .stamp_list .stamp_item .img_reward { position: relative; display: block; width: inherit; height: inherit; -webkit-box-shadow: 0 1px 1px 0 rgba(0,0,0,.08); box-shadow: 0 1px 1px 0 rgba(0,0,0,.08); background-color: #fff } .stamp_list .stamp_item .img_reward::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90); border-radius: 50% } .stamp_list .stamp_item .img_reward .img { -o-object-fit: cover; object-fit: cover } .stamp_list .stamp_item .icon_reward { display: block; background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .stamp_list .stamp_item .ico_ticket_present { width: 20px; height: 20px; margin: 16px; fill: #00e3ad; vertical-align: top } .stamp_list .stamp_item .number { display: block; font-size: 20px; line-height: 52px; font-weight: 300; letter-spacing: -0.27px; font-style: italic; color: #939396; color: var(--booking-color-gray50); background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .stamp_achievement { padding: 20px 0px 0; margin: 0px 20px 0; border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80) } .stamp_achievement .achievement_item { position: relative } .stamp_achievement .achievement_item:before,.stamp_achievement .achievement_item:after { content: " "; display: table } .stamp_achievement .achievement_item:after { clear: both } .stamp_achievement .achievement_item+.achievement_item { margin-top: 7px } .stamp_achievement .achievement_item.achieved .item_number { border-color: rgba(0,0,0,0); background: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background: linear-gradient(90deg, #0ad18e 0%, #01d760 100%); color: rgba(0,0,0,0) } .stamp_achievement .achievement_item.achieved .item_number::before { width: 13px; height: 9px; background-position: -565px -347px; content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto } .stamp_achievement .achievement_item.achieved .item_text { color: #0ad18e; font-weight: 700 } .stamp_achievement .item_number { -webkit-box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); box-shadow: 0 1px 2px 0 rgba(0,0,0,.05); position: relative; float: left; width: 51px; height: 23px; margin-right: 10px; border: 1px solid; border-radius: 3px; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); font-size: 14px; line-height: 24px; font-weight: bold; letter-spacing: -0.4px; text-align: center; color: #000; color: var(--booking-color-gray0) } .stamp_achievement .item_text { overflow: hidden; display: block; font-size: 15px; color: #444447; color: var(--booking-color-gray20) } .stamp_message { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; position: absolute; top: -5px; left: 0; right: 0; bottom: 0; height: 126px; background-color: #f0f0f3; background-color: var(--booking-color-gray90); z-index: 10 } .stamp_message::before { width: 126px; height: 126px; background-position: -119px -174px; content: ""; position: absolute; top: 0; left: 50%; margin-left: -63px } .stamp_message .message_info { font-size: 17px; font-weight: 500; text-align: center; color: #000; color: var(--booking-color-gray0) } .stamp_message .message_info .ico_alert { width: 19px; height: 19px; background-position: -662px -363px } .stamp_message .highlight { color: #03c75a } .order_achievement { position: relative; padding-top: 62px; margin-bottom: 30px } .order_achievement::before { content: ""; display: block; width: 100%; height: 11px; border-radius: 8px; background: repeating-linear-gradient(90deg, #dbe2e6, #dbe2e6 1px, #f1f3f4 0, #f1f3f4 10%); background-color: #f1f3f4; background-repeat: repeat no-repeat; background-position: -1px 3px; background-size: 100% 5px } .order_achievement::after { content: ""; position: absolute; top: 65px; right: 0; width: 1px; height: 5px; border-radius: 8px; background-color: #f1f3f4 } .order_achievement .achievement_step { position: absolute; top: 0; height: 100%; min-width: 72px; line-height: 18px; text-align: center; z-index: 20 } .order_achievement .achievement_step .guide { position: absolute; top: 20px; left: 0; right: 0; padding: 5px 8px; margin: 0 9px; border: solid 1px #e4eaed; border-bottom: 3px solid #e4eaed; border-radius: 5px; background-color: #fff; font-size: 13px; color: #333; white-space: nowrap } .order_achievement .achievement_step .guide .highlight { font-weight: bold; color: #03c75a } .order_achievement .achievement_step .guide:before { content: ""; position: absolute; right: 20px; bottom: -20px; width: 0px; height: 0px; border-left: 6px solid rgba(0,0,0,0); border-right: 6px solid rgba(0,0,0,0); border-top: 10px solid #e4eaed; border-bottom: 10px solid rgba(0,0,0,0) } .order_achievement .achievement_step .guide:after { content: ""; position: absolute; right: 20px; bottom: -16px; width: 0px; height: 0px; border-left: 6px solid rgba(0,0,0,0); border-right: 6px solid rgba(0,0,0,0); border-top: 10px solid #fff; border-bottom: 10px solid rgba(0,0,0,0) } .order_achievement .achievement_step .round { position: absolute; top: 61px; left: 0; right: 0; margin: 2px auto 14px; width: 3px; height: 3px; border: 3px solid #f1f3f4; background-color: #00f154; text-align: center } .order_achievement .achievement_step .reward { position: absolute; left: 0; right: 0; bottom: -25px; padding-left: 17px; font-size: 14px; font-weight: bold; color: #eeab00; word-break: keep-all } .order_achievement .achievement_step .reward::before { width: 16px; height: 16px; background-position: -175px -398px; content: ""; position: absolute; top: 1px; left: 0 } .order_achievement .achievement_step.first { left: 20%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .order_achievement .achievement_step.second { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .order_achievement .achievement_step.last { right: 0 } .order_achievement .achievement_step.last .guide { left: auto; right: -8px; border-radius: 5px 5px 0 5px } .order_achievement .achievement_step.last .guide::before { right: -1px; bottom: -18px; border-left: 8px solid rgba(0,0,0,0); border-right: 0; border-top: 8px solid #e4eaed; border-bottom: 8px solid rgba(0,0,0,0) } .order_achievement .achievement_step.last .guide::after { right: 0; bottom: -14px; border-left: 8px solid rgba(0,0,0,0); border-right: 0; border-top: 8px solid #fff; border-bottom: 8px solid rgba(0,0,0,0) } .order_achievement .achievement_step.last.finish .guide { border-radius: 5px 5px 0 5px } .order_achievement .achievement_step.last.finish .guide::before { right: -1px; bottom: -17px } .order_achievement .achievement_step.last.finish .guide::after { right: 0; bottom: -13px } .order_achievement .achievement_step.last.finish .round { left: auto; right: -8px } .order_achievement .achievement_step.finish .guide { margin: 0 3px } .order_achievement .achievement_step.finish .guide::before { right: 26px; bottom: -17px; border-top: 8px solid #e4eaed; border-bottom: 8px solid rgba(0,0,0,0) } .order_achievement .achievement_step.finish .guide::after { right: 26px; bottom: -13px; border-top: 8px solid #fff; border-bottom: 8px solid rgba(0,0,0,0) } .order_achievement .achievement_step.finish .round { top: 57px; width: 17px; height: 17px; border-radius: 9px; border: none; background-color: #00f777 } .order_achievement .achievement_step.finish .round:before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 9px; background-color: rgba(0,0,0,.15) } .order_achievement .achievement_step.finish .round .num { position: relative; font-size: 10px; line-height: 17px; font-weight: bold; color: #fff; vertical-align: top } .order_achievement .progress_bar { position: absolute; top: 62px; left: 0; width: 5px; height: 11px; border-radius: 8px 0 0 8px; z-index: 10; background: repeating-linear-gradient(90deg, #dbe2e6, #dbe2e6 1px, #00f154 0, #00f154 10%); background-repeat: repeat no-repeat; background-color: #00f154; background-position: 0 3px; background-size: auto 5px } .order_achievement .progress_bar .stick { position: absolute; top: -2px; right: 0; width: 1px; height: 15px; background-color: #03c75a } @media screen and (max-width: 320px) { .coupon_stamp .stamp_box .saving_title .title { font-size:16px; line-height: 18px } .stamp_list .stamp_item .stamp { width: 46px; height: 46px } .stamp_list .stamp_item .ico_stamp { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.89); transform: scale(0.89) } .stamp_list .stamp_item .ico_stamp_reward { -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.89); transform: scale(0.89) } .stamp_list .stamp_item .ico_ticket_present { margin: 13px; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scale(0.9); transform: scale(0.9) } .stamp_list .stamp_item .number { line-height: 46px } } .coupon_ticket { -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.06); box-shadow: 0 2px 8px 0 rgba(0,0,0,.06); position: relative; overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; margin: 18px; border-radius: 3px } .coupon_bookmark_add+.coupon_ticket { margin-top: 40px } .coupon_ticket::before,.coupon_ticket::after { content: ""; position: absolute; right: 68px; width: 10px; height: 5px; background-color: #e9e9ec; background-color: var(--booking-color-gray80); z-index: 10 } .coupon_ticket::before { top: 0; border-bottom-left-radius: 10px; border-bottom-right-radius: 10px } .coupon_ticket::after { bottom: 0; border-top-left-radius: 10px; border-top-right-radius: 10px } .coupon_ticket .ticket_info { position: relative; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 18px 20px; background-color: #fff; background-color: var(--booking-color-surface) } .coupon_ticket .ticket_info .color_line { position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background-image: -webkit-gradient(linear, left bottom, left top, from(#4bcdcc), to(#01d760)); background-image: linear-gradient(to top, #4bcdcc, #01d760); background-color: #c9c9c9 } .coupon_ticket .ticket_info::before { content: ""; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; background-image: -webkit-gradient(linear, left bottom, left top, from(#4bcdcc), to(#01d760)); background-image: linear-gradient(to top, #4bcdcc, #01d760); background-color: #c9c9c9 } .coupon_ticket .ticket_info::after { content: ""; position: absolute; top: 8px; right: 0; bottom: 8px; border-right: 1px dashed; border-right-color: #e9e9ec; border-right-color: var(--booking-color-gray80) } .coupon_ticket .ticket_info .dashed { content: ""; position: absolute; top: 8px; right: 0; bottom: 8px; border-right: 1px dashed; border-right-color: #d7f1e5; border-right-color: var(--booking-color-green90) !important; z-index: 10 } .coupon_ticket .ticket_info .info_title { font-size: 14px; font-weight: bold; color: #03c75a } .coupon_ticket .ticket_info .info_text { font-weight: bold; color: #222225; color: var(--booking-color-gray10) } .coupon_ticket .ticket_info .info_text2 { display: inline-block; vertical-align: top; font-size: 14px; color: #939396; color: var(--booking-color-gray50) } .coupon_ticket .ticket_info .info_text2 .fn-forward2 { margin-left: 1px; font-size: 11px } .coupon_ticket .ticket_info .info_text2.point { color: #fc4c42 } .coupon_ticket .ticket_info .info_text2+.info_text2::before { content: ""; display: inline-block; vertical-align: 3px; width: 3px; height: 3px; margin: 0 5px; border-radius: 50%; background-color: #dedede } .coupon_ticket .ticket_info .info_text2+.info_name::before { content: ""; display: inline-block; vertical-align: 3px; width: 1px; height: 12px; margin: 0 8px; vertical-align: -2px; background-color: rgba(0,0,0,.05) } .coupon_ticket .ticket_info .info_name { display: inline-block; vertical-align: top; font-size: 14px; color: #8f8f8f } .coupon_ticket .ticket_info .ico_link { position: relative; display: inline-block; width: 9px; height: 15px; position: absolute; top: 50%; right: 20px; margin-top: -7.5px } .coupon_ticket .ticket_info .ico_link:before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-left: -3px; border-top: 2px solid #333; border-right: 2px solid #333 } .coupon_ticket .ticket_use { width: 73px } .coupon_ticket .ticket_use .btn_use { position: relative; width: 100%; height: 100%; font-size: 13px; outline: none; background-color: #fafafb; background-color: var(--booking-color-gray99); color: #444447; color: var(--booking-color-gray20) } .coupon_ticket .ticket_use .btn_use .ico_btn { width: 20px; height: 20px; background-position: -662px -247px } .coupon_ticket .ticket_use .btn_use .cart_background { position: absolute; top: 0; left: 0; height: 100%; width: 100%; background-color: #a4e0c4; background-color: var(--booking-color-green80); opacity: .03 } .coupon_ticket .ticket_use .btn_use .ico_cart_empty { width: 20px; height: 20px; fill: #03c75a } .coupon_ticket .ticket_use .btn_use .text { display: block; line-height: 16px } .coupon_ticket.use .btn_use { background-color: #f8fafb; color: #8f8f8f } .coupon_ticket.use .btn_use .ico_btn { width: 19px; height: 17px; background-position: -409px -495px } .coupon_ticket.ready .btn_use { background-color: #f8fafb; color: #8f8f8f } .coupon_ticket.ready .btn_use .ico_btn { width: 18px; height: 18px; background-position: -662px -435px } .coupon_ticket.qr_code .btn_use .ico_btn { width: 20px; height: 20px; background-position: -662px -315px } .coupon_ticket.unusable .ticket_info::before { background-image: none } .coupon_ticket.unusable .info_title,.coupon_ticket.unusable .info_text { color: #939396; color: var(--booking-color-gray50) } .coupon_ticket.unusable .btn_use { background-color: #fff; background-color: var(--booking-color-surface); color: #939396; color: var(--booking-color-gray50) } .coupon_ticket.unusable .btn_use .ico_btn { width: 20px; height: 18px; background-position: -662px -384px } .coupon_ticket.used .ticket_info::before { background-image: none } .coupon_ticket.used .info_title,.coupon_ticket.used .info_text { color: #8f8f8f } .coupon_ticket.used .btn_use { background-color: #fff; background-color: var(--booking-color-surface); color: #8f8f8f; pointer-events: none } .coupon_ticket.used .btn_use .ico_btn { width: 20px; height: 20px; background-position: -662px -293px } .coupon_type_modal .modal_layout { position: fixed; bottom: 0; left: 0; right: 0; padding: 38px 20px; border-radius: 10px 10px 0 0; -webkit-box-shadow: 0px -2px 10px rgba(0,0,0,.1); box-shadow: 0px -2px 10px rgba(0,0,0,.1); background-color: #fff; background-color: var(--booking-color-surface); z-index: 10000 } .coupon_type_modal .modal_title { display: block; font-size: 18px; line-height: 20px; font-weight: 700; letter-spacing: -0.38px; color: #000; color: var(--booking-color-gray0); text-align: center } .coupon_type_modal .modal_content { margin-top: 20px } .coupon_type_modal .modal_btn_close { position: absolute; top: 0; right: 0; width: 52px; height: 52px; font-size: 16px; color: #444447; color: var(--booking-color-gray20) } .coupon_type_modal .modal_btn_close .fn-booking-close1::before { font-weight: bold } .coupon_type_modal .link_coupon_type { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 13px 20px 15px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); -webkit-box-shadow: 0px 2px 3px rgba(0,0,0,.04); box-shadow: 0px 2px 3px rgba(0,0,0,.04); border-radius: 7px } .coupon_type_modal .link_coupon_type.disabled { opacity: .5 } .coupon_type_modal .link_coupon_type+.link_coupon_type { margin-top: 10px } .coupon_type_modal .link_coupon_type .type_img { -ms-flex-negative: 0; flex-shrink: 0; width: 68px; height: 68px } .coupon_type_modal .link_coupon_type .type_img [class*=icon_bg] { fill: #f0f0f3; fill: var(--booking-color-gray90) } .coupon_type_modal .link_coupon_type .type_info { margin-left: 9px } .coupon_type_modal .link_coupon_type .type_info .info_title { font-size: 16px; line-height: 20px; color: #222225; color: var(--booking-color-gray10) } .coupon_type_modal .link_coupon_type .type_info .info_text { margin-top: 2px; font-size: 13px; line-height: 18px; color: #555558; color: var(--booking-color-gray30) } .coupon_gift_modal { position: fixed; top: 0; left: 0; bottom: 0; width: 100%; z-index: 9999 } .coupon_gift_modal.show .dimmed { opacity: 1 } .coupon_gift_modal.show .modal_layout { -webkit-transform: translateY(0); transform: translateY(0) } .coupon_gift_modal .dimmed { opacity: 0; -webkit-transition: opacity .3s ease; transition: opacity .3s ease } .coupon_gift_modal .modal_layout { overflow: hidden; position: fixed; left: 0; bottom: 0; -webkit-transform: translateY(100%); transform: translateY(100%); display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; max-height: calc(100% - 40px); border-radius: 24px 24px 0 0; background-color: #fff; background-color: var(--booking-color-surface); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease; z-index: 10000 } .coupon_gift_modal .modal_header { padding: 20px 50px 16px 16px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 18px; font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .coupon_gift_modal .modal_body { overflow-y: auto; padding: 20px 16px } .coupon_gift_modal .modal_body .sub_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 14px; line-height: 15px; color: #939396; color: var(--booking-color-gray50) } .coupon_gift_modal .modal_body .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; margin-top: 2px; font-size: 18px; font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .coupon_gift_modal .modal_body .coupon_area { margin-top: 16px } .coupon_gift_modal .modal_body .info_list_area { margin-top: 16px; padding-top: 16px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .coupon_gift_modal .modal_body .info_list_area .info_list_title { display: block; font-size: 15px; font-weight: 600; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .coupon_gift_modal .modal_body .info_list_area .info_list+.info_list_title { margin-top: 16px } .coupon_gift_modal .modal_body .info_list_area .info_list .info_item { position: relative; margin-top: 4px; padding-left: 11px; font-size: 15px; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .coupon_gift_modal .modal_body .info_list_area .info_list .info_item::before { content: ""; position: absolute; top: 8px; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .coupon_gift_modal .modal_body .info_list_area .info_list .info_item .link_guide { color: #444447; color: var(--booking-color-gray20) } .coupon_gift_modal .modal_body .info_list_area .info_list .info_item .fn-help1 { vertical-align: -3px; margin-left: 4px; font-size: 16px; color: #0068c3; color: var(--booking-color-blue-link) } .coupon_gift_modal .modal_footer { position: relative; padding: 12px 16px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .coupon_gift_modal .modal_footer .btn_download { width: 100%; height: 44px; border-radius: 8px; background-color: #03aa5a; font-size: 15px; line-height: 20px; color: #fff } .coupon_gift_modal .modal_footer .btn_download.disabled { background-color: #c5c5c7; background-color: var(--booking-color-gray60); cursor: default } .coupon_gift_modal .modal_footer .btn_download .icon_download { vertical-align: -2px; width: 16px; margin-right: 5px; fill: #fff } .coupon_gift_modal .btn_close { position: absolute; top: 25px; right: 0; width: 50px; height: 60px } .coupon_gift_modal .btn_close .fn-booking-close1 { vertical-align: -5px; font-size: 20px; color: #77777a; color: var(--booking-color-gray40) } @media screen and (max-width: 320px) { .coupon_gift_modal .modal_header .sub_title { font-size:13px } .coupon_gift_modal .modal_header .title { margin-bottom: 57px; font-size: 16px } .coupon_gift_modal .modal_body { padding: 46px 18px 88px } .coupon_gift_modal .modal_body .info_list_area .info_list_title { font-size: 14px } .coupon_gift_modal .modal_body .info_list_area .info_list { margin-top: 1px } .coupon_gift_modal .modal_body .info_list_area .info_list .info_list_item { font-size: 13px } .coupon_gift_modal .modal_body .info_list_area .info_list .info_list_item .fn-help1 { font-size: 14px } } .birth_datepicker { z-index: 20020 !important; position: fixed; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 50%; margin-left: -135px; display: block; padding: 40px 0 88px; width: 270px; background-color: #fff; background-color: var(--booking-color-surface); border-radius: 12px; text-align: center; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box } .birth_datepicker.my .custom_select_box.open .custom_select { border-color: #00b49b; color: #00b49b } .birth_datepicker.my .custom_select_box.open .custom_select::after { border-top-color: #00b49b } .birth_datepicker.my .pop_btn_area { border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80) } .birth_datepicker.my .pop_btn_area [class*=btn_] { padding: 14px 0 17px; font-size: 16px; font-weight: 600 } .birth_datepicker.my .pop_btn_area .btn_close { width: 50%; background: rgba(0,0,0,0); color: #222225; color: var(--booking-color-gray10) } .birth_datepicker.my .pop_btn_area .btn_confirm { width: 50%; background: rgba(0,0,0,0); border-left: 1px solid; border-left-color: #e9e9ec; border-left-color: var(--booking-color-gray80); color: #00b49b; -webkit-box-sizing: border-box; box-sizing: border-box } .birth_datepicker .title { display: inline-block; font-size: 20px; line-height: 1.3; color: #444447; color: var(--booking-color-gray20) } .birth_datepicker .select_area { margin-top: 20px; white-space: nowrap } .birth_datepicker .custom_select_box { position: relative; display: inline-block } .birth_datepicker .custom_select_box+.custom_select_box { margin-left: 21px } .birth_datepicker .custom_select_box+.custom_select_box:before { content: ""; position: absolute; left: -14px; top: 24px; width: 7px; height: 1px; background-color: #4c4c4c } .birth_datepicker .custom_select_box.open .custom_select { border-color: #03c75a; font-weight: bold; color: #03c75a } .birth_datepicker .custom_select_box.open .custom_select:after { -webkit-transform: rotate(180deg); transform: rotate(180deg); border-top-color: #03c75a } .birth_datepicker .custom_select_box.open .custom_options { display: block } .birth_datepicker .custom_select_box .custom_select { position: relative; display: block; width: 63px; height: 48px; padding-left: 14px; padding-right: 25px; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); border-radius: 5px; font-size: 18px; line-height: 46px; color: #444447; color: var(--booking-color-gray20); text-align: left; -webkit-box-sizing: border-box; moz-box-sizing: border-box; box-sizing: border-box } .birth_datepicker .custom_select_box .custom_select.year { width: 85px } .birth_datepicker .custom_select_box .custom_select.selected { font-weight: bold } .birth_datepicker .custom_select_box .custom_select:after { content: ""; position: absolute; top: 22px; right: 12px; width: 0; height: 0; border-top: 5px solid; border-top-color: #444447; border-top-color: var(--booking-color-gray20); border-right: 4px solid rgba(0,0,0,0); border-left: 4px solid rgba(0,0,0,0) } .birth_datepicker .custom_select_box .custom_options { position: absolute; display: none; top: 100%; left: 50%; width: 109px; max-height: 204px; margin-top: 8px; margin-left: -55px; border-radius: 5px; -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.2); box-shadow: 0 0 8px 0 rgba(0,0,0,.2); background-color: #fff; background-color: var(--booking-color-surface); overflow: hidden; overflow-y: scroll; z-index: 1 } .birth_datepicker .custom_select_box .custom_options .custom_option+.custom_option { border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80) } .birth_datepicker .custom_select_box .custom_options .option { display: block; font-size: 18px; line-height: 44px; color: #444447; color: var(--booking-color-gray20) } .birth_datepicker .custom_select_box .custom_options .option:hover,.birth_datepicker .custom_select_box .custom_options .option:focus { background-color: #444447; background-color: var(--booking-color-gray20); font-weight: bold; color: #fff; color: var(--booking-color-gray100) } .birth_datepicker .pop_btn_area { position: absolute; bottom: 0; left: 0; right: 0 } .birth_datepicker .pop_btn_area:before,.birth_datepicker .pop_btn_area:after { content: " "; display: table } .birth_datepicker .pop_btn_area:after { clear: both } .birth_datepicker .pop_btn_area [class*=btn_] { float: left; padding: 14px 0; font-size: 18px } .birth_datepicker .pop_btn_area .btn_close { width: 40%; border-bottom-left-radius: 12px; background-color: #edf1f4; color: #333 } .birth_datepicker .pop_btn_area .btn_confirm { width: 60%; border-left: 0; border-bottom-right-radius: 12px; background-image: linear-gradient(260deg, #3accff, #2cec88); font-weight: 800; color: #fff } .birth_datepicker .pop_btn_area .btn_confirm:disabled { border-left: 1px solid #d5dadd; background: #edf1f4; font-weight: normal; color: #333 } @media screen and (min-width: 375px) { .birth_datepicker { width:324px; margin-left: -162px } } .section_booking_info .booking_inner { padding: 8px 16px 40px; -webkit-box-sizing: border-box; box-sizing: border-box } .section_booking_info .booking_guide_area { padding: 12px; border-radius: 12px; background-color: #f7f7f9; background-color: var(--booking-color-gray95) } .section_booking_info .booking_guide_area .guide_item { position: relative; padding-left: 9px; font-size: 15px; color: #444447; color: var(--booking-color-gray20) } .section_booking_info .booking_guide_area .guide_item.type_green::before { background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .section_booking_info .booking_guide_area .guide_item.type_green .label { font-weight: 700; color: #03aa5a; color: var(--booking-color-green50) } .section_booking_info .booking_guide_area .guide_item.ellipsis { display: -webkit-box; display: -ms-flexbox; display: flex } .section_booking_info .booking_guide_area .guide_item.ellipsis .label { -webkit-box-flex: 0; -ms-flex: none; flex: none } .section_booking_info .booking_guide_area .guide_item.ellipsis .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; margin-right: 4px } .section_booking_info .booking_guide_area .guide_item.ellipsis .btn_more { -webkit-box-flex: 0; -ms-flex: none; flex: none; font-size: 15px; color: #939396; color: var(--booking-color-gray50); text-decoration: underline } .section_booking_info .booking_guide_area .guide_item.ellipsis .btn_more .fn-booking-forward1 { margin-left: 2px; font-size: 12px } .section_booking_info .booking_guide_area .guide_item::before { content: ""; position: absolute; top: 10px; left: 0; width: 3px; height: 3px; border-radius: 50%; background-color: #c5c5c7; background-color: var(--booking-color-gray60); background-color: #fc4c4e; background-color: var(--booking-color-emphasis) } .section_booking_info .booking_guide_area .guide_item+.guide_item { margin-top: 4px } .section_booking_info .booking_guide_area .label { margin-right: 4px; color: #fc4c4e; color: var(--booking-color-emphasis) } .section_booking_info .booking_guide_area .label .icon { vertical-align: -2px; width: 15px; height: 16px; margin-right: 4px; fill: #03aa5a; fill: var(--booking-color-green50) } .section_booking_info .booking_guide_area+.booking_info_title { margin-top: 20px } .section_booking_info .booking_info_title { font-size: 16px; font-weight: 500; line-height: 20px; letter-spacing: -0.4px } .section_booking_info .booking_info_title+.status_card { margin-top: 12px } .section_booking_info .booking_info_desc { margin-top: 6px; font-size: 14px; line-height: 20px; color: #555558; color: var(--booking-color-gray30) } .section_booking_info .booking_radio_checkbox { margin-top: 28px } .section_booking_info .booking_radio_checkbox .title_wrap { display: -webkit-box; display: -ms-flexbox; display: flex } .section_booking_info .booking_radio_checkbox .title_wrap .icon { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-top: 1px; margin-right: 6px } .section_booking_info .booking_radio_checkbox .title_wrap .link { font-size: 15px; line-height: 20px; color: #0068c3; color: var(--booking-color-blue-link) } .section_booking_info .booking_radio_checkbox .title_wrap .link .fn-booking-forward1 { margin-top: 6px; margin-left: 4px; font-size: 12px; vertical-align: -1px } .section_booking_info .booking_radio_checkbox .ico_car_check { width: 18px; height: 18px; fill: #222225; fill: var(--booking-color-gray10) } .section_booking_info .booking_radio_checkbox .box_radio_checkbox { margin-top: 12px } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .box_item+.box_item { margin-top: 8px } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .input:checked+.label { padding: 14.5px; border-width: 1.5px; border-color: #0ad18e; background-color: #f2fbf7; background-color: var(--booking-color-green99) } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .input:checked+.label .ico_check { background-color: #03aa5a; border-color: #03aa5a } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .input:checked+.label .ico_check .fn-booking-check2 { display: block } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .label { display: -webkit-box; display: -ms-flexbox; display: flex; gap: 8px; padding: 15px; border-radius: 8px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .state_icon { -ms-flex-negative: 0; flex-shrink: 0 } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .state_icon .ico_check { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid; border-color: #c5c5c7; border-color: var(--booking-color-gray60) } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .state_icon .ico_check .fn-booking-check2 { display: none; font-size: 12px; color: #fff } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .text1 { font-size: 15px; font-weight: 600; line-height: 20px; color: #222225; color: var(--booking-color-gray10) } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .text2 { font-size: 13px; line-height: 20px; color: #77777a; color: var(--booking-color-gray40) } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .price_area { -ms-flex-negative: 0; flex-shrink: 0; margin-left: auto } .section_booking_info .booking_radio_checkbox .box_radio_checkbox .price { font-size: 15px; font-weight: 600; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .section_booking_info .booking_radio_checkbox .guide { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 12px; font-size: 13px; line-height: 20px; letter-spacing: -0.4px; color: #939396; color: var(--booking-color-gray50); word-break: keep-all } .section_booking_info .booking_radio_checkbox .guide .fn-info1 { font-size: 15px; margin-top: 2px; margin-right: 4px } .section_booking_info .booking_button_area { padding-top: 12px } .section_booking_info .booking_button_area .button_row { display: -webkit-box; display: -ms-flexbox; display: flex } .section_booking_info .booking_button_area .button_row+.button_row { margin-top: 10px } .section_booking_info .booking_button_area .button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 15px 0; border-radius: 8px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); font-size: 15px; font-weight: 500; line-height: 18px; color: #444447; color: var(--booking-color-gray20); text-align: center } .section_booking_info .booking_button_area .button.disabled { border: 0; background-color: #f0f0f3; background-color: var(--booking-color-background); color: #c5c5c7; color: var(--booking-color-gray60); cursor: default } .section_booking_info .booking_button_area .button+.button { margin-left: 8px } .section_booking_info .booking_button_area .button .fn-share1 { font-size: 18px; vertical-align: -3px; margin-right: 7px } .section_booking_info .booking_delivery_info { display: block; padding: 32px 0 20px; margin: 0 12px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .section_booking_info .booking_delivery_info[open] .delivery_summary .fn-booking-down1 { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .section_booking_info .booking_delivery_info+.booking_charge .booking_price_info:first-child { margin-top: 20px } .section_booking_info .booking_delivery_info .delivery_summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; font-size: 18px; font-weight: 600; letter-spacing: -0.5px; color: #222225; color: var(--booking-color-gray10); cursor: pointer } .section_booking_info .booking_delivery_info .delivery_summary .fn-booking-down1 { font-size: 13px; color: #77777a; color: var(--booking-color-gray40) } .section_booking_info .booking_delivery_info .delivery_summary::-webkit-details-marker { display: none } .section_booking_info .booking_delivery_info .delivery_details { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 12px } .section_booking_info .booking_delivery_info .delivery_details .title { -ms-flex-negative: 0; flex-shrink: 0; width: 80px; font-size: 15px; line-height: 20px; color: #939396; color: var(--booking-color-gray50) } .section_booking_info .booking_delivery_info .delivery_details .desc { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 15px; font-weight: 600; line-height: 20px; color: #222225; color: var(--booking-color-gray10) } .section_booking_info .booking_delivery_info .delivery_details .phone { font-weight: 400 } .section_booking_info .booking_delivery_info .delivery_details .phone::before { content: ""; display: inline-block; vertical-align: 4px; margin: 0 4px; width: 3px; height: 3px; border-radius: 50%; background-color: #c5c5c7; background-color: var(--booking-color-gray60) } .section_booking_info .booking_delivery_info .delivery_details .address { display: block; padding-top: 4px; font-weight: 400; color: #444447; color: var(--booking-color-gray20) } .booking_charge { padding: 0 12px } .booking_charge .booking_price_info:first-child { margin-top: 28px } .booking_charge .booking_price_info.except_pay .txt { font-weight: 400 } .booking_charge .booking_price_info.except_pay .price .num { font-weight: 400 } .booking_charge .booking_price_info.ticket { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .booking_charge .booking_price_info.option { margin-top: 12px; padding-top: 12px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .booking_charge .booking_price_info.option:first-child { border-top: 0 } .booking_charge .booking_price_info.extra { padding-top: 8px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .booking_charge .booking_price_info+.booking_price_info { margin-top: 12px } .booking_charge .booking_price_info+.booking_discount_info { padding-top: 12px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .booking_charge .booking_price_info .tit { position: relative; font-size: 15px; font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .booking_charge .booking_price_info .txt_group { padding-bottom: 5px } .booking_charge .booking_price_info .txt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 20px; overflow: hidden; color: #222225; color: var(--booking-color-gray10) } .booking_charge .booking_price_info .txt .point { font-weight: 400; color: #206ae5; color: var(--booking-color-blue50) } .booking_charge .booking_price_info .sub_txt { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 4px; font-size: 14px; line-height: 20px; overflow: hidden; color: #444447; color: var(--booking-color-gray20) } .booking_charge .booking_price_info .sub_txt.gray { color: #939396; color: var(--booking-color-gray50) } .booking_charge .booking_price_info .sub_txt .price { color: #77777a; color: var(--booking-color-gray40) } .booking_charge .booking_price_info .price { -ms-flex-negative: 0; flex-shrink: 0; margin-left: 6px; font-weight: 400; color: #444447; color: var(--booking-color-gray20) } .booking_charge .booking_price_info .price .num { font-weight: 600 } .booking_charge .booking_price_info .price.minus { font-weight: 700; color: #fc4c4e; color: var(--booking-color-emphasis) } .booking_charge .booking_price_info .tooltip_area { display: inline-block } .booking_charge .booking_price_info .tooltip_area .ticket_tooltip { background: none; color: #ff7b7c; font-size: 18px } .booking_charge .booking_price_info .tooltip_area .ticket_tooltip .fn-info1 { vertical-align: -3px } .booking_charge .booking_price_info .tooltip_area .tooltip_box { position: absolute; top: 28px; left: 0; right: 0; z-index: 10 } .booking_charge .booking_price_info .tooltip_area .tooltip_box:before { content: ""; position: absolute; top: -4px; left: 77px; width: 7px; height: 7px; background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid #ff7b7c; border-width: 1px 0 0 1px; -webkit-transform: rotate(45deg); transform: rotate(45deg) } .booking_charge .booking_price_info .tooltip_area .tooltip_txt { padding: 10px 13px 11px; border: 1px solid #ff7b7c; border-radius: 5px; background-color: #fff; background-color: var(--booking-color-surface); -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.1); box-shadow: 0 2px 3px 0 rgba(0,0,0,.1); font-size: 14px; line-height: 20px; color: #ff5658; font-weight: normal } .booking_charge .booking_discount_info { margin-top: 12px } .booking_charge .booking_discount_info .discount_summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .booking_charge .booking_discount_info .discount_summary .btn_more { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 15px; font-style: normal; font-weight: 600; line-height: 20px; color: #222225; color: var(--booking-color-gray10) } .booking_charge .booking_discount_info .discount_summary .btn_more.active .fn-down2 { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .booking_charge .booking_discount_info .discount_summary .ico_discount { -ms-flex-negative: 0; flex-shrink: 0; width: 15px; height: 15px; margin-right: 4px } .booking_charge .booking_discount_info .discount_summary .fn-down2 { margin-left: 4px; font-size: 14px; color: #77777a; color: var(--booking-color-gray40) } .booking_charge .booking_discount_info .discount_summary .fn-down2::before { font-weight: bold } .booking_charge .booking_discount_info .discount_summary .price { font-size: 15px; line-height: 20px; color: #fc4c4e; color: var(--booking-color-emphasis) } .booking_charge .booking_discount_info .discount_summary .price .num { font-weight: 600 } .booking_charge .booking_discount_info .discount_detail { margin-top: 8px } .booking_charge .booking_discount_info .discount_detail .discount_row { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between } .booking_charge .booking_discount_info .discount_detail .discount_row+.discount_row { margin-top: 3xp } .booking_charge .booking_discount_info .discount_detail .tit { font-size: 14px; line-height: 18px; color: #444447; color: var(--booking-color-gray20) } .booking_charge .booking_discount_info .discount_detail .btn_cancel { vertical-align: -1px; padding: 0 5px; font-size: 12px; line-height: 18px; color: #939396; color: var(--booking-color-gray50) } .booking_charge .booking_discount_info .discount_detail .btn_cancel .fn-cancel::before { font-weight: bold } .booking_charge .booking_discount_info .discount_detail .price { font-size: 14px; line-height: 18px; color: #77777a; color: var(--booking-color-gray40) } .booking_charge .booking_discount_info .discount_detail .sub_txt { position: relative; margin-top: 3px; margin-left: 15px; font-size: 13px; line-height: 17px; letter-spacing: -0.4px; color: #939396; color: var(--booking-color-gray50) } .booking_charge .booking_discount_info .discount_detail .sub_txt::before { content: ""; position: absolute; left: -12px; top: 4px; width: 6px; height: 6px; border-width: 0 0 1px 1px; border-style: solid; border-color: #939396; border-color: var(--booking-color-gray50) } .booking_charge .booking_price_total { overflow: hidden; margin-top: 12px; padding-top: 16px; border-top: 2px solid; border-color: #222225; border-color: var(--booking-color-gray10) } .booking_charge .booking_price_total:only-child { border-top: none; margin: 12px 0 -12px } .booking_charge .booking_price_total .tit { font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .booking_charge .booking_price_total .tit .ico_npay { width: 52px; height: 18px; margin-right: 4px; fill: #000; fill: var(--booking-color-gray0); vertical-align: -3px } .booking_charge .booking_price_total .price { float: right; font-size: 20px; color: #fc4c4e; color: var(--booking-color-emphasis) } .booking_charge .booking_price_total .price.no_emphasis { color: #222225; color: var(--booking-color-gray10) } .booking_charge .booking_price_total .price.txt { font-size: 16px; font-weight: 600 } .booking_charge .booking_price_total .price .num { font-weight: 600 } .booking_charge .booking_price_total .price .original_price { margin-right: 8px; font-size: 15px; font-weight: 400; color: #c5c5c7; color: var(--booking-color-gray60) } .booking_charge .booking_price_total .price_on_site { padding-bottom: 12px; margin-bottom: 12px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .booking_charge .booking_price_total .price_on_site .price { font-size: 18px; color: #222225; color: var(--booking-color-gray10) } .booking_charge .booking_price_total .fn-info1 { font-size: 15px; margin-top: 2px; margin-right: 4px } .booking_charge .booking_price_total .guide { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 4px; font-size: 13px; line-height: 20px; letter-spacing: -0.4px; color: #206ae5; color: var(--booking-color-blue50) } .booking_charge .booking_price_total .guide.type_gray { color: #939396; color: var(--booking-color-gray50) } .booking_charge .booking_price_total .price_be_added { padding-top: 16px; margin-top: 16px; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .booking_charge .booking_price_total .price_be_added .price_info { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 4px; font-size: 15px; line-height: 18px } .booking_charge .booking_price_total .price_be_added .left_txt { color: #444447; color: var(--booking-color-gray20) } .booking_charge .booking_price_total .price_be_added .btn_help { line-height: 18px; color: #0068c3; color: var(--booking-color-blue-link); vertical-align: top } .booking_charge .booking_price_total .price_be_added .btn_help .fn { margin-left: 4px; font-size: 16px; vertical-align: -3px; -webkit-text-stroke: .2px } .booking_charge .booking_price_total .price_be_added .right_txt { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-left: auto; color: #77777a; color: var(--booking-color-gray40) } .booking_charge .booking_price_total .price_refund { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .booking_charge .booking_price_total .price_refund:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none } .booking_charge .booking_price_total .price_refund .price { font-size: 16px; color: #444447; color: var(--booking-color-gray20) } .booking_charge .booking_price_total .price_refund .fee { margin-top: 8px; line-height: 20px } .booking_charge .booking_price_total .price_refund .fee .txt { font-size: 15px } .booking_charge .booking_price_total .price_refund .fee .price { font-size: 15px } .booking_charge .booking_price_total .price_refund .fee .price .num { font-weight: 400 } .booking_charge .booking_price_total .guide_gray { margin-top: 4px; font-size: 14px; line-height: 20px; color: #939396; color: var(--booking-color-gray50) } .booking_charge .booking_deposit_info { margin-top: 24px; padding-top: 18px; border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90); line-height: 20px } .booking_charge .booking_deposit_info .title { font-weight: 600; color: #222225; color: var(--booking-color-gray10) } .booking_charge .booking_deposit_info .text { margin-top: 4px; font-size: 15px; color: #444447; color: var(--booking-color-gray20) } .booking_charge .booking_deposit_info .text strong { font-weight: 600 } .booking_charge .booking_deposit_info .guide { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 4px; font-size: 14px; color: #206ae5; color: var(--booking-color-blue50) } .booking_charge .booking_deposit_info .guide .fn-info1 { -webkit-box-flex: 0; -ms-flex: none; flex: none; margin-top: 3px; margin-right: 4px; font-size: 15px } .section_booking_info .link_payment_detail { display: block; margin-top: 28px; border-radius: 6px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-elevated-surface); font-size: 14px; line-height: 36px; color: #444447; color: var(--booking-color-gray20); text-align: center } .section_booking_info .link_payment_detail .fn-booking-forward1 { vertical-align: -1px; margin-left: 4px; font-size: 11px } .section_booking_info .plus_membership { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 16px; padding: 15px; background-color: #f4f8fe; background-color: var(--booking-color-blue99); border-radius: 8px } .section_booking_info .plus_membership .membership_text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 12px; line-height: 17px; letter-spacing: -0.18px; color: #444447; color: var(--booking-color-gray20) } .section_booking_info .plus_membership .membership_text::before { content: ""; width: 48px; height: 12px; background-position: -496px -413px; vertical-align: -1px; margin-right: 7px } .section_booking_info .plus_membership .membership_text .point { font-weight: 600; color: #03aa5a } .section_booking_info .plus_membership .membership_link { display: inline-block; vertical-align: top; margin-left: auto; font-size: 13px; line-height: 17px; text-decoration: underline; color: #989898; white-space: nowrap } .section_booking_info .plus_membership .membership_link .fn-booking-forward1 { font-size: 8px; vertical-align: 0 } .section_booking_info .coupon_alert_box { margin-top: 20px } .coupon_select_wrap { margin-top: 5px } .coupon_select_wrap .custom_select_box { position: relative; font-size: 13px; line-height: 16px } .coupon_select_wrap .custom_select_box.open .custom_select { border-radius: 5px 5px 0 0 } .coupon_select_wrap .custom_select_box.open .custom_options { display: block } .coupon_select_wrap .custom_select_box .custom_select { position: relative; display: block; padding: 14px 30px 13px 15px; border-radius: 5px; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); font-weight: 600; color: #222225; color: var(--booking-color-gray10); text-decoration: none } .coupon_select_wrap .custom_select_box .custom_select .necessary_text { color: #fb4d42 } .coupon_select_wrap .custom_select_box .custom_select .fn-booking-down1 { position: absolute; top: 17px; right: 15px; color: #c9c9c9 } .coupon_select_wrap .custom_select_box .custom_select .fn-booking-down1::before { font-weight: bold } .coupon_select_wrap .custom_select_box .custom_options { overflow-y: auto; position: absolute; top: 100%; left: 0; right: 0; display: none; max-height: 165px; border-radius: 0 0 5px 5px; border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); border-top: none; background-color: #fff; background-color: var(--booking-color-surface); z-index: 1 } .coupon_select_wrap .custom_select_box .custom_options .option+.option { border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .coupon_select_wrap .custom_select_box .custom_options .option.selected { font-weight: 700 } .coupon_select_wrap .custom_select_box .custom_options .option>a { display: block; padding: 10px 15px; color: #222225; color: var(--booking-color-gray10) } .section_booking_npay { background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid; border-color: #d9d9dc; border-color: var(--booking-color-gray70); border-radius: 5px } .section_booking_npay .npay_total { padding: 13px 14px 12px; font-size: 15px; line-height: 21px; letter-spacing: -0.3px; color: #222225; color: var(--booking-color-gray10) } .section_booking_npay .npay_total .ico_npay { width: 17px; height: 17px; background-position: -340px -305px; margin-right: 2px; vertical-align: -2px } .section_booking_npay .npay_total .percent { font-size: 14px; color: #666 } .section_booking_npay .npay_total .point { font-weight: bold; color: #00cf5a } .section_booking_npay .npay_list { padding: 13px 13px 12px; border-top: solid 1px; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #f7f7f9; background-color: var(--booking-color-gray95); border-radius: 0 0 5px 5px } .section_booking_npay .npay_list .item { position: relative; font-size: 15px; line-height: 20px; color: #444447; color: var(--booking-color-gray20) } .section_booking_npay .npay_list .item:before,.section_booking_npay .npay_list .item:after { content: " "; display: table } .section_booking_npay .npay_list .item:after { clear: both } .section_booking_npay .npay_list .item+.item { margin-top: 7px } .section_booking_npay .npay_list .item.membership .info_cell { color: #555558; color: var(--booking-color-gray30); white-space: nowrap } .section_booking_npay .npay_list .item .ico_plus_membership { width: 52px; height: 17px; background-position: -260px -258px; margin-right: 6px; vertical-align: -2px } .section_booking_npay .npay_list .item .info_cell { position: relative; float: left; padding-left: 12px } .section_booking_npay .npay_list .item .info_cell::before { content: ""; position: absolute; top: 8px; left: 0; width: 4px; height: 4px; background-color: #c5c5c7; background-color: var(--booking-color-gray60); border-radius: 50% } .section_booking_npay .npay_list .item .info_cell .btn_more_info { display: inline-block; padding: 2px 4px; vertical-align: top } .section_booking_npay .npay_list .item .info_cell .btn_more_info .ico_question { width: 15px; height: 15px; background-position: -193px -398px } .section_booking_npay .npay_list .item .price_cell { float: right } .section_booking_npay .npay_list .item .price_cell .price { font-size: 15px; font-weight: bold; color: #00cf5a } .section_booking_npay .npay_list .item .price_cell .price .currency { font-weight: normal } .section_booking_npay .layer_npay { overflow: hidden; position: absolute; top: 24px; left: -15px; right: -15px; border-radius: 4px; background-color: #fff; background-color: var(--booking-color-surface); -webkit-box-shadow: 0 2px 10px 0 rgba(0,0,0,.14); box-shadow: 0 2px 10px 0 rgba(0,0,0,.14); -webkit-box-sizing: border-box; box-sizing: border-box; z-index: 10 } .section_booking_npay .layer_npay .btn_close { position: relative; display: inline-block; width: 15px; height: 15px; position: absolute; top: 0; right: 0; padding: 18px } .section_booking_npay .layer_npay .btn_close:before,.section_booking_npay .layer_npay .btn_close:after { content: ""; position: absolute; top: 50%; left: 50%; width: 20px; height: 1px; background-color: #424242 } .section_booking_npay .layer_npay .btn_close:before { -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg) } .section_booking_npay .layer_npay .btn_close:after { -webkit-transform: translate(-50%, -50%) rotate(135deg); transform: translate(-50%, -50%) rotate(135deg) } .section_booking_npay .layer_npay_header { margin: 0 18px; padding: 19px 0 11px; border-bottom: 1px solid; border-color: #222225; border-color: var(--booking-color-gray10); font-size: 16px; font-weight: bold; letter-spacing: -0.3px; color: #222225; color: var(--booking-color-gray10) } .section_booking_npay .layer_npay_content { margin: 0 18px; padding: 16px 0 13px } .section_booking_npay .layer_npay_content .npay_saving { display: table; table-layout: fixed; width: 100%; margin-bottom: 1px } .section_booking_npay .layer_npay_content .npay_saving .title { display: table-cell; width: 65px; font-size: 14px; color: #939396; color: var(--booking-color-gray50); line-height: 1.3; letter-spacing: -0.3px } .section_booking_npay .layer_npay_content .npay_saving .info-group { display: table-cell } .section_booking_npay .layer_npay_content .npay_saving .info { display: block; padding-bottom: 4px; font-size: 14px; color: #444447; color: var(--booking-color-gray20); line-height: 1.3; letter-spacing: -0.3px; word-break: keep-all } .section_booking_npay .layer_npay_content .npay_saving .info .highlight { font-weight: 600; color: #18d05a } .section_booking_npay .layer_npay_footer { padding: 16px 18px; font-size: 13px; line-height: 18px; letter-spacing: -0.3px; background-color: #f7f7f9; background-color: var(--booking-color-gray95); color: #939396; color: var(--booking-color-gray50) } .link_plus_membership { display: block; overflow: hidden; position: relative; margin-top: 13px; padding: 14px 24px 15px 80px; border-radius: 4px; background-color: rgba(11,189,103,.08); font-size: 14px; line-height: 17px; color: #444447; color: var(--booking-color-gray20) } .link_plus_membership .ico_plus_membership { width: 52px; height: 17px; background-position: -260px -258px; position: absolute; top: 16px; left: 14px; vertical-align: -2px } .link_plus_membership .ico_angle-right { position: relative; display: inline-block; width: 7px; height: 12px; position: absolute; top: 17px; right: 14px } .link_plus_membership .ico_angle-right:before { content: ""; position: absolute; top: 50%; left: 50%; width: 7px; height: 7px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-left: -2px; border-top: 1px solid #baccc3; border-right: 1px solid #baccc3 } .section_booking_subscribe_noti { position: relative; margin-top: 9px; background-color: #fff; border-top: 1px solid #e2e2e2 } .section_booking_subscribe_noti .title_wrap { overflow: hidden; height: 51px; margin: 0 20px; padding-top: 6px; border-bottom: 1px solid #e7e7e7; line-height: 51px } .section_booking_subscribe_noti .title_wrap .title { color: #242424; font-size: 18px; letter-spacing: -0.5px } .section_booking_subscribe_noti .title_wrap .nessasary_text { float: right; color: #666; font-size: 14px } .section_booking_subscribe_noti .subscribe_selection { padding: 0 21px 14px; color: #424242 } .section_booking_subscribe_noti .subscribe_selection .item .check:checked+.ico_check:before { width: 24px; height: 24px; background-position: -401px -334px } .section_booking_subscribe_noti .subscribe_selection .item .check:checked+.label { font-weight: bold } .section_booking_subscribe_noti .subscribe_selection .item .ico_check:before { position: absolute; top: 14px; left: 0; content: ""; width: 24px; height: 24px; background-position: -401px -308px } .section_booking_subscribe_noti .subscribe_selection .item .label { display: inline-block; position: relative; height: 50px; padding-left: 30px; line-height: 50px } .section_booking_subscribe_noti .subscribe_detail { padding: 14px 14px 0; background: #fafafa; border: 1px solid #e4e4e4 } .section_booking_subscribe_noti .subscribe_detail+.item { margin-top: 5px } .section_booking_subscribe_noti .subscribe_detail .detail_tit_wrap { overflow: hidden } .section_booking_subscribe_noti .subscribe_detail .ico_alarm { float: left; margin: 8px 13px 0 0; width: 37px; height: 33px; background-position: -116px -358px } .section_booking_subscribe_noti .subscribe_detail .detail_tit { overflow: hidden } .section_booking_subscribe_noti .subscribe_detail .detail_tit .point { font-weight: bold } .section_booking_subscribe_noti .subscribe_detail .detail_desc { margin-top: 7px; padding: 6px 0 10px; border: 1px solid #efefef; border-width: 1px 0; font-size: 15px } .section_booking_subscribe_noti .subscribe_detail .detail_desc .detail_item { position: relative; padding-left: 22px } .section_booking_subscribe_noti .subscribe_detail .detail_desc .num { position: absolute; top: 1px; left: 0; font-size: 20px } .section_booking_subscribe_noti .subscribe_detail .detail_desc .point { color: #0abe16 } .section_booking_subscribe_noti .subscribe_detail .detail_view { display: inline-block; height: 43px; color: #0069c2; font-size: 15px; line-height: 43px } .section_booking_subscribe_noti .subscribe_detail .detail_view .ico_right_arr { margin-left: 3px; vertical-align: -1px; position: relative; display: inline-block; width: 7px; height: 13px } .section_booking_subscribe_noti .subscribe_detail .detail_view .ico_right_arr:before { content: ""; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-left: -3px; border-top: 1px solid #0069c2; border-right: 1px solid #0069c2 } .filter_area .select_area { position: relative; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 5px } .filter_area .select_area.unfold { -webkit-box-shadow: 0 4px 6px 0 rgba(0,0,0,.15); box-shadow: 0 4px 6px 0 rgba(0,0,0,.15); border-bottom-left-radius: 0; border-bottom-right-radius: 0 } .filter_area .select_area.unfold .select_btn .fn-booking-down1 { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .filter_area .select_area .select_btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; padding: 10px 18px 11px 18px } .filter_area .select_area .select_btn .text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-weight: bold; color: #222225; color: var(--booking-color-gray10) } .filter_area .select_area .select_btn .fn-booking-down1 { margin: 5px 0 0 4px; color: #555558; color: var(--booking-color-gray30); vertical-align: 4px } .filter_area .select_area .select_btn .fn-booking-down1::before { font-weight: bold } .filter_area .layer_select { overflow: hidden; position: absolute; top: 100%; left: -1px; right: -1px; background-color: #fff; background-color: var(--booking-color-surface); border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-bottom-left-radius: 4px; border-bottom-right-radius: 4px; -webkit-box-shadow: 0 2px 8px 0 rgba(0,0,0,.03); box-shadow: 0 2px 8px 0 rgba(0,0,0,.03); z-index: 10 } .filter_area .layer_select .list_select { overflow-x: hidden; overflow-y: auto; max-height: 415px; background-color: #fff; background-color: var(--booking-color-surface); border-radius: 16px 16px 0 0 } .filter_area .layer_select .list_select .item { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; display: block; padding: 10px 18px 11px; color: #444447; color: var(--booking-color-gray20); text-align: center } .filter_area .layer_select .list_select .item+.item { border-top: 1px solid; border-color: #f0f0f3; border-color: var(--booking-color-gray90) } .filter_area .layer_select .list_select .item.checked { color: #00c87a; font-weight: bold } .filter_area .layer_select .list_select .item .thumb_wrap { display: inline-block; padding-right: 10px; vertical-align: top } .filter_area .layer_select .list_select .item .thumb_wrap .thumb { width: 36px; height: 36px; border-radius: 6px; vertical-align: top } .filter_area .tab_area.type_pc .tab_inner { padding: 6px 20px 14px; white-space: normal; text-align: center } .filter_area .tab_area.type_pc .tab_btn { margin-top: 8px } .filter_area .tab_area.type_pc .tab_btn:first-child { margin-left: 3px } .filter_area .tab_area.type_pc .tab_btn:last-child { margin-right: 3px } .filter_area .tab_area.type_pc .tab_btn:not(.active):not(.more):hover { background-color: #fff; border-color: #03c75a; color: #03c75a } .filter_area .tab_area .tab_inner { padding: 14px 0; overflow-x: auto; background-color: #f7f7f9; background-color: var(--booking-color-gray95); -webkit-overflow-scrolling: touch; white-space: nowrap } .filter_area .tab_area .tab_btn { display: inline-block; margin: 0 3px; padding: 3px 13px 4px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 16px; border: solid 1px rgba(0,0,0,.05); background-color: #fff; background-color: var(--booking-color-surface); font-size: 15px; font-weight: 500; color: #555558; color: var(--booking-color-gray30); line-height: 23px; vertical-align: middle } .filter_area .tab_area .tab_btn:first-child { margin-left: 20px } .filter_area .tab_area .tab_btn:last-child { margin-right: 20px } .filter_area .tab_area .tab_btn.active { padding: 4px 13px 5px; border: none; background-image: -webkit-gradient(linear, left top, right top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to right, #0ad18e, #01d760); font-weight: 600; color: #fff } .filter_area .tab_area .tab_btn.more { position: relative; width: 42px; background-color: #e9e9ec; background-color: var(--booking-color-gray80); border-color: #e9e9ec; border-color: var(--booking-color-gray80); text-align: center } .filter_area .tab_area .tab_btn.more .fn-more2 { font-size: 16px; color: #fff; vertical-align: -3px } .rating_area { overflow: hidden; min-height: 120px; padding: 27px 18px 12px } .rating_area .star_area { float: left; width: 45%; text-align: center } .rating_area .star_area .people { margin-top: 9px; font-size: 15px; color: #939396; color: var(--booking-color-gray50) } .rating_area .star_area .score { margin-top: 30px; font-size: 28px; line-height: 31px; font-weight: 300; color: #e9e9ec; color: var(--booking-color-gray80) } .rating_area .star_area .score::before { content: ""; margin-right: 4px; width: 20px; height: 19px; background-position: -373px -263px } .rating_area .star_area .score em { font-weight: 800; color: #222225; color: var(--booking-color-gray10) } .rating_area .star_area .score em:empty::before { content: "0.0" } .rating_area .star_area .score .per { display: inline-block; margin: 1px 2px 0; font-size: 21px; line-height: 25px; vertical-align: top } .rating_area .graph_area { position: relative; float: right; width: 55%; padding-left: 34px; -webkit-box-sizing: border-box; box-sizing: border-box } .rating_area .graph_area::before { content: ""; position: absolute; top: 7px; left: 50px; right: 51px; height: 107px; background-image: linear-gradient(#ededed 7px, transparent 0),linear-gradient(#ededed 7px, transparent 0),linear-gradient(#ededed 7px, transparent 0),linear-gradient(#ededed 7px, transparent 0),linear-gradient(#ededed 7px, transparent 0); background-image: -webkit-linear-gradient(#ededed 7px, transparent 0),-webkit-linear-gradient(#ededed 7px, transparent 0),-webkit-linear-gradient(#ededed 7px, transparent 0),-webkit-linear-gradient(#ededed 7px, transparent 0),-webkit-linear-gradient(#ededed 7px, transparent 0); background-repeat: repeat-y; background-size: 150px 200px,150px 200px,150px 200px,150px 200px,150px 200px; background-position: 0 0,0 21px,0 42px,0 63px,0 84px } .rating_area .graph_area::after { position: absolute; top: 6px; bottom: 6px; left: 0; width: 1px; background-color: #e9e9ec; background-color: var(--booking-color-gray80); content: "" } .rating_area .graph_area .list_bar .list_item { position: relative } .rating_area .graph_area .list_bar .list_item.high .bar .value { background-color: #ff5837 } .rating_area .graph_area .list_bar .list_item+.list_item { margin-top: 1px } .rating_area .graph_area .list_bar .score { position: absolute; top: 0; left: 0; font-size: 13px; color: #999 } .rating_area .graph_area .list_bar .bar { position: relative; display: block; height: 20px; padding: 7px 51px 0 16px; -webkit-box-sizing: border-box; box-sizing: border-box } .rating_area .graph_area .list_bar .bar .bg { position: relative; display: block; height: 7px; background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .rating_area .graph_area .list_bar .bar .value { position: absolute; top: 0; bottom: 0; left: 0; background-color: #ff5837 } .rating_area .graph_area .list_bar .count { position: absolute; top: 0; right: 15px; width: 36px; padding-left: 7px; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 13px; font-weight: bold; color: #ff5837; white-space: nowrap } @media screen and (max-width: 320px) { .rating_area { padding-right:0 } .rating_area .star_area { width: 55% } .rating_area .graph_area { width: 45%; padding-left: 24px } } .rating_area2 { position: relative; padding: 13px 18px 38px } .rating_area2.center { padding: 22px 0 36px; text-align: center } .section_keyword.type_home .rating_area2.center { border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } @media screen and (max-width: 720px) { .section_keyword .rating_area2.center { margin:0 18px } } .rating_area2.center .star_area .score { font-size: 22px } .rating_area2 .star_area .score { font-size: 18px; font-weight: bold; line-height: 24px; color: #222225; color: var(--booking-color-gray10); letter-spacing: -0.36px } .rating_area2 .star_area .score::before { content: ""; width: 20px; height: 19px; background-position: -373px -263px; margin-right: 4px; vertical-align: -2px } .rating_area2 .star_area .people { display: inline-block; font-size: 15px; line-height: 20px; color: #939396; color: var(--booking-color-gray50); vertical-align: 1px } .rating_area2 .star_area .people::before { content: ""; display: inline-block; width: 3px; height: 3px; margin: 0 7px; border-radius: 50%; background-color: #e1e1e1; vertical-align: 4px } .confirm_alert_con.local_pay { z-index: 9100; position: absolute; opacity: 0 } .confirm_alert_con.local_pay.show { z-index: auto; opacity: 1 } .confirm_alert_con.local_pay.show .local_order_popup { -webkit-transform: translateY(0); transform: translateY(0) } .confirm_alert_con.local_pay.hide_animation { opacity: 1 } .confirm_alert_con.local_pay.hide_animation .local_order_popup { -webkit-transform: translateY(100%); transform: translateY(100%) } .confirm_alert_con.local_pay .bg_dimm { opacity: .5 } .confirm_alert_con .local_order_popup { z-index: 9999; position: fixed; left: 0; bottom: 0; width: 100%; padding-top: 33px; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); background-color: #fff; background-color: var(--booking-color-surface); border-radius: 15px 15px 0 0; line-height: 1.3; letter-spacing: -0.3px; -webkit-box-shadow: 0 -2px 10px 0 rgba(0,0,0,.1); box-shadow: 0 -2px 10px 0 rgba(0,0,0,.1); text-align: center; -webkit-transform: translateY(100%); transform: translateY(100%); -webkit-transition: -webkit-transform .3s ease; transition: -webkit-transform .3s ease; transition: transform .3s ease; transition: transform .3s ease, -webkit-transform .3s ease } .confirm_alert_con .local_order_popup.contents_scroll { max-height: calc(100% - 48px); overflow: initial !important; padding-top: 0 } .confirm_alert_con .local_order_popup.contents_scroll .store_inner { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; width: 100%; max-width: 720px; margin: 0 auto } .confirm_alert_con .local_order_popup .popup_inner { max-width: 720px; margin: 0 auto } .confirm_alert_con .local_order_popup .title { font-size: 20px; font-family: NanumSquareEB,"Apple SD Gothic Neo",Helvetica Nenu,Helvetica,sans-serif; text-align: center } .confirm_alert_con .local_order_popup .title .desc { padding-top: 2px; font-size: 15px; font-family: -apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,sans-serif; font-weight: 400; line-height: 26px; letter-spacing: -0.3px; color: #444447; color: var(--booking-color-gray20) } .confirm_alert_con .local_order_popup .sub_title { margin: 14px 45px 0; border-radius: 15px; background-color: #f2f8fa; font-size: 15px; font-weight: 600; line-height: 30px; letter-spacing: -0.3px; text-align: center; color: #006f49 } .confirm_alert_con .local_order_popup .order_selection { max-width: 720px; margin: 29px auto 0; padding-bottom: 42px } .confirm_alert_con .local_order_popup .order_selection .selection { display: inline-block; vertical-align: top; width: 50%; -webkit-box-sizing: border-box; box-sizing: border-box } .confirm_alert_con .local_order_popup .order_selection .selection .ico_dine_in { vertical-align: top; width: 95px; height: 100px; background-position: -247px -174px } .confirm_alert_con .local_order_popup .order_selection .selection .ico_take_out { vertical-align: top; width: 95px; height: 100px; background-position: -388px -326px } .confirm_alert_con .local_order_popup .order_selection .selection .ico_drive_through { vertical-align: top; width: 95px; height: 100px; background-position: 0px -326px } .confirm_alert_con .local_order_popup .order_selection .selection .ico_to_go { vertical-align: top; width: 95px; height: 100px; background-position: -496px 0px } .confirm_alert_con .local_order_popup .order_selection .selection .ico_delivery { vertical-align: top; width: 95px; height: 100px; background-position: -356px -116px } .confirm_alert_con .local_order_popup .order_selection .selection .ico_pick_up { vertical-align: top; width: 95px; height: 100px; background-position: -97px -326px } .confirm_alert_con .local_order_popup .order_selection .selection .ico_room_delivery { vertical-align: top; width: 95px; height: 100px; background-position: -291px -326px } .confirm_alert_con .local_order_popup .order_selection .selection .ico_delivery_motorcycle { vertical-align: top; width: 95px; height: 100px; background-position: -356px -218px } .confirm_alert_con .local_order_popup .order_selection .selection .ico_robot_delivery { vertical-align: top; width: 95px; height: 100px; background-position: -194px -326px } .confirm_alert_con .local_order_popup .order_selection .selection .text { margin-top: 9px; font-size: 15px; line-height: 1.5; font-weight: 600 } .confirm_alert_con .local_order_popup .order_selection .selection .ico_beta { vertical-align: top; width: 19px; height: 11px; margin-left: 2px; fill: #fc4c4e } .confirm_alert_con .local_order_popup .order_selection .selection .btn_selection { display: inline-block; margin-top: 10px; padding: 6px 18px; font-size: 16px; font-weight: bold; color: #fff; background-color: #444447; background-color: var(--booking-color-gray20); border-radius: 28px } .confirm_alert_con .local_order_popup .order_selection .selection+.selection { border-left: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3),.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection { display: block; width: 100%; padding: 0 30px; border: 0 } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3):first-child .selection_box,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection:first-child .selection_box { border-top: 0; padding-top: 0 } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3):last-child .selection_box,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection:last-child .selection_box { border-bottom: 0; padding-bottom: 0 } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .selection_box,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .selection_box { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; padding: 12px 0; border-top: 1px solid; border-top-color: #e9e9ec; border-top-color: var(--booking-color-gray80); -webkit-box-align: center; -ms-flex-align: center; align-items: center } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .selection_box .text,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .selection_box .text { margin: 0 10px 0 25px; text-align: left; color: #444447; color: var(--booking-color-gray20) } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .selection_box .text em,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .selection_box .text em { display: block } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .selection_box .btn_selection,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .selection_box .btn_selection { margin: 0 0 0 auto; padding: 8px 20px; font-size: 16px; white-space: nowrap } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) [class^=ico_],.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection [class^=ico_] { -webkit-box-flex: 0; -ms-flex: none; flex: none } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_dine_in,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_dine_in { width: 67px; height: 70px; background-position: -593px -199px } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_take_out,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_take_out { width: 67px; height: 70px; background-position: -593px -415px } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_drive_through,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_drive_through { width: 67px; height: 70px; background-position: -593px -271px } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_delivery,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_delivery { width: 67px; height: 70px; background-position: -593px -127px } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_delivery_motorcycle,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_delivery_motorcycle { vertical-align: top; width: 67px; height: 70px; background-position: -593px -55px } .confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3) .ico_robot_delivery,.confirm_alert_con .local_order_popup .order_selection .selection:first-child:nth-last-child(3)~.selection .ico_robot_delivery { width: 67px; height: 70px; background-position: -593px -343px } .confirm_alert_con .local_order_popup .option_selection { margin: 23px 18px 36px; border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); border-radius: 5px } .confirm_alert_con .local_order_popup .option_selection .selection { display: block } .confirm_alert_con .local_order_popup .option_selection .selection .selection_box { position: relative; padding: 20px 81px 20px 20px; text-align: left } .confirm_alert_con .local_order_popup .option_selection .selection .selection_box .text { font-size: 18px; font-weight: 600; color: #444447; color: var(--booking-color-gray20) } .confirm_alert_con .local_order_popup .option_selection .selection .selection_box .btn_selection { position: absolute; top: 16px; right: 20px; padding: 0 19px; font-size: 14px; font-weight: bold; line-height: 32px; color: #fff; background-color: #444447; background-color: var(--booking-color-gray20); border-radius: 28px } .confirm_alert_con .local_order_popup .option_selection .selection+.selection { border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .confirm_alert_con .local_order_popup .category_popup_header { position: relative; max-width: 720px; margin: 0 auto } .confirm_alert_con .local_order_popup .category_popup_header .header_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; padding: 18px 18px 15px; font-size: 20px; font-weight: bold; letter-spacing: -0.3px; color: #222225; color: var(--booking-color-gray10) } .confirm_alert_con .local_order_popup .category_popup_header .btn_close { position: absolute; top: 12px; right: 8px; width: 16px; height: 16px; padding: 10px } .confirm_alert_con .local_order_popup .category_popup_header .btn_close .fn-booking-close1 { color: #000; color: var(--booking-color-gray0) } .confirm_alert_con .local_order_popup .category_popup_contents { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); text-align: left } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_inner { position: relative; overflow: hidden; max-width: 720px; margin: 0 auto; padding: 0 18px } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_inner.gradient::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 55px; background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(#fff)); background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff); background-image: -webkit-gradient(linear, left top, left bottom, from(var(--booking-color-surface-rgb)), to(var(--booking-color-surface))); background-image: linear-gradient(to bottom, var(--booking-color-surface-rgb), var(--booking-color-surface)) } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_area:first-child { margin-top: 18px } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_title { font-weight: bold; color: #444447; color: var(--booking-color-gray20) } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_list { overflow: hidden; display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -ms-flex-line-pack: start; align-content: flex-start; -webkit-transition: height .3s cubic-bezier(0.6, 0, 0.4, 1); transition: height .3s cubic-bezier(0.6, 0, 0.4, 1) } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item { width: 50% } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:only-child { width: 100% } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:only-child .item_box::after { display: none } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:nth-child(2n+1) .item_box { padding-right: 12px } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:nth-child(2n+1) .item_box::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 1px; background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:nth-child(2n+1):first-child .item_box::after { top: 12px } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:nth-child(2n) .item_box { padding-left: 12px } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:last-child,.confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:nth-last-of-type(-n + 2):not(:nth-child(even)) { padding-bottom: 36px } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:last-child .item_box,.confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item:nth-last-of-type(-n + 2):not(:nth-child(even)) .item_box { border-bottom: 0 } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item .item_box { position: relative; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 12px 0; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item .item_box .item_image { overflow: hidden; position: relative; -webkit-box-flex: 0; -ms-flex: none; flex: none; width: 38px; height: 38px; border-radius: 3px; margin-right: 10px; background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item .item_box .item_image .image { display: inline-block; vertical-align: top } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item .item_box .item_image .noimg { width: 24px; padding: 7px } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item .item_box .item_text { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item .item_box .item_text .text_box { display: block; display: -webkit-box; overflow: hidden; max-height: 48px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; font-size: 15px; line-height: 1.27; letter-spacing: -0.3px; color: #444447; color: var(--booking-color-gray20) } .confirm_alert_con .local_order_popup .category_popup_contents .category_popup_item .item_box .item_text .text_box .num { color: #04c85a } .confirm_alert_con .local_order_popup .store_inner { max-width: 720px; margin: 0 auto } .confirm_alert_con .local_order_popup .store_popup_header,.confirm_alert_con .local_order_popup .membership_popup_header { position: relative; padding: 36px 18px 20px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .confirm_alert_con .local_order_popup .store_popup_header::before,.confirm_alert_con .local_order_popup .membership_popup_header::before { content: ""; width: 37px; height: 37px; background-position: -453px -116px; position: absolute; top: -18px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .confirm_alert_con .local_order_popup .store_popup_header .header_title,.confirm_alert_con .local_order_popup .membership_popup_header .header_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; font-size: 20px; font-weight: bold; letter-spacing: -0.3px; color: #222225; color: var(--booking-color-gray10) } .confirm_alert_con .local_order_popup .store_popup_header .header_text,.confirm_alert_con .local_order_popup .membership_popup_header .header_text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; margin-top: 4px; font-size: 15px; line-height: 1.5; letter-spacing: -0.3px; color: #555558; color: var(--booking-color-gray30) } .confirm_alert_con .local_order_popup .store_popup_header .header_address,.confirm_alert_con .local_order_popup .membership_popup_header .header_address { position: relative; margin: 12px 0 5px; padding: 13px 14px 11px 39px; border-radius: 5px; background-color: #f8fafb; font-size: 15px; line-height: 1.4; font-weight: 600; letter-spacing: -0.3px; color: #222225; color: var(--booking-color-gray10); text-align: left } .confirm_alert_con .local_order_popup .store_popup_header .header_address::before,.confirm_alert_con .local_order_popup .membership_popup_header .header_address::before { content: ""; width: 15px; height: 16px; background-position: -467px -495px; position: absolute; top: 15px; left: 14px } .confirm_alert_con .local_order_popup .store_popup_header .btn_close,.confirm_alert_con .local_order_popup .membership_popup_header .btn_close { position: absolute; top: 8px; right: 8px; width: 16px; height: 16px; padding: 10px } .confirm_alert_con .local_order_popup .store_popup_header .btn_close .fn-booking-close1,.confirm_alert_con .local_order_popup .membership_popup_header .btn_close .fn-booking-close1 { color: #000; color: var(--booking-color-gray0) } .confirm_alert_con .local_order_popup .store_popup_header .address_wrap.impossible .address_box::before,.confirm_alert_con .local_order_popup .membership_popup_header .address_wrap.impossible .address_box::before { display: block } .confirm_alert_con .local_order_popup .store_popup_header .address_wrap.impossible .fn-booking-caution,.confirm_alert_con .local_order_popup .membership_popup_header .address_wrap.impossible .fn-booking-caution { display: none } .confirm_alert_con .local_order_popup .store_popup_header .address_box,.confirm_alert_con .local_order_popup .membership_popup_header .address_box { margin-top: 20px; border-radius: 5px; -webkit-box-shadow: 0 0 10px 0 rgba(0,0,0,.03); box-shadow: 0 0 10px 0 rgba(0,0,0,.03); border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface) } .confirm_alert_con .local_order_popup .store_popup_header .address_text,.confirm_alert_con .local_order_popup .membership_popup_header .address_text { font-size: 16px; font-family: -apple-system,BlinkMacSystemFont,helvetica,Apple SD Gothic Neo,sans-serif; color: #222225; color: var(--booking-color-gray10) } .confirm_alert_con .local_order_popup .membership_popup_header { margin-bottom: 82px } .confirm_alert_con .local_order_popup .membership_popup_header .header_title { line-height: 1.4 } .confirm_alert_con .local_order_popup .membership_popup_header .header_link { display: inline-block; margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 1.6; color: #0068c3 } .confirm_alert_con .local_order_popup .membership_popup_header .route_description { margin-top: 10px } .confirm_alert_con .local_order_popup .membership_popup_header+.store_popup_button { padding: 0 20px } .confirm_alert_con .local_order_popup .membership_popup_header+.store_popup_button .ico_n_logo { display: inline-block; vertical-align: -2px; width: 16px; height: 16px; margin-right: 8px; fill: #fff } .confirm_alert_con .local_order_popup .membership_popup_header+.store_popup_button .confirm_button { line-height: 46px } .confirm_alert_con .local_order_popup .store_popup_contents { overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; text-align: left } .confirm_alert_con .local_order_popup .store_popup_contents .address_changes_btns { padding: 20px 10px } .confirm_alert_con .local_order_popup .store_popup_contents .address_changes_btns .btn_changes { display: block; border-radius: 5px; font-size: 17px; text-align: center } .confirm_alert_con .local_order_popup .store_popup_contents .address_changes_btns .btn_changes+.btn_changes { margin-top: 8px } .confirm_alert_con .local_order_popup .store_popup_contents .address_changes_btns .btn_changes.default { -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.04); box-shadow: 0 2px 3px 0 rgba(0,0,0,.04); border: 1px solid #e5e5e5; line-height: 50px; color: #444447; color: var(--booking-color-gray20) } .confirm_alert_con .local_order_popup .store_popup_contents .address_changes_btns .btn_changes.active { background-image: -webkit-gradient(linear, right top, left top, from(#0ad18e), color-stop(0%, #01d760)); background-image: linear-gradient(to left, #0ad18e, #01d760 0%); font-weight: bold; line-height: 52px; color: #fff; color: var(--booking-color-gray100) } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list { margin: 20px 18px 24px } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_title { font-weight: 600; font-stretch: normal; line-height: 1.25; letter-spacing: -0.3px; color: #444447; color: var(--booking-color-gray20) } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_title .ico_store_line { display: inline-block; vertical-align: -3px; width: 16px; height: 18px; margin-right: 8px; fill: #9e9e9e } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area { margin-top: 10px; border: 1px solid; border-radius: 5px; border-color: #d9d9dc; border-color: var(--booking-color-gray70); background-color: #f7f7f9; background-color: var(--booking-color-gray95) } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .address_item { display: -webkit-box; display: -ms-flexbox; display: flex; margin: 0 18px } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .address_item+.address_item { border-top: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80) } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .address_item .no_data { display: -webkit-box; display: -ms-flexbox; display: flex; width: 100%; height: 125px; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .address_item .no_data .fn-booking-caution { font-size: 48px; color: #e9e9ec; color: var(--booking-color-gray80) } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .address_item .no_data .data_text { margin-top: 10px; font-size: 14px; letter-spacing: -0.3px; color: #555558; color: var(--booking-color-gray30) } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .item_info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 5px; padding: 12px 0; letter-spacing: -0.3px } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .item_info .info_text1 { font-size: 15px; font-weight: 600; line-height: 1.33; color: #222225; color: var(--booking-color-gray10) } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .item_info .info_text2 { margin-top: 4px; font-size: 14px; line-height: 1.43; color: #555558; color: var(--booking-color-gray30) } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .item_info .info_text2 .text+.text::before { content: ""; display: inline-block; vertical-align: 0; width: 1px; height: 12px; margin: 0 6px; background-color: #e9e9ec; background-color: var(--booking-color-gray80) } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .item_info .info_text2 .text.num { color: #fc4c42 } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .item_btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .confirm_alert_con .local_order_popup .store_popup_contents .address_popup_list .list_area .item_btn .btn_select { padding: 7px 13px 8px; -webkit-box-shadow: 0 2px 3px 0 rgba(0,0,0,.04); box-shadow: 0 2px 3px 0 rgba(0,0,0,.04); border: 1px solid #e5e5e5; border-radius: 5px; font-weight: 500; line-height: 1.25; letter-spacing: -0.3px; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); color: #555558; color: var(--booking-color-gray30) } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list { margin: 22px 18px 87px } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .soldout_item { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .soldout_item+.soldout_item { margin-top: 16px } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .item_thumb { overflow: hidden; width: 46px; height: 46px; margin-right: 9px; border-radius: 6px; background-color: rgba(0,0,0,.02) } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .item_thumb.no_img { background-color: #f0f0f3; background-color: var(--booking-color-gray90) } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .item_thumb.no_img .icon { width: 28px; height: 28px; padding: 9px } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .item_thumb .thumb { -o-object-fit: cover; object-fit: cover } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .item_desc { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-right: 10px } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .item_desc .desc_text { font-size: 15px; font-weight: 600; line-height: 1.33; letter-spacing: -0.3px; color: #222225; color: var(--booking-color-gray10) } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .item_desc .desc_price { font-size: 14px; font-weight: bold; line-height: 1.57; letter-spacing: -0.3px; color: #fc4c42 } .confirm_alert_con .local_order_popup .store_popup_contents .soldout_popup_list .list_area .item_text { margin-left: auto; padding: 10px 8px; border-radius: 5px; background-color: #f0f0f3; background-color: var(--booking-color-gray90); font-size: 14px; line-height: 1.43; letter-spacing: -0.3px; color: #8f8f8f } .confirm_alert_con .local_order_popup .store_popup_button { position: absolute; left: 0; right: 0; bottom: 0; display: -webkit-box; display: -ms-flexbox; display: flex; background-image: -webkit-gradient(linear, left top, left bottom, from(var(--booking-color-surface-rgb)), to(var(--booking-color-surface))); background-image: linear-gradient(to bottom, var(--booking-color-surface-rgb), var(--booking-color-surface) 100%); padding: 0 10px; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom) } .confirm_alert_con .local_order_popup .store_popup_button .confirm_button { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; display: block; max-width: 720px; margin: 0 auto 18px; border-radius: 5px; background-image: -webkit-gradient(linear, right top, left top, from(#0ad18e), to(#01d760)); background-image: linear-gradient(to left, #0ad18e, #01d760); font-size: 17px; line-height: 52px; font-weight: bold; text-align: center; color: #fff } .confirm_alert_con .local_order_popup .store_popup_button .confirm_button.type_white { border: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background: #fff; background: var(--booking-color-surface); font-weight: 500; color: #03c75a } .confirm_alert_con .local_order_popup .store_popup_button .confirm_button+.confirm_button { margin-left: 7px } .confirm_alert_con .local_order_popup .user_info_check_wrap { position: relative; height: 512px; max-width: 720px; margin: 0 auto; padding-bottom: 60px; text-align: left } .confirm_alert_con .local_order_popup .user_info_check_wrap .title { padding-bottom: 18px; border-bottom: 1px solid; border-color: #e9e9ec; border-color: var(--booking-color-gray80); text-align: center } .confirm_alert_con .local_order_popup .user_info_check_wrap .contents { overflow-y: auto; height: 467px } .confirm_alert_con .local_order_popup .user_form_list { padding: 0 18px } .confirm_alert_con .local_order_popup .user_form_item { padding-top: 27px } .confirm_alert_con .local_order_popup .user_form_item:first-child { padding-top: 24px } .confirm_alert_con .local_order_popup .user_form_item .form_label { display: block; margin-bottom: 8px; font-size: 18px; font-weight: 600; line-height: 1.33; letter-spacing: -0.3px; color: #444447; color: var(--booking-color-gray20) } .confirm_alert_con .local_order_popup .user_form_item .form_input { position: relative } .confirm_alert_con .local_order_popup .user_form_item .input_text { width: 100%; height: 53px; padding: 15px 66px 13px 18px; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 5px; border-color: #e9e9ec; border-color: var(--booking-color-gray80); background-color: #fff; background-color: var(--booking-color-surface); color: #444447; color: var(--booking-color-gray20); font-size: 18px } .confirm_alert_con .local_order_popup .user_form_item .btn_del { overflow: hidden; position: absolute; right: 0; padding: 14px 18px; text-align: center; background-color: rgba(0,0,0,0) } .confirm_alert_con .local_order_popup .user_form_item .btn_del i { margin-top: 2px; width: 20px; height: 20px; background-color: #d9d9d9; border-radius: 50%; font-size: 10px; color: #fff; vertical-align: top; line-height: 22px } .confirm_alert_con .local_order_popup .user_form_item .btn_change { position: absolute; top: 0; right: 0; padding: 14px 18px; background-color: rgba(0,0,0,0); font-size: 18px; font-weight: 500; line-height: 1.4; letter-spacing: -0.3px; color: #00d780 } .confirm_alert_con .local_order_popup .user_agreement .section_service_agreement { padding: 27px 18px 0 } .confirm_alert_con .local_order_popup .user_agreement .section_service_agreement .section_inner { -webkit-box-shadow: none; box-shadow: none } .confirm_alert_con .local_order_popup .user_agreement .section_service_agreement .section_title { margin-bottom: 8px; padding: 0; font-size: 18px; line-height: 1.22; pointer-events: none } .confirm_alert_con .local_order_popup .user_agreement .section_service_agreement .section_title .fn-booking { display: none } .confirm_alert_con .local_order_popup .user_agreement .section_service_agreement .section_content { padding: 0 } .confirm_alert_con .local_order_popup .user_agreement_guide .section_agreement_info { padding: 14px 18px 30px } .confirm_alert_con .local_order_popup .user_agreement_guide .section_agreement_info .section_inner { padding: 0; -webkit-box-shadow: none; box-shadow: none } .confirm_alert_con .local_order_popup .btn_confirm { position: fixed; bottom: 0; width: 100%; max-width: 720px; height: 60px; background-color: #c9c9c9; -webkit-box-shadow: 0 0 8px 0 rgba(0,0,0,.1); box-shadow: 0 0 8px 0 rgba(0,0,0,.1); line-height: 60px; font-size: 18px; font-weight: bold; letter-spacing: -0.3px; color: #fff; text-align: center } .confirm_alert_con .local_order_popup .btn_confirm.active { background-color: #00d780 } .confirm_alert_con .local_order_popup .btn_close { position: absolute; top: 0; right: 0; padding: 18px; background-color: rgba(0,0,0,0); font-size: 18px; text-align: center } .confirm_alert_con .local_order_popup .btn_close .fn-booking-close1 { color: #000; color: var(--booking-color-gray0) } .confirm_alert_con .local_order_popup .btn_close .fn-booking-close1::before { font-weight: bold } .detail_direction .direction_inner { max-width: 720px; margin: 0 auto } .detail_direction .direction_wrap { padding: 18px 21px 24px } .detail_direction .direction_wrap.no_map .direction_area { border: 0 } .detail_direction .direction_wrap.no_map .direction_detail { padding: 0 } .detail_direction .direction_area { border: 1px solid #dbdbdb } .detail_direction .direction_area .direction_detail { padding: 12px 12px 16px; color: #424242 } .detail_direction .direction_area .direction_detail .detail_txt { display: none; font-size: 19px; font-weight: 600; color: #242424; letter-spacing: -0.5px } .detail_direction .direction_area .direction_detail .detail_name { font-size: 18px; font-weight: 500; letter-spacing: -0.5px; color: #0069c2 } .detail_direction .direction_area .direction_detail .detail_box { margin-top: 4px } .detail_direction .direction_area .direction_detail .item { position: relative; padding-left: 21px } .detail_direction .direction_area .direction_detail .item [class*=ico_] { position: absolute; top: 3px; left: 0; font-size: 18px } .detail_direction .direction_area .direction_detail .item .ico_pin { width: 14px; height: 18px; background-position: 0px -418px } .detail_direction .direction_area .direction_detail .item .link { display: inline-block; text-decoration: underline; vertical-align: top; color: #0069c2 } .wrap_booking_inquiries { position: relative; min-height: 100vh; background-color: #fff } .wrap_booking_inquiries .bk_header { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; padding: 15px 0 12px; background-color: #0abe16 } .wrap_booking_inquiries .bk_header .bk_header_tit { font-weight: 400 } .wrap_booking_inquiries .bk_header .bk_header_tit .h_gnb { display: block; padding: 1px 0; font-size: 18px; line-height: 1em; color: #fff; text-align: center } .wrap_booking_inquiries .bk_header .btn_prev { position: absolute; top: 0; left: 0; height: 20px; padding: 10px 8px 17px } .wrap_booking_inquiries .bk_header .btn_prev .fn-booking { font-size: 25px; color: #fff } .wrap_booking_inquiries .bk_header .btn_open_search { position: absolute; top: 0; right: 0 } .wrap_booking_inquiries .bk_header .btn_open_search .btn_search_link { display: block; padding: 12px 13px 16px; height: 18px } .wrap_booking_inquiries .bk_header .btn_open_search .btn_search_link .fn-search { color: #fefb82; font-size: 21px } .wrap_booking_inquiries .content { padding-bottom: 10px; margin-top: 46px; background-color: #fff } .wrap_booking_inquiries .content .nodata_result_area { padding: 100px 0 54px; text-align: center } .wrap_booking_inquiries .content .nodata_result_area .nodata_text { font-size: 15px; line-height: 21px; color: #999 } .wrap_booking_inquiries .content .nodata_result_area .nodata_text .ico_caution { width: 75px; height: 75px; background-position: -88px -146px } .wrap_booking_inquiries .content .nodata_result_area .nodata_text .strong { display: block; margin-top: 4px } .wrap_booking_inquiries .content .nodata_result_area .btn_default { display: inline-block; margin-top: 24px; padding: 11px 30px 9px; border-color: #31b829; border: 1px solid; border-radius: 2px; background-color: #0abe16; color: #fff; font-size: 14px; vertical-align: top; font-weight: 400 } .wrap_booking_inquiries .content .guide_txt { padding: 12px 15px 9px; border-bottom: 1px solid #e9ecef; background-color: #fff; line-height: 18px } .wrap_booking_inquiries .content .search_area { display: none; z-index: 100; padding: 7px 9px 6px 7px; border-bottom: 1px solid #e1e4e7; background-color: #e9ecef } .wrap_booking_inquiries .content .search_area.bk_on { display: block } .wrap_booking_inquiries .content .search_area .search { position: relative; width: 100%; height: 38px; border: 1px solid #dcdfe2; border-radius: 1px; background-color: #fff } .wrap_booking_inquiries .content .search_area .search .search_input { position: relative; display: table-cell; padding: 11px 44px 9px 12px; width: 100% } .wrap_booking_inquiries .content .search_area .search .search_input .search_input_txt { width: 100%; padding: 0; border: 0; font-size: 15px; vertical-align: top; line-height: 18px } .wrap_booking_inquiries .content .search_area .search .search_input .btn_input_cancel { position: absolute; top: 4px; right: 1px; padding: 6px; border: 0; background-color: rgba(0,0,0,0); font-size: 14px; cursor: pointer } .wrap_booking_inquiries .content .search_area .search .search_input .btn_input_cancel .ico_cancel { width: 20px; height: 20px; background-position: -373px -241px } .wrap_booking_inquiries .content .search_area .search .wrap_btn_search { display: table-cell; width: 100%; vertical-align: top } .wrap_booking_inquiries .content .search_area .search .wrap_btn_search .btn_search { width: 40px; height: 38px; border: 0; background-color: rgba(0,0,0,0); cursor: pointer } .wrap_booking_inquiries .content .search_area .search .wrap_btn_search .btn_search .fn-search { color: #0abe16; font-size: 21px; vertical-align: -5px } .wrap_booking_inquiries .content .search_area .search .wrap_btn_search:after { content: ""; position: absolute; top: 0; right: 40px; bottom: 0; width: 1px; background-color: #dcdfe2 } .wrap_booking_inquiries .content .product_list { width: 312px; margin: 0 auto; padding: 20px 0 75px } .wrap_booking_inquiries .content .product_list .wrap_product_item { display: inline-block; width: 156px; padding: 0 3px; vertical-align: top; -webkit-box-sizing: border-box; box-sizing: border-box } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item { position: relative; margin-bottom: 6px } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .check { display: none } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item.on::after { content: ""; position: absolute; z-index: 10; top: 0; right: 0; bottom: 0; left: 0; border: 3px solid #fc4351; background-color: rgba(0,0,0,0) } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item.on .item_preview::after { content: ""; position: absolute; z-index: 5; top: 0; right: 0; bottom: 0; left: 0; background-color: #fff; opacity: .6 } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item.on .check { display: block; position: absolute; z-index: 10; top: 7px; right: 6px } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item.on .check .input_check { position: absolute; top: 6px; right: 5px; width: 0px } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item.on .check .ico_check { width: 23px; height: 23px; background-position: -373px -97px } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_link { display: block } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_preview { position: relative } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_preview .price { position: absolute; left: 11px; right: 12px; bottom: 9px; display: block; font-weight: bold; font-size: 15px; line-height: 19px; color: #fff } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_txt { position: relative; height: 99px; padding: 11px 10px 13px; border-right: 1px solid #eee; border-bottom: 1px solid #eeeff1; border-left: 1px solid #eee; background-color: #fff } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_txt .item_tit { display: block; display: -webkit-box; overflow: hidden; max-height: 48px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-bottom: 7px; font-weight: 600 } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_txt .item_tit .ico_box { display: inline-block } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_txt .item_tit .ico_box .ico_booking_using { width: 36px; height: 16px; background-position: -280px -375px; margin-left: 4px; vertical-align: -2px } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_txt .item_tit .ico_box .ico_npay_using { width: 36px; height: 17px; background-position: -137px -398px; margin-left: 4px; vertical-align: -2px } .wrap_booking_inquiries .content .product_list .wrap_product_item .product_item .item_txt .item_dsc { display: block; display: -webkit-box; overflow: hidden; max-height: 48px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; color: #666; font-size: 16px; line-height: 24px } .wrap_booking_inquiries .talk_hotdeal { display: none; z-index: 30; position: absolute; top: 10px; left: -3px; padding: 2px 4px; border: 1px solid #f0404d; background-color: #fc4351; font-size: 11px; line-height: 11px; color: #fff } .wrap_booking_inquiries .txt_hotdeal { display: block; z-index: 10 } .wrap_booking_inquiries .bk_footer { position: fixed; right: 0; left: 0; bottom: 0; height: 70px; z-index: 15; text-align: center } .wrap_booking_inquiries .bk_footer .btn_choice { margin-bottom: 25px; padding: 14px 22px 12px 20px; border: 0; border-radius: 25px; -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.2); box-shadow: 1px 1px 1px rgba(0,0,0,.2); background-color: rgba(185,191,199,.94); font-size: 15px; color: #fff; letter-spacing: -1px; cursor: pointer; white-space: nowrap } .wrap_booking_inquiries .bk_footer .btn_choice.active { background-color: rgba(3,189,58,.94) } .wrap_booking_inquiries .bk_footer .btn_choice .ico_check_white { width: 15px; height: 12px; background-position: -401px -384px; vertical-align: -2px; margin-right: 5px } .beauty_filter_jp { padding: 16px 0 } .beauty_filter_jp.fixed { position: fixed; top: 56px; left: 0; right: 0; -webkit-box-shadow: 0px 4px 6px rgba(0,0,0,.16); box-shadow: 0px 4px 6px rgba(0,0,0,.16); background-color: #fff; background-color: var(--yahoo-color-gray0); z-index: 1000 } .beauty_filter_jp .filter_list { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 16px; overflow: auto hidden } .beauty_filter_jp .filter_list+.filter_list { margin-top: 8px } .beauty_filter_jp .filter_item { -ms-flex-negative: 0; flex-shrink: 0; padding: 0 12px; border: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); border-radius: 16px; font-weight: 400; font-size: 12px; line-height: 30px; color: #777; color: var(--yahoo-color-text-secondary) } .beauty_filter_jp .filter_item+.filter_item { margin-left: 8px } .beauty_filter_jp .filter_item.select { position: relative; padding-right: 26px } .beauty_filter_jp .filter_item.select::after { content: ""; position: absolute; top: 13px; right: 12px; border-left: 4px solid rgba(0,0,0,0); border-right: 4px solid rgba(0,0,0,0); border-top: 5px solid; border-top-color: #999; border-top-color: var(--yahoo-color-gray60) } .beauty_filter_jp .filter_item.active { border-color: #e5f0ff; border-color: var(--yahoo-color-blue10); background-color: #e5f0ff; background-color: var(--yahoo-color-blue10); color: #0b62e5; color: var(--yahoo-color-text-link) } .beauty_filter_jp .filter_item.active::after { border-top-color: #1a75ff; border-top-color: var(--yahoo-color-blue100) } .beauty_filter_jp .btn_reset { -ms-flex-negative: 0; flex-shrink: 0; width: 32px; height: 32px; margin-right: 6px; border: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); border-radius: 50%; font-size: 16px; line-height: 34px; color: #999; color: var(--yahoo-color-gray60) } .beauty_images_jp { position: relative } .beauty_images_jp .image_list { overflow: hidden } .beauty_images_jp .image_item { position: relative; overflow: hidden; vertical-align: top; background-color: #eee; background-color: var(--yahoo-color-gray20) } .beauty_images_jp .image_item::after { content: ""; display: block; padding-bottom: 100% } .beauty_images_jp .image_link { display: block } .beauty_images_jp .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .beauty_images_jp .image.top { -o-object-position: top; object-position: top } .beauty_images_jp .noimg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 48px; height: 48px } .beauty_images_jp .count { position: absolute; right: 8px; bottom: 8px; padding: 4px 8px; background-color: rgba(0,0,0,.6); border-radius: 10px; font-size: 12px; line-height: 12px; color: #fff } .beauty_images_jp .slick-list { overflow: hidden } .beauty_coupon_jp { display: -webkit-box; display: -ms-flexbox; display: flex } .beauty_coupon_jp .coupon_thumb { position: relative; -ms-flex-negative: 0; flex-shrink: 0; width: 80px; height: 80px; overflow: hidden; background-color: #eee; background-color: var(--yahoo-color-gray20) } .beauty_coupon_jp .coupon_thumb .thumb { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .beauty_coupon_jp .coupon_thumb .label { position: absolute; top: 3px; left: 3px; padding: 2px 4px; border-radius: 7px; background-color: #1a75ff; background-color: var(--yahoo-color-blue100); font-weight: 700; font-size: 10px; line-height: 10px; color: #fff } .beauty_coupon_jp .coupon_thumb .ico_noimg { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 48px; height: 48px } .beauty_coupon_jp .coupon_info { padding-left: 16px; overflow: hidden } .beauty_coupon_jp .coupon_title { font-weight: 700; font-size: 14px; line-height: 21px; color: #0b62e5; color: var(--yahoo-color-text-link) } .beauty_coupon_jp .coupon_price { margin-top: 8px; font-weight: 700; font-size: 14px; line-height: 17px; color: #fd3344; color: var(--yahoo-color-red100) } .beauty_coupon_jp .coupon_detail { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 8px; font-size: 12px; line-height: 18px; color: #777; color: var(--yahoo-color-text-secondary) } .beauty_coupon_jp .coupon_detail+.coupon_detail { margin-top: 4px } .beauty_coupon_jp .coupon_detail .tit { width: 76px; font-weight: 600 } .beauty_coupon_jp .coupon_detail .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .beauty_menu_jp { display: -webkit-box; display: -ms-flexbox; display: flex } .beauty_menu_jp .menu_content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .beauty_menu_jp .menu_title { font-weight: 600; font-size: 14px; line-height: 21px; letter-spacing: -0.25px; color: #444; color: var(--yahoo-color-text-primary) } .beauty_menu_jp .menu_info { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-top: 8px } .beauty_menu_jp .menu_info .price { font-weight: 600; font-size: 14px; line-height: 17px; color: #444; color: var(--yahoo-color-text-primary) } .beauty_menu_jp .menu_info .time { margin-left: 8px; font-weight: 400; font-size: 12px; line-height: 18px; color: #777; color: var(--yahoo-color-text-secondary) } .beauty_menu_jp .menu_details { margin-top: 9px } .beauty_menu_jp .menu_details .summary { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-weight: 500; font-size: 12px; line-height: 16px; color: #444; color: var(--yahoo-color-text-primary); text-align: left } .beauty_menu_jp .menu_details .summary .fn-booking-down1 { margin-left: 5px } .beauty_menu_jp .menu_details .summary.open .fn-booking-down1 { -webkit-transform: rotate(180deg); transform: rotate(180deg) } .beauty_menu_jp .menu_details .details { margin-top: 8px; font-weight: 400; font-size: 12px; line-height: 20px; color: #777; color: var(--yahoo-color-text-secondary) } .beauty_menu_jp .menu_details .details+.details { margin-top: 4px } .beauty_menu_jp .menu_details .details em { margin-right: 5px; font-weight: 700; color: #444; color: var(--yahoo-color-text-primary) } .beauty_menu_jp .menu_desc { position: relative; display: block; display: -webkit-box; overflow: hidden; max-height: 36px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-top: 8px; font-size: 12px; line-height: 18px; color: #777; color: var(--yahoo-color-text-secondary) } .beauty_menu_jp .menu_desc .btn_more_desc { position: absolute; right: 0; bottom: 0; background-color: #fff; background-color: var(--yahoo-color-gray0); font-size: 12px; line-height: 18px; color: #0b62e5; color: var(--yahoo-color-text-link) } .beauty_menu_jp .menu_desc .btn_more_desc em { margin-right: 5px; color: #777; color: var(--yahoo-color-text-secondary) } .beauty_menu_jp .menu_desc.visible { display: block; overflow: visible; max-height: none } .beauty_menu_jp .menu_desc.visible .btn_more_desc { display: none } .beauty_menu_jp .menu_alert { margin-top: 8px; font-size: 10px; font-weight: 700; line-height: 12px; color: #aaa; color: var(--yahoo-color-text-disabled) } .beauty_menu_jp .btn_select { height: 36px; margin-left: 8px; padding: 0 9px; background-color: #fff; background-color: var(--yahoo-color-gray0); border: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); border-radius: 4px; font-weight: 700; font-size: 14px; line-height: 17px; color: #1a75ff; color: var(--yahoo-color-blue100) } .beauty_menu_jp .btn_select .fn-booking::before { font-weight: bold } .beauty_menu_jp .btn_select .fn-booking-plus1 { margin-right: 4px; font-size: 10px } .beauty_menu_jp .btn_select .fn-booking-check1 { margin-right: 3px; font-size: 11px } .beauty_menu_jp .btn_select.active { background-color: #1a75ff; background-color: var(--yahoo-color-blue100); color: #fff } .beauty_style_jp .style_image { position: relative; width: 100%; border-radius: 4px; overflow: hidden } .beauty_style_jp .style_image::after { content: ""; display: block; padding-bottom: 100% } .beauty_style_jp .style_image .image { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .beauty_style_jp .style_name { display: block; display: -webkit-box; overflow: hidden; max-height: 42px; overflow-wrap: break-word; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis; margin-top: 12px; font-weight: 600; font-size: 14px; line-height: 21px; color: #0b62e5; color: var(--yahoo-color-text-link) } .beauty_style_jp .style_menu { margin-top: 4px; font-weight: 400; font-size: 12px; line-height: 18px; color: #777; color: var(--yahoo-color-text-secondary) } .beauty_stylist_jp { display: -webkit-box; display: -ms-flexbox; display: flex } .beauty_stylist_jp .image_area { overflow: hidden; width: 80px; height: 80px; border: 1px solid rgba(0,0,0,.05); border-radius: 50%; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #eee; background-color: var(--yahoo-color-gray20); background-clip: padding-box } .beauty_stylist_jp .image_area.no_image { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center } .beauty_stylist_jp .image_area.no_image .image { width: 48px; height: 48px } .beauty_stylist_jp .image_area.none_click { cursor: default } .beauty_stylist_jp .image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .beauty_stylist_jp .text_area { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 15px } .beauty_stylist_jp .name { display: block; font-size: 14px; font-weight: 700; line-height: 20px; color: #0b62e5; color: var(--yahoo-color-text-link) } .beauty_stylist_jp .name.none_click { cursor: default; color: #444; color: var(--yahoo-color-text-primary) } .beauty_stylist_jp .call { margin-top: 4px; font-size: 12px; line-height: 18px; color: #777; color: var(--yahoo-color-text-secondary) } .beauty_stylist_jp .career { margin-top: 4px; font-size: 12px; line-height: 18px; color: #444; color: var(--yahoo-color-text-primary) } .beauty_stylist_jp .position { color: #00ab3f; color: var(--yahoo-color-green90) } .beauty_stylist_jp .position::before { content: "/"; display: inline-block; margin: 0 5px; font-size: 12px; line-height: 18px; color: #ccc; color: var(--yahoo-color-text-delimiter) } .beauty_stylist_jp .price { display: inline-block; vertical-align: top; margin-top: 8px; font-size: 13px; line-height: 21px; color: #444; color: var(--yahoo-color-text-primary) } .beauty_stylist_jp .price::before { content: ""; display: inline-block; vertical-align: -2px; width: 2px; height: 14px; margin-right: 5px; border-radius: 1px; background-color: #ddd; background-color: var(--yahoo-color-gray30) } .beauty_stylist_jp .price strong { display: inline-block; vertical-align: top; font-size: 14px } .beauty_stylist_jp .button_area { -webkit-box-flex: 0; -ms-flex: none; flex: none } .beauty_stylist_jp .button_area .btn { padding: 7px 9px; border: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); border-radius: 4px; font-size: 14px; font-weight: 600; line-height: 20px; color: #1a75ff; color: var(--yahoo-color-blue100) } .menu_footer_jp { position: fixed; left: 0; right: 0; bottom: 0; max-width: 1024px; margin: 0 auto; background-color: #fff; background-color: var(--yahoo-color-gray0); z-index: 1000 } .menu_footer_jp::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 20px; background-image: -webkit-gradient(linear, left bottom, left top, from(var(--yahoo-color-gray0)), to(var(--yahoo-color-gray0-rgb))); background-image: linear-gradient(0deg, var(--yahoo-color-gray0), var(--yahoo-color-gray0-rgb) 100%) } .menu_footer_jp .menu_selected { display: -webkit-box; display: -ms-flexbox; display: flex; padding: 0 16px 16px } .menu_footer_jp .menu_selected .selected_info { display: -webkit-box; display: -ms-flexbox; display: flex; padding-top: 3px } .menu_footer_jp .menu_selected .selected_info .info+.info { margin-left: 10px; padding-left: 10px; border-left: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30) } .menu_footer_jp .menu_selected .selected_info .info .title { font-weight: 400; font-size: 12px; line-height: 15px; color: #777; color: var(--yahoo-color-text-secondary) } .menu_footer_jp .menu_selected .selected_info .info .desc { margin-top: 1px; font-weight: 700; font-size: 14px; line-height: 20px; color: #444; color: var(--yahoo-color-text-primary) } .menu_footer_jp .menu_selected .btn_check { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 24px; padding: 12px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #1a75ff; background-color: var(--yahoo-color-blue100); border-radius: 5px; font-weight: 600; font-size: 14px; line-height: 20px; color: #fff } .menu_footer_jp .menu_selected .btn_check.disabled { padding: 11px; border: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); background-color: #eee; background-color: var(--yahoo-color-gray20); color: #aaa; color: var(--yahoo-color-text-disabled); cursor: default } .book_header_jp { position: fixed; top: 0; left: 0; right: 0; max-width: 1024px; margin: 0 auto; z-index: 9000; background-color: #fff; background-color: var(--yahoo-color-gray0) } .book_header_jp.scroll { -webkit-box-shadow: 0px 0px 1px rgba(0,0,0,.04),0px 4px 6px rgba(0,0,0,.16); box-shadow: 0px 0px 1px rgba(0,0,0,.04),0px 4px 6px rgba(0,0,0,.16) } .book_header_jp+.beauty_stylist_detail_jp .stylist_inner,.book_header_jp+.book_my_jp,.book_header_jp+.page_request_jp,.book_header_jp+.page_book_jp,.book_header_jp+.beauty_tab_jp { padding-top: 56px } .book_header_jp .header_gnb { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; max-width: 1024px; height: 56px; margin: 0 auto; background-color: #fff; background-color: var(--yahoo-color-gray0) } .book_header_jp .header_gnb .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 0 4px; font-weight: 700; font-size: 16px; line-height: 18px; color: #444; color: var(--yahoo-color-text-primary) } .book_header_jp .header_gnb .title.center { text-align: center } .book_header_jp .header_gnb .link_back { width: 48px; height: 56px } .book_header_jp .header_gnb .link_back .ico_back { width: 10px; height: 18px; margin: 19px 0 0 19px; -webkit-transform: rotate(180deg); transform: rotate(180deg); fill: #999 } .book_header_jp .header_gnb .link_yahoo { width: 48px; height: 56px } .book_header_jp .header_gnb .link_yahoo .ico_yahoo { width: 22px; height: 12px; margin: 22px 0 0 13px } .book_header_jp .header_back { position: relative; z-index: 1000 } .book_header_jp .header_back .link_back { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; background-position: 0px 0px } .book_header_jp .header_back .ico_yahoo { position: absolute; top: 8px; right: 13px; width: 32px; height: 32px; background-position: -34px 0px } .book_nav_jp { display: -webkit-box; display: -ms-flexbox; display: flex; max-width: 1024px; margin: 0 auto; padding: 11px 7px 0; border-bottom: 1px solid #eee; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; overflow-x: auto } .book_nav_jp .link { -ms-flex-negative: 0; flex-shrink: 0; position: relative; padding: 0 12px 13px; font-weight: 600; font-size: 14px; line-height: 17px; color: rgba(0,0,0,.345) } .book_nav_jp .link.active { color: #ff6673 } .book_nav_jp .link.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px 2px 0px 0px; background-color: #ff6673 } .book_my_card_jp { position: relative; background-color: #fff; background-color: var(--yahoo-color-gray0); border: 1px solid; border-color: #1a75ff; border-color: var(--yahoo-color-blue100); -webkit-box-shadow: 2px 2px 8px rgba(48,131,253,.15); box-shadow: 2px 2px 8px rgba(48,131,253,.15); border-radius: 10px } .book_my_card_jp.type_cancel { border-color: #ddd; border-color: var(--yahoo-color-gray30); -webkit-box-shadow: 0px 2px 6px rgba(0,0,0,.05); box-shadow: 0px 2px 6px rgba(0,0,0,.05) } .book_my_card_jp.type_cancel .card_label { background-color: #eee; background-color: var(--yahoo-color-gray20); color: #777; color: var(--yahoo-color-text-secondary) } .book_my_card_jp.type_complete { border-color: #ddd; border-color: var(--yahoo-color-gray30); -webkit-box-shadow: 0px 2px 6px rgba(0,0,0,.05); box-shadow: 0px 2px 6px rgba(0,0,0,.05) } .book_my_card_jp.type_complete .card_label { background-color: #444; background-color: var(--yahoo-color-text-primary); color: #fff; color: var(--yahoo-color-gray0) } .book_my_card_jp .my_card { padding: 16px 16px 121px } .book_my_card_jp .my_card.only_btn { padding-bottom: 76px } .book_my_card_jp .my_card.only_btn+.card_btns { bottom: 16px } .book_my_card_jp .my_card.only_footer { padding-bottom: 65px } .book_my_card_jp .my_card.only_text { padding-bottom: 16px } .book_my_card_jp .card_label { display: inline-block; padding: 2px 6px; background-color: #1a75ff; background-color: var(--yahoo-color-blue100); border-radius: 37px; font-weight: 700; font-size: 12px; line-height: 20px; color: #fff } .book_my_card_jp .card_title { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 12px } .book_my_card_jp .card_title .title_link { -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .book_my_card_jp .card_title .title { display: block; color: #444; color: var(--yahoo-color-text-primary); letter-spacing: -0.25px } .book_my_card_jp .card_title .line_btn { width: 80px; height: 20px; margin: 2px 0 0 5px; border-radius: 3px; background-color: #06c755; font-size: 10px; font-weight: bold; line-height: 20px; color: #fff; letter-spacing: -0.3px } .book_my_card_jp .card_title .line_btn .ico_line { width: 13px; height: 12px; background-position: -94px -46px; margin-right: 6px; vertical-align: -2px } .book_my_card_jp .card_list_link { display: block; margin-top: 12px } .book_my_card_jp .card_item { display: -webkit-box; display: -ms-flexbox; display: flex; font-size: 13px; line-height: 20px; color: #777; color: var(--yahoo-color-text-secondary) } .book_my_card_jp .card_item+.card_item { margin-top: 7px } .book_my_card_jp .card_item .title { -ms-flex-negative: 0; flex-shrink: 0; width: 65px; font-weight: 600 } .book_my_card_jp .card_item .desc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-weight: 400 } .book_my_card_jp .card_btns { position: absolute; left: 16px; right: 16px; bottom: 65px; display: -webkit-box; display: -ms-flexbox; display: flex; z-index: 10 } .book_my_card_jp .card_btns .btn { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; padding: 9px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); border-radius: 4px; font-weight: 700; font-size: 14px; line-height: 20px; color: #444; color: var(--yahoo-color-text-primary) } .book_my_card_jp .card_btns .btn .ico_review { vertical-align: -2px; width: 15px; height: 15px; margin-right: 4px; fill: #1a75ff; fill: var(--yahoo-color-blue100) } .book_my_card_jp .card_btns .btn+.btn { margin-left: 7px } .book_my_card_jp .card_footer { position: absolute; left: 16px; right: 16px; bottom: 12px; padding-top: 13px; border-top: 1px solid; border-top-color: #eee; border-top-color: var(--yahoo-color-gray20); z-index: 10 } .book_my_card_jp .card_footer:before,.book_my_card_jp .card_footer:after { content: " "; display: table } .book_my_card_jp .card_footer:after { clear: both } .book_my_card_jp .card_footer .btn_call { display: inline-block; vertical-align: -3px; line-height: 18px } .book_my_card_jp .card_footer .btn_location { display: inline-block; vertical-align: -3px; margin-left: 20px; line-height: 18px } .book_my_card_jp .card_footer .btn_home { float: right; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; font-size: 14px; color: #1a75ff; color: var(--yahoo-color-blue100) } .book_my_card_jp .card_footer .btn_home .icon { margin-right: 3px } .book_my_card_jp .card_footer .icon { width: 18px; height: 18px; fill: #1a75ff; fill: var(--yahoo-color-blue100) } .book_my_card_jp .card_review { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; margin-top: 20px; padding: 20px 2px 5px; border-top: 1px solid; border-top-color: #eee; border-top-color: var(--yahoo-color-gray20) } .book_my_card_jp .card_review .btn_review { -ms-flex-item-align: center; align-self: center; color: #1a75ff; color: var(--yahoo-color-blue100) } .book_my_card_jp .card_review .btn_review .ico_review { width: 14px; height: 14px; margin-left: 5px; fill: #1a75ff; fill: var(--yahoo-color-blue100) } .book_my_card_jp .card_review .review_content { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-weight: 400; font-size: 14px; line-height: 20px; color: #777; color: var(--yahoo-color-text-secondary) } .book_my_card_jp .card_review .review_image { -ms-flex-negative: 0; flex-shrink: 0; width: 60px; height: 60px; margin-left: 10px; border: 1px solid rgba(0,0,0,.01); border-radius: 5px; overflow: hidden } .book_my_card_jp .card_review .review_image .image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .book_my_card_jp .btn_more { position: absolute; top: 0; right: 0; padding: 16px 11px; font-size: 18px; color: #444; color: var(--yahoo-color-text-primary); z-index: 10 } .book_my_card_jp .box_more { position: absolute; top: 38px; right: 16px; min-width: 144px; background-color: #fff; background-color: var(--yahoo-color-gray0); border: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); -webkit-box-shadow: 0px 3px 6px rgba(0,0,0,.15); box-shadow: 0px 3px 6px rgba(0,0,0,.15); border-radius: 4px; overflow: hidden; z-index: 1000 } .book_my_card_jp .box_more .btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; width: 100%; padding: 16px; font-weight: 400; font-size: 14px; line-height: 21px; color: #444; color: var(--yahoo-color-text-primary) } .book_my_card_jp .box_more .btn+.btn { padding-top: 4px } .book_my_card_jp .box_more .icon { width: 18px; height: 18px; margin-left: 10px; fill: #444; fill: var(--yahoo-color-text-primary) } .book_schedule_modal_jp .modal_layout { position: fixed; left: 0; right: 0; bottom: 0; height: 100%; max-height: calc(100% - 44px); background-color: #fff; background-color: var(--yahoo-color-gray0); -webkit-box-shadow: 0 2px 20px rgba(0,0,0,.1); box-shadow: 0 2px 20px rgba(0,0,0,.1); border-radius: 20px 20px 0 0; overflow: hidden; z-index: 9999 } .book_schedule_modal_jp .modal_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; position: absolute; top: 0; left: 0; right: 0; max-width: 1024px; height: 67px; margin: 0 auto; padding: 0 9px 0 16px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; background-color: var(--yahoo-color-gray0); border-bottom: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); z-index: 10 } .book_schedule_modal_jp .modal_header .header_image { -ms-flex-negative: 0; flex-shrink: 0; width: 37px; height: 37px; border-radius: 50%; border: 1px solid rgba(0,0,0,.07); overflow: hidden } .book_schedule_modal_jp .modal_header .header_image .image { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover } .book_schedule_modal_jp .modal_header .header_info { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; margin-left: 8px; overflow: hidden } .book_schedule_modal_jp .modal_header .header_info .info_title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; display: block; font-weight: 600; color: #444; color: var(--yahoo-color-text-primary) } .book_schedule_modal_jp .modal_header .header_info .info_name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; margin-top: 4px; font-size: 12px; line-height: 14px; color: #777; color: var(--yahoo-color-text-secondary) } .book_schedule_modal_jp .modal_header .btn_close { -ms-flex-item-align: start; align-self: flex-start; margin-top: 13px; padding: 8px; line-height: 14px } .book_schedule_modal_jp .modal_header .btn_close .icon { width: 14px; height: 14px; fill: #aaa; fill: var(--yahoo-color-text-disabled) } .book_schedule_modal_jp .modal_content { position: relative; padding-top: 67px; max-width: 1024px; height: 100%; margin: 0 auto } .book_schedule_modal_jp .slick-slider { height: calc(100vh - 126px) } .book_schedule_modal_jp .slick-slider .slick-list { overflow: hidden } .book_schedule_modal_jp .slick-slider .slick-list,.book_schedule_modal_jp .slick-slider .slick-track,.book_schedule_modal_jp .slick-slider .slick-slide { height: inherit } .book_schedule_modal_jp .slick-slider .slick-list>div,.book_schedule_modal_jp .slick-slider .slick-track>div,.book_schedule_modal_jp .slick-slider .slick-slide>div { height: inherit } .book_schedule_modal_jp .slick-slider .slick-slide { position: relative } .book_schedule_modal_jp .slick-slider .slick-slide .loading { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%) } .book_schedule_modal_jp .calendar_header { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; height: 30px; background-color: rgba(26, 117, 255, 0.08); background-color: var(--yahoo-color-blue100-rgb) } .book_schedule_modal_jp .calendar_header .btn { -ms-flex-negative: 0; flex-shrink: 0; width: 60px; height: 30px; font-size: 14px; line-height: 17px; color: #0b62e5; color: var(--yahoo-color-text-link) } .book_schedule_modal_jp .calendar_header .btn .ico_arrow { width: 6px; height: 11px; fill: #0b62e5; fill: var(--yahoo-color-text-link) } .book_schedule_modal_jp .calendar_header .btn.disabled { color: #aaa; color: var(--yahoo-color-text-disabled) } .book_schedule_modal_jp .calendar_header .btn.disabled .ico_arrow { fill: #aaa; fill: var(--yahoo-color-text-disabled) } .book_schedule_modal_jp .calendar_header .btn.prev { text-align: right } .book_schedule_modal_jp .calendar_header .btn.prev .ico_arrow { -webkit-transform: rotate(180deg); transform: rotate(180deg); margin-right: 8px } .book_schedule_modal_jp .calendar_header .btn.next { text-align: left } .book_schedule_modal_jp .calendar_header .btn.next .ico_arrow { margin-left: 8px } .book_schedule_modal_jp .calendar_header .month { font-size: 14px; line-height: 18px; color: #444; color: var(--yahoo-color-text-primary) } .book_schedule_modal_jp .calendar_table { position: relative; width: 100%; height: 100% } .book_schedule_modal_jp .calendar_table thead { display: block } .book_schedule_modal_jp .calendar_table thead tr { display: -webkit-box; display: -ms-flexbox; display: flex } .book_schedule_modal_jp .calendar_table thead tr.scroll { position: relative; -webkit-box-shadow: 0 4px 6px rgba(0,0,0,.16); box-shadow: 0 4px 6px rgba(0,0,0,.16) } .book_schedule_modal_jp .calendar_table thead th { position: relative; height: 44px; border-bottom: 1px solid; border-color: #ddd; border-color: var(--yahoo-color-gray30); -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff; background-color: var(--yahoo-color-gray0); font-weight: 700; font-size: 14px; line-height: 17px; color: #444; color: var(--yahoo-color-text-primary); text-align: center; z-index: 10 } .book_schedule_modal_jp .calendar_table thead th:first-child { width: 60px } .book_schedule_modal_jp .calendar_table thead th.sunday { color: #fd3344; color: var(--yahoo-color-red100) } .book_schedule_modal_jp .calendar_table thead th.saturday { color: #1a75ff; color: var(--yahoo-color-blue100) } .book_schedule_modal_jp .calendar_table thead th+th { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-flex: 1; -ms-flex: 1; flex: 1 } .book_schedule_modal_jp .calendar_table thead th+th::before { content: ""; position: absolute; top: 12px; left: 0; width: 1px; height: 22px; background-color: #eee; background-color: var(--yahoo-color-gray20) } .book_schedule_modal_jp .calendar_table thead th .week { display: block; font-size: 10px; line-height: 15px } .book_schedule_modal_jp .calendar_table tbody { display: block; height: calc(100% - 44px); overflow-y: auto } .book_schedule_modal_jp .calendar_table tbody td { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; height: 40px; border-style: solid; border-width: 0 0 1px 1px; border-color: #eee; border-color: var(--yahoo-color-gray20); text-align: center } .book_schedule_modal_jp .calendar_table tbody tr { display: -webkit-box; display: -ms-flexbox; display: flex } .book_schedule_modal_jp .calendar_table tbody tr+tr .th_time::before { content: ""; position: absolute; top: 0; right: 12px; width: 30px; height: 1px; background-color: #eee; background-color: var(--yahoo-color-gray20) } .book_schedule_modal_jp .calendar_table tbody tr:nth-last-child(2) td { border-bottom: 0 } .book_schedule_modal_jp .calendar_table tbody .th_time { -ms-flex-negative: 0; flex-shrink: 0; position: relative; width: 60px; height: 40px; padding-right: 11px; -webkit-box-sizing: border-box; box-sizing: border-box; font-weight: 400; font-size: 12px; line-height: 40px; color: #777; color: var(--yahoo-color-text-secondary); text-align: right } .book_schedule_modal_jp .calendar_table tbody .td_open { position: relative } .book_schedule_modal_jp .calendar_table tbody .td_open .btn_open { width: 100%; height: 100% } .book_schedule_modal_jp .calendar_table tbody .td_open .btn_open::before { content: ""; display: block; position: absolute; top: 50%; left: 0; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); margin: auto; border: 2px solid; border-color: #1a75ff; border-color: var(--yahoo-color-blue100); -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 50% } .book_schedule_modal_jp .calendar_table tbody .td_open .btn_open::before { width: 15px; height: 15px } .book_schedule_modal_jp .calendar_table tbody .td_close { background-color: #f7f7f7; background-color: var(--yahoo-color-gray10) } .book_schedule_modal_jp .calendar_table tbody .tr_bottom td { height: 40px; background-color: #f7f7f7; background-color: var(--yahoo-color-gray10); border-width: 1px 0 0 0 } .recommend_coupon_modal_jp { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: #fff; z-index: 11000 } .recommend_coupon_modal_jp .book_header_jp+.modal_body { height: calc(100% - 56px); margin-top: 56px } .recommend_coupon_modal_jp .book_header_jp+.modal_body .beauty_filter_jp.fixed { top: 56px } .recommend_coupon_modal_jp .modal_body { height: 100%; overflow-y: auto } .recommend_coupon_modal_jp .beauty_filter_jp.fixed { top: 0 } .recommend_coupon_modal_jp .beauty_filter_jp.fixed+.list_coupon { padding-top: 56px } .recommend_coupon_modal_jp .modal_list { position: relative; max-width: 1024px; margin: 0 auto } .recommend_coupon_modal_jp .list_title { display: block; padding: 24px 16px 0; font-weight: 700; letter-spacing: -0.5px; color: #444 } .recommend_coupon_modal_jp .list_title .count { margin-left: 4px; color: #f76375 } .recommend_coupon_modal_jp .list_title .btn_help { vertical-align: -2px; margin-left: 5px; font-size: 14px; color: #858585 } .recommend_coupon_modal_jp .list_title .tooltip { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; position: absolute; top: 53px; left: 16px; max-width: calc(100% - 64px); padding: 12px 14px; background-color: #fff; border: 1px solid #1a75ff; -webkit-box-shadow: 0px 0px 0px 1px rgba(0,0,0,.04),0px 2px 3px rgba(0,0,0,.12); box-shadow: 0px 0px 0px 1px rgba(0,0,0,.04),0px 2px 3px rgba(0,0,0,.12); border-radius: 4px; font-weight: 400; font-size: 14px; line-height: 21px; color: #444; z-index: 1000 } .recommend_coupon_modal_jp .list_title .tooltip::before,.recommend_coupon_modal_jp .list_title .tooltip::after { content: ""; position: absolute; top: 0; left: 139px; -webkit-transform: translateX(-50%); transform: translateX(-50%) } .recommend_coupon_modal_jp .list_title .tooltip::before { border: 6px solid rgba(0,0,0,0); border-bottom-color: inherit; top: -12px } .recommend_coupon_modal_jp .list_title .tooltip::after { border: 5px solid rgba(0,0,0,0); border-bottom-color: #fff; top: -10px } .recommend_coupon_modal_jp .list_title .tooltip .btn_close { -ms-flex-item-align: baseline; align-self: baseline; margin: 4px 0 0 14px; line-height: 12px } .recommend_coupon_modal_jp .list_title .tooltip .btn_close .icon { width: 12px; height: 12px; fill: #61a0ff } .recommend_coupon_modal_jp .list_desc { padding: 8px 16px 0; font-size: 12px; line-height: 20px; color: #777 } .recommend_coupon_modal_jp .list_coupon { padding: 0 16px } .recommend_coupon_modal_jp .list_coupon .item { padding: 8px 0 21px } .recommend_coupon_modal_jp .list_coupon .item+.item { padding: 16px 0; border-top: 1px solid #eee } .recommend_coupon_modal_jp .list_coupon .link { display: block } .recommend_coupon_modal_jp .beauty_coupon_jp { -webkit-transform: none !important; transform: none !important } .recommend_coupon_modal_jp .book_modal_jp .modal_body { height: auto; margin-top: 0 } .media_viewer_jp { position: fixed; top: 0; bottom: 0; left: 0; right: 0; background-color: #000; z-index: 12000 } .media_viewer_jp .viewer_inner { position: relative; max-width: 1024px; height: 100vh; margin: 0 auto } .media_viewer_jp .viewer_header { display: -webkit-box; display: -ms-flexbox; display: flex; position: absolute; top: 0; left: 0; right: 0; height: 44px; z-index: 1000 } .media_viewer_jp .viewer_header .btn_close { -ms-flex-negative: 0; flex-shrink: 0; width: 44px; height: 44px } .media_viewer_jp .viewer_header .btn_close .icon { vertical-align: -2px; width: 14px; height: 14px; fill: #fff } .media_viewer_jp .viewer_header .btn_more { width: 44px; height: 44px; font-size: 18px; line-height: 18px; color: #fff } .media_viewer_jp .viewer_header .page { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; font-size: 12px; line-height: 44px; color: rgba(255,255,255,.6); text-align: center } .media_viewer_jp .viewer_header .page .current { color: #fff }