
 body {
	background-color:#fafafa;
 }
	.page_center {
		display:flex;
		align-items:center;
		.page_custom {
			/*margin:120px auto 60px auto;*/
			/*border:1px solid blue;*/
			display:block;
			width:90%; max-width:540px;
			margin: 0 auto; /*min(30px, 4vw);*/
			.check {
				width:min(90px, 11.84vw);
				height:min(90px, 11.84vw);
			}
			.Complete {
				margin-top:min(30px, 4vw);
				font-size:1.4rem;
				font-weight:600;
			}
			.stamp {
				margin-top:min(30px, 4vw);
				font-size:1rem;
				font-weight:500;
				color:#cccccc;
			}

			.Confirm {
				text-align:center;
				margin-top:min(100px, 13.15vw);
				height:min(100px, 13.15vw);
				line-height:min(100px, 13.15vw);
				font-size:1.4rem;
				font-weight:500;
				border-radius:2vw;
				background-color:#2794bb;
				color:#ffffff;
				a { color:#ffffff; }
			}
		}
	}
	.stamp_center {
			position: fixed;
			/*border:1px solid blue;*/
			top:47.37px; /*52.63 min(100px, 13vw); */			
			bottom:95.74px; /*105.26min(200px, 26vw);*/
			left:0; right:0;
			overflow:auto;
			overflow-x:hidden;
			transition: all 0.5s ease-in-out;
			 -ms-overflow-style: none;	/* 인터넷 익스플로러, 엣지 */				
			scrollbar-width: none;/* 3. Firefox용 */
			/* iOS에서 부드러운 관성 스크롤 적용 */
			-webkit-overflow-scrolling: touch;
			scroll-snap-type: x mandatory;

			&::-webkit-scrollbar {
				display: none; /* 크롬, 사파리, 오페라, 엣지(신버전) */
			}


		.stamp_tab {
			display: flex;
			flex-direction: row;
			height:min(100px, 13.15vw);
			/*border:1px solid blue;*/
			.item {
				display:inline-block;
				margin-top: auto;
				vertical-align:bottom;
				font-size:1.28rem;

				width:50%;
				text-align:center;	
				padding-bottom:min(20px, 2.63vw);
				&.on { 
					font-family: 'MyriadPro';
					color:#2794bb;
					font-weight:450;
					border-bottom:2px solid #2794bb;
					cursor:default;
				}				
				&.off {
					color:#29292c;
					font-weight:700;
					cursor:pointer;
				}				
			}
		}

		.stamp_box {
			height:calc(100% - min(120px, 15.78vw));	
			> .on { display:block; }				
			> .off { display:none; }	
			.map_block {
				position:relative;	
				width:100%;
				height:100%;
				.map_box {			
					width:100%;
					height:100%;
					z-index:1;
					/*border:1px solid red;	*/
				}
				.square {
					position:absolute;
					display:block;
					right:min(30px, 3vw);
					width:50px;
					height:50px;line-height:50px;
					background-color:#ffffff;
					border:1px solid #cccccc;
					border-radius:8px;
					text-align:center;
					z-index:2;
					&.map_my {
						top:40px;
						img {
							width:28px;
						}
					}
					&.dio_cg {
						top:100px;
						background-repeat: no-repeat;
						background-position:center;
						background-size:23px auto; /*cover contain; clamp(30px, 50%, 80px)*/

						&.off {
							background-image: url('/common/images/find/category_off.png');
							background-color:#ffffff;
						}
						&.on {
							background-image: url('/common/images/find/category_on.png');
							background-color:#2794bb;
						}
					}
				}
				.diocese {
					position:absolute;
					 /* 크롬, 사파리, 엣지 (WebKit 기반) */
					  &::-webkit-scrollbar {
						display: none;
					  }
					  /* 파이어폭스 */
					  scrollbar-width: none;
					  /* 인터넷 익스플로러, 구형 엣지 */
					  -ms-overflow-style: none;

					padding:min(20px,2.63vw) 0;
					top:154px; right:min(30px,4vw);
					/*border:1px solid red;*/
					background-color:#ffffff;
					border-radius:min(30px,4vw);
					text-align:center;
					width:auto; height:min(600px,78.94vw);
					z-index:10;
					overflow:auto; overflow-x:hidden;
					box-shadow:-2vw -2vw 20px rgba(0, 0, 0, 0.1),2vw 2vw 20px rgba(0, 0, 0, 0.1);
					&.off { display:none; }
					&.on { display:block; }
					li {
						padding:min(20px,2.63vw) min(30px,4vw);
						font-size:0.92rem;
						&.off { 
							color:#29292c;
							background-color:#ffffff; 
							font-weight:400;
						}
						&.on {
							color:#ffffff; 
							background-color:#2794bb;
							font-weight:600;
						}
					}
				}
			}

			.stamp_block {	
				/*border:1px solid green;*/
				/* 스탬프 슬라이드 영역 */
				position:relative;
				margin:0 auto;
				background:#fff;
				overflow:hidden;
				box-shadow:0 10px 30px rgba(0,0,0,0.1);
				width:100%;
				padding:min(60px, 7.8vw) min(30px, 4vw);
				box-sizing: border-box;
				background: linear-gradient(#9ec3d0 50%, #ffffff 50%);
					.stamp_slide_wrap {
						position:relative;
						background-color:#ffffff;
						border-radius:min(30px, 4vw);
						padding:0 min(30px, 4vw) min(40px, 5.26vw) min(30px, 4vw);
						border:1px solid #d6ecf7;
						overflow:auto;
						overflow-y:hidden;
						-ms-overflow-style: none;
						scrollbar-width: none;
						-webkit-overflow-scrolling: touch;
						scroll-snap-type: x mandatory;
						touch-action:pan-y;
						.stamp_slides {
							display:flex;
							/*justify-content: space-evenly;*/
							gap:50px;
							transition:transform .3s ease;
							.stamp_slide {
								position:relative;
								min-width:100%;
								margin:0;
								user-select:none;
								.board_num { 
									height:min(150px, 19.73vw);
									line-height:min(150px, 19.73vw);
									font-size:1.68rem;
									color:#0d3a52;
									font-weight:700;		
								}
								.board_head {
									display:flex;
									justify-content: space-between; 
									align-items: center; 
									margin-bottom:min(30px, 4vw);
									.board_display {
										display:inline-block;
										width:min(220px, 28.94vw);
										text-align:right;
										.display_title {
											display:block;
											font-size:1.52rem;
											font-weight:500;
										}
										.display_plate {
											display:block;
											.num_cnt {
												color:#2793ba;
												font-size:1.52rem;
												font-weight:600;
												vertical-align:bottom;
											}
											.num_total {
												color:#cfcfcf;
												font-weight:500;
												vertical-align:bottom;									
											}
										}
									}
									.board_card{
										display:inline-block;
										width:min(280px, 36.84vw);
										height:min(95px, 12.5vw);
										line-height:min(95px, 12.5vw);
										cursor:pointer;
										border-radius:999px;
										&.on {
											background-color:#2794bb;
											color:#ffffff;
											font-weight:700;	
										}
										&.off {
											background-color:#e2e2e2;
											color:#9a9a9a;
											font-weight:500;	
										}
									}
								}
								.stamp_collect {
									display:flex;
									flex-wrap: wrap; 
									justify-content: space-between; 
									gap: min(30px, 3.94vw); 
									padding:min(60px, 7.8vw) min(30px, 4vw) min(30px, 4vw) min(30px, 4vw);
									background-color:#f2f8fb;
									border-radius:min(30px, 4vw);
									border:1px solid #d6ecf7;
									li {
										display:inline-block;
										text-align:center;
										width:28%;
										margin-bottom:min(30px, 3.94vw);
										.stamp {
											display:block;
											margin:0 auto;
											width:min(100px, 13.15vw); height:auto;
											aspect-ratio: 1 / 1; 
											background-repeat: no-repeat;
											background-position: center;
											background-size:cover;
											&.on { 
												background-image: url('/common/images/stamp/fstamp.png');
											}
											&.off {  
												background-image: url('/common/images/stamp/bstamp.png');	
											}
										}
										.location {
											font-family: 'Inter-Variable';
											text-align:center;
											margin-top:min(15px, 1.97vw);
											width:100%;
											height:min(60px, 7.89vw);
											overflow:hidden;
										}
									}
								}


							}
						}
					}
					/* 도트 */
					.stamp_dots {
						/*position:absolute;
						left:50%;
						bottom:5%;
						transform:translateX(-50%);
						width:auto;
						display:inline-block;*/
						margin:min(30px, 3.94vw);

						.stamp_dot {
							display:inline-block;
							margin: min(25px, 1vw);
							width:min(30px, 3.94vw);
							height:min(30px, 3.94vw);
							border-radius:50%;
							font-size:0;
							transition:.25s;
							cursor:pointer;
							background-color:#e8e8e8;
							color:#e8e8e8;
							&.on {
								background-color:#2794bb;
								color:#2794bb;
							}
						}
					}
				
				/*} 슬라이드 영역 - 끝 */


				.notice_area {
					text-align:left;
					li { 
						list-style-type: disc; /* 채워진 원 (기본값) */
						margin:min(30px, 3.94vw);
					}
				}
			}
		}
		/**Tour Completion Card**/
		.stamp_outline {
			margin:min(60px, 7.8vw) min(30px, 4vw);
			/*border:1px solid green;*/
			.card_box {
				display:block;
				position: relative;
				width:100%; height:auto;
				aspect-ratio: 1 / 1.8;
				border-radius:min(30px, 4vw);
				overflow:hidden;
				background-repeat: no-repeat;
				background-position:center;
				background-size:cover; /*cover contain; clamp(30px, 50%, 80px)*/
				background-color:rgba(0,0,0,0.5);
				color:#ffffff;
				.date {
					position:absolute;
					right:min(30px, 3.94vw);
					top:min(60px, 7.8vw);
					font-weight:700;
					font-size:1.12rem;
					font-family: 'Inter-Variable';
				}
				.info {
					/*border:1px solid green;*/
					position:absolute;
					width:100%;
					text-align:center;
					bottom:0;
					padding-top:min(20px, 2.63vw);
					padding-bottom:min(70px, 9.21vw);
					background: linear-gradient(
						to top,
						rgba(0,0,0,0.5) 0%,
						rgba(0,0,0,0.5) 80%,   /* 여기까지는 단색 */
						rgba(0,0,0,0.5) 80%,  /* 여기서부터 그라데이션 시작 */
						rgba(0,0,0,0.1) 100%
					);
					.nickname {
						font-weight:700;
						font-size:1.68rem;
						margin-bottom:min(60px, 7.8vw);
					}
					.board_num {
						font-family: 'Inter-Variable';
						font-weight:500;
						font-size:1.52rem;
						margin-bottom:min(20px, 2.63vw);
					}
					.conquer {
						font-family: 'Inter-Variable';
						font-weight:500;
						font-size:1.28rem;
					}
					&::before {
						content: "";
						position: absolute;
						top:35%;
						left:min(30px, 3.94vw); right:min(30px, 3.94vw);
						border-top:1px dashed #ffffff;
					}
				}
			}

			.notice_area {
				margin-top:min(50px, 6.57vw);
				text-align:left;
				font-family: 'Inter-Variable';
				font-weight:400;
				font-size:1.12rem;
				line-height:1.2em;
				li { 
					list-style-type: disc; /* 채워진 원 (기본값) */
					margin:min(30px, 3.94vw);
				}
			}

			.card_down {
				text-align:center;
				margin-top:min(100px, 13.15vw);
				height:min(100px, 13.15vw);
				line-height:min(100px, 13.15vw);
				font-size:1.4rem;
				font-weight:500;
				border-radius:4px;
				background-color:#2794bb;
				color:#ffffff;
			}
		}
	}

