@charset "UTF-8";
/* CSS Document */


/*通用Start*/
    @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
	body{
		display:block;
		margin: 0px;
		padding: 0px;
		background-color: #E0E2F6;
	}
	
	.outside_block_check_in{
		background-color: #E0E2F6;
		font-family: PingFangTC-Regular, PingFangTC-Medium, sans-serif;
		font-weight: 400;
		font-style: normal;
		max-width: 576px;
		margin-left: auto;
		margin-right: auto;
	}
	.outside_block_check_in img{
		display: block;
		width: 100%;
	}
	.full_screen_check_in{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 5;
		background-color: rgba(0,0,0,0.7);
	}
	
/*通用End*/



/*底部菜單Start*/
	.menu_check_in{
		width: 100%;
		position: fixed;
		transform: translateX(-50%);
		left: 50%;
		bottom: 0;
		background-color: white;
		z-index: 4;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 90px;
		max-width: 576px;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
	}
	.menu_block_check_in{
		width: 25%;
		color: #707070;
		letter-spacing: 0em;
		line-height: 1.5em;
		font-size: 12px;
		border-right: 1px solid rgba(0,0,0,0.05);
		height: 100%;
		padding-top: 26px;
		text-align: center;
		position: relative;
	}
	.menu_block_check_in:nth-last-child(1){
		border-right: 0px;
	}
    .menu_block_check_in:nth-child(1){
		border-right: 0px;
	}
	.menu_block_check_in a{
		position: absolute;
		width: 100%;
		height: 100%;
		opacity: 0;
		top: 0;
		left: 0;
		z-index: 3;
	}
	.menu_icon_check_in{
		width: 20px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		margin-bottom: 4px;
		filter: brightness(0);
		opacity: 0.6;
	}
	.menu_selected{
		color: #631549;
	}
	.menu_selected img{
		filter: none;
		opacity: 1;
	}
	.menu_space_check_in{
		width: 100%;
		height: 180px;
	}
    .menu_scan_btn_check_in{
	    position: absolute;
		width: 110%;
		height: auto;
		left: 0;
		transform: translateY(-50%);
		top: 50%;
		z-index: 1;
		display: block;
	}
    .menu_sp_scan_text_check_in{
		position: absolute;
		z-index: 2;
		transform: translate(-50%,-50%);
		left: 48%;
		top: 46%;
		font-size: 14px;
		filter: invert(100%)saturate(0%)brightness(216%);
		white-space: nowrap;
	}
	.menu_sp_scan_text_check_in img{
		width: 32px;
		margin-bottom: 8px;
	}
	/*底部菜單End*/




/*首頁Start*/
	.index_button_check_in{
		width: 90%;
		display: block;
		margin-left: auto;
		margin-right: auto;
		height: 50px;
		font-size: 18px;
		color: white;
		letter-spacing: 0.04em;
		background-color: #631549;
		border-radius: 50px;
		border: none;
		margin-bottom: 20px;
		outline: none;
		font-weight: 700;
	}
	.index_title_check_in{
		text-align: center;
		font-size: 16px;
		color: #631549;
		margin-bottom: 12px;
		font-weight: 700;
		margin-top: 50px;
	}
	.index_text_check_in{
		font-size: 14px;
		text-align: center;
		width: 90%;
		margin-left: auto;
		margin-right: auto;
		line-height: 1.6em;
		margin-bottom: 10px;
		letter-spacing: 0.02em;
		color: #282828;
	}
	.index_text_check_in span{
		color: #930D6F;
		font-weight: 700;
	}
	.index_tnc_button_check_in{
		text-align: center;
		font-size: 12px;
		letter-spacing: 0.02em;
		color: #282828;
	}
	.index_tnc_button_check_in a{
		text-decoration: underline!important;
	}
	
	
	.index_slider_check_in{
		border-radius: 14px;
		background-color: #F7F7F7;
		width: 48%;
		margin-left: 1%;
		margin-right: 1%;
		margin-bottom: 20px;
		text-align: center;
		position: relative;
	}
	
	.index_slider_check_in a{
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		opacity: 0;
	}
	.index_swiper_img_check_in{
		width: 100%;
		height: 120px;
		display: block;
		background-size: cover;
		background-position: center;
		border-top-left-radius: 14px;
		border-top-right-radius: 14px;
	}
	.index_swiper_text_check_in{
		font-size: 14px;
		color: #282828;
		height: 40px;
		line-height: 40px;
	}
	
	
	
	.index_step_list_block_check_in{
		border-radius: 20px;
		background-color: #EFF0FA;
		width: 92%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 30px;
		padding-bottom: 30px;
		position: relative;
		margin-top:50px;
	}
	.index_step_check_in{
		background-color: white;
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 14px;
		border-radius: 15px;
		padding: 14px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
	}
	.index_step_icon_check_in{
		width: 60px;
		height: 60px;
		min-width: 60px;
		position: relative;
		background-color: #631549;
		border-radius: 100%;
		
		margin-right: 10px;
	}
	.index_step_icon_check_in img{
		width: 32px;
		height: 32px;
		position: absolute;
		transform: translate(-50%,-50%);
		left: 50%;
		top: 50%;
	}
	.index_step_right_flex_check_in{
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: wrap;
	}
	.index_step_purple_block_check_in{
		font-size: 13px;
		width: 60px;
		height: 20px;
		background-color: #930D6F;
		text-align: center;
		color: white;
		letter-spacing: 0.02em;
		border-radius: 20px;
		margin-right: 5px;
		font-weight: 700;
	}
	.index_step_purple_title_check_in{
		font-size: 14px;
		letter-spacing: 0.02em;
		color: #631549;
		font-weight: 700;
	}
	.index_step_text_check_in{
		font-size: 13px;
		width: 100%;
		letter-spacing: 0.02em;
		color: #282828;
		margin-top: 4px;
		line-height: 1.4em;
	}
	.index_step_title_check_in{
		width: 96%!important;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.index_step_bag_check_in{
		position: absolute;
		right: 1%;
		width: 27%!important;
		top: -3%;
	}
	.index_video_check_in{
		display: block;
		width: 100%;
	}
	.index_flex_block_check_in{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: flex-start;
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
    .index_video_block_check_in{
		position: relative;
		width: 100%;
	}	
	.index_gradient_check_in{
		position: absolute;
		z-index: 2;
		height: 44px;
		width: 100%;
		bottom: 0;
		left: 0;
		background:-webkit-linear-gradient(rgba(224,226,246,0) 0%,#E0E2F6 100%);
	}
	.index_video_float_check_in{
		position: absolute;
		width: 36%!important;
		bottom: 20px;
		right: 15px;
		max-width: 320px;
		z-index: 3;
	}
	/*登入彈窗Start*/
	.index_login_check_in{
		position: absolute;
		transform: translate(-50%,-50%);
		left: 50%;
		top: 50%;
		width: 96%;
		text-align: center;
		background-color: white;
		border-radius: 20px;
		padding:25px 20px;
		font-size: 16px;
		color: #631549;
		letter-spacing: 0.02em;
		max-width: 440px;
	}
	.index_login_check_in input{
		height: 46px;
		width: 100%;
		margin-top: 15px;
		appearance:none;
		-webkit-appearance:none;
		-moz-appearance:none;
		border: none;
		background-color: #631549;
		color: white;
		font-size: 14px;
		letter-spacing: 0.02em;
		border-radius: 48px;
		display: block;
		outline: none;
	}
	/*登入彈窗End*/
	/*條款及細則Start*/
	#tnc{
		display: none;
	}
	.tnc_block_check_in{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
	    left: 0;
		background-color: white;
		z-index: 4;
		padding-left: 14px;
		padding-right: 14px;
		padding-top: 20px;
	}
	.tnc_ol_check_in{
		font-size: 14px;
		color: #282828;
		letter-spacing: 0.02em;
		text-align: left;
		padding-left: 24px;
		overflow-y: scroll;
		max-height: 90vh;
		padding-bottom: 80px;
	}
	.tnc_ol_check_in li{
		margin-bottom: 12px;
	}
	.tnc_phone_check_in{
		font-size: 14px;
		letter-spacing: 0.02em;
		color: #282828;
	}
	.tnc_close_check_in{
		position: absolute;
		bottom: 0px;
		height: 60px;
		line-height: 60px;
		text-align: center;
		
		transform: translateX(-50%);
		left: 50%;
		display: block;
		font-size: 14px;
		color: #282828;
		letter-spacing: 0.02em;
		width: 100%;
		background-color: white;
		border-top: 1px solid rgba(0,0,0,0.1);
	}
	/*條款及細則End*/

/*首頁End*/

/*任務Start*/
    
	.task_flex_block_check_in{
		display: flex;
		justify-content: flex-start;
		flex-wrap: wrap;
		align-items: flex-start;
		padding-top: 24px;
		width: 96%;
		margin-left: auto;
		margin-right: auto;
	}
	
	.task_outside_block_checK_in{
		width: 50%;
		padding:6px;
		overflow: hidden;
	}
	.task_inside_blocK_check_in{
		background-color: white;
		border-radius: 20px;
		text-align: center;
		padding-bottom: 14px;
	}
	.task_title_check_in{
		font-size: 15px;
		letter-spacing: 0.01em;
		margin-bottom: 10px;
		width: 94%;
		margin: auto;
		color: #282828;
		line-height: 1.5em;
		font-weight: 700;
	}
	.task_shop_img_check_in{
		width: 100%;
		height: 140px;
		background-color: grey;
		border-top-left-radius: 20px;
		border-top-right-radius: 20px;
		background-size: cover;
		background-position: center;
		margin-bottom: 16px;
	}
	.task_reward_check_in{
		font-size: 12px;
		margin-bottom: 8px;
		color: #282828;
		line-height: 1.5em;
	}
	.task_reward_check_in span{
		color: #631549;
	}
	.task_button_check_in{
		width:  80%;
		height: 44px;
		appearance:none;
		-webkit-appearance:none;
		-moz-appearance:none;
		border: 0px;
		background-color: #632549;
		outline: none;
		border-radius: 46px;
		color: white;
		font-size: 14px;
		letter-spacing: 0.04em;
		margin-left: auto;
		margin-right: auto;
		text-align: center;
		font-weight: 700;
	}
	.task_finished{
		background-color: #707070!important;
	}
	
	
	.full_screen_check_in{
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 5;
		background-color: rgba(0,0,0,0.7);
	}
	.task_popup_img_check_in{
		width: 220px;
		margin-left: auto;
		margin-right: auto;
		display: block;
		position: relative;
		z-index: 2;
	}
	.task_popup_list_check_in{
		background-color: #EFF0FA;
		margin-top: -20px;
		border-radius: 20px;
		text-align: center;
		padding-bottom: 20px;
	}
	.task_popup_check_in{
		position: absolute;
		transform: translate(-50%,-50%);
		left: 50%;
		top: 50%;
		width: 94%;
		max-width: 576px;
	}
	.task_popup_title_check_in{
		font-size: 18px;
		padding-top: 30px;
		letter-spacing: 0.02em;
		color: #631549;
	}
	.task_popup_block_check_in{
		background-color: white;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		padding: 14px;
		border-radius: 20px;
		margin-top: 14px;
	}
	.task_popup_step_check_in{
		font-size: 14px;
		background-color:#930D6F;
		color: white;
		letter-spacing: 0.04em;
		width: 74px;
		height: 46px;
		line-height: 44px;
		border-radius: 12px;
		min-width: 74px;
		margin-right: 14px;
	}
	.task_popup_text_check_in{
		font-size: 14px;
		color: #282828;
		letter-spacing: 0.02em;
		
	}
	.task_popup_text_check_in span{
		color: #631549;
	}
	.task_popup_20_icon_check_in{
		width: 54px;
		height: 54px;
		margin-left: 10px;
	}
	.task_popup_booking_check_in{
		width: 90%;
		margin-top: 24px;
		height: 56px;
		appearance:none;
		-webkit-appearance:none;
		-moz-appearance:none;
		border: none;
		background-color: #631549;
		color: white;
		border-radius: 56px;
		letter-spacing: 0.02em;
		font-size: 16px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.task_popup_close_check_in{
		width: 90%;
		margin-top: 10px;
		height: 56px;
		appearance:none;
		-webkit-appearance:none;
		-moz-appearance:none;
		border: none;
		background-color: transparent;
		color: #282828;
		border-radius: 56px;
		letter-spacing: 0.02em;
		font-size: 16px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	#booking_step{
		display: none;
	}
/*任務End*/



/*記錄Start*/
    .record_list_check_in{
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 20px;
		background-color: #EFF0FA;
		border-radius: 20px;
		padding-bottom: 22px;
		padding-top: 28px;
	}
	.record_year_check_in{
		text-align: center;
		font-size: 18px;
		color: #631549;
		font-weight: 700;
		letter-spacing: 0.02em;
		
	}
	.record_block_check_in{
		background-color: white;
		width: 94%;
		margin-left: auto;
		margin-right: auto;
		margin-top: 14px;
		margin-bottom: 14px;
		padding: 14px;
		border-radius: 15px;
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
	}
	.record_icon_check_in{
		width: 62px!important;
		min-width: 62px;
	}
	.record_text_check_in{
		width: 100%;
		font-size: 15px;
		line-height: 1.4em;
		color: #282828;
		letter-spacing: 0.02em;
		font-weight: 700;
	}
	.record_date_check_in{
		font-size: 13px;
		line-height: 1.4em;
		letter-spacing: 0.02em;
		color: #282828;
		font-weight: 400;
	}
	.record_purple_check_in{
		font-size: 16px;
		white-space: nowrap;
		width: 50px;
		text-align: center;
		min-width: 48px;
		color: #631549;
		letter-spacing: 0.02em;
		font-weight: 700;
	}
/*記錄End*/


/*掃描成功Start*/
    .scan_background_check_in{
		background-image: url("../images/get-20-f-d-bg.jpg");
		background-size:cover;
		background-position:center;
		width: 100%;
		height: 100%;
		position: fixed;
		
	}	
	.scan_img_check_in{
		width: 82%;
        position: absolute;
		transform: translate(-50%,-50%);
		left: 50%;
		top: 38%;
		max-width: 576px;
	}
	.scan_true_img_check_in{
		opacity: 0;
		width: 100%;
		
	}
	.scan_card_show_check_in{
		animation: cardshow 0.8s;
		animation-fill-mode: forwards;
	}
	
	@keyframes cardshow{
		0%{
			transform: scale(0.8);
			opacity: 0;
		}
		95%{
			transform: scale(1.02);
			opacity: 1;
		}
		100%{
			transform: scale(1);
			opacity: 1;
		}
	}
	.scan_radius_check_in{
		border-radius: 30px;
		overflow: hidden;
	}
	.scan_button_block_check_in{
		position: absolute;
		z-index: 2;
		bottom: 0;
		transform: translateX(-50%);
		left: 50%;
		width: 100%;
		padding-bottom: 20px;
		max-width: 576px;
	}
	.scan_button_check_in{
		width: 90%;
		height: 56px;
		appearance:none;
		-webkit-appearance:none;
		-moz-appearance:none;
		border: none;
		background-color: #631549;
		color: white;
		border-radius: 56px;
		letter-spacing: 0.02em;
		font-size: 16px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
	.scan_close_check_in{
		width: 90%;
		height: 56px;
		appearance:none;
		-webkit-appearance:none;
		-moz-appearance:none;
		border: none;
		background-color: transparent;
		color: #282828;
		border-radius: 56px;
		letter-spacing: 0.02em;
		font-size: 16px;
		display: block;
		margin-left: auto;
		margin-right: auto;
	}
/*掃描成功End*/




/*地點列表Start*/
    .task_1_block_check_in{
		background-color: #EFF0FA;
		border-radius: 20px;
		padding-top: 28px;
		padding-left: 15px;
		padding-right: 15px;
		padding-bottom: 28px;
		margin-top: 20px;
		margin-left: auto;
		margin-right: auto;
		width: 90%;
		margin-bottom: 20px;
	}
	.task_1_text_check_in{
		text-align: center;
        font-size: 16px;
        color: #631549;
        font-weight: 700;
        letter-spacing: 0.02em;
		line-height: 1.5em;
		margin-bottom: 20px;
	}
    .shop_list_flex_check_in{
		background-color: white;
		width: 100%;
		border-radius: 20px;
		padding-top: 12px;
		padding-bottom: 12px;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		margin-top: 28px;
		margin-bottom: 28px;
		height: 88px;
		position: relative;
	}	
	.shop_list_address_check_in{
		font-size: 16px;
		color: #282828;
		font-weight: 700;
		letter-spacing: 0.02em;
		line-height: 1.5em;
	}
	.shop_list_date_check_in{
		font-size: 12px;
		line-height: 1.5em;
		letter-spacing: 0.02em;
		color: #626262;
	}
	.shop_list_ball_check_in{
		width: 88px;
		height: 88px;
		background-color: #631549;
		border-radius: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		letter-spacing: 0.02em;
		color: white;
		font-size: 20px;
		letter-spacing: 0.04em;
		transform: scale(1.1);
		margin-left: 10px;
		background:radial-gradient(circle at center, #631549 0, #a02587 100%);
		box-shadow: 1px 1px 3px rgba(160,37,135,0.5)
	}
	.shop_list_right_block_check_in{
		padding-left: 20px;
	}
/*地點列表End*/