@charset "utf-8";
/* @container (min-width: 1920px) { } */
/*aspect-ratio: 16 / 9.3; */
/*border:1px solid red;*/



			.cover_box {
				border-top:1px solid #cccccc;
				position:relative;
				width:100%;
				height:auto; /*289.47px; max-height:549px; clamp(280px, 72vw, 549px); */
				aspect-ratio: 760 / 549;
				background-image: url('/common/images/main/cover.png');
				background-repeat: no-repeat;
				background-position:top left;
				background-size:100% 100%; /*cover contain;*/
				.cover_title {
					text-align:left;
					margin-top:13%;
					margin-left: min(30px, 4vw); 
					line-height:3rem;
					font-size:2.72rem; 
					font-weight:700;
					color:#ffffff;
					-webkit-font-smoothing: antialiased; /* 맥 환경에서 더 선명하게 */
					text-shadow: 0 0 0.1px black; /* 아주 미세한 그림자로 선명도 보정 */
				}
				.cover_guide {
					text-align:left;
					margin-top:3%;
					margin-left: min(30px, 4vw);	
					line-height:1.4rem;
					font-size:1rem;
					font-weight:100;
					color:#ffffff;				
				}
				.cover_visit {
					text-align:center; 
					margin-top:3%;
					margin-left: min(30px, 4vw);	
					font-size:1.2rem;
					font-weight:normal;
					color:#ffffff;					
					background-color:#2794bb;
					width:38%;
					height:2.4rem;
					line-height:2.4rem;
					border-radius:6px;				
				}

				.cover_line {
					position: absolute;
					left:0;right:0;bottom:0;
					height:min(30px, 4vw);
					color:#ffffff;					
					background-color:#ffffff;
					border-top-left-radius:30px;
					border-top-right-radius:30px;
				}
			}
			.navi_box {
				/*border:1px solid red;*/
				display:flex;
				flex-wrap:wrap;
				justify-content: center;
				gap:8vw 1vw;
				margin-top:min(30px, 4vw);
				.navi_pack {
				cursor:pointer;
					display:inline-block;
					vertical-align:top;
					width:calc(22% - 1vw); /*width:80px;*/
					margin:0;
					height:auto;
					text-align:center;
					/*border:1px solid red;*/
					.pic {
					  display: flex;
					  justify-content: center; /* 수평 가운데*/
					  align-items: center;   /*  수직 가운데 */
						margin:0 auto;
						width:90%; height:auto;
						aspect-ratio: 13 / 14;
						text-align:center;
						border-radius:20%;
						box-shadow:-1vw -1vw 10px rgba(25, 25, 25, 0.04),1vw 1vw 10px rgba(0, 0, 0, 0.1);
						/*box-shadow: rgba(25, 25, 25, 0.04) 0 0 1px 0, rgba(0, 0, 0, 0.1) 0 3px 4px 0;*/
						/*height:min(100px, 13vw); line-height:min(100px, 13vw);*/
						img {
							margin:0; padding:0;
							width:60%;
							height:auto; /*max-height:40%;*/
							&.wyd2027 { width:80%; }
						}
					}
					.title {
						display:block;
						color:#29292c;
						margin-top:0.5rem;
						font-size:1rem;
						font-weight:600;
						line-height:1.1rem;
						letter-spacing: -1px;
						/*border:1px solid blue;*/
					}

				}
			}
			.coupon_box {
				margin:63.15px 0; /*min(120px, 15vw) 0; */
				/*border:1px solid blue;*/
				img {
					margin:0; padding:0;
					width:100%; height:auto;/*auto; max-height:250px;*/
				}
			}
			.explore_box {
				position:relative;
				text-align:left;
				margin-left: min(30px, 4vw);
				.explore_title {
					font-size:1.92rem;
					font-weight:700;
					/*letter-spacing: -1px;*/
				}
				.explore_more {
					position:absolute;
					cursor:pointer;
					right:min(50px, 7vw); bottom:0;
					color:#2794bb;
					font-size:1.12rem;
					font-weight:600;
					text-decoration: underline; /* 디테일 조절 (최신 브라우저) */					 
					text-underline-offset: 5px; /* 글자와 밑줄 사이 간격 */
					text-decoration-color: #2794bb; /* 밑줄 색상 */
					text-decoration-thickness: 1px; /* 밑줄 두께 */
				}
				.explore_pluse {
					position:absolute;
					right:min(30px, 4vw); bottom:0;
					color:#2794bb;
					font-size:1.12rem;
					font-weight:400;
				}
			}

			.archdiocese_box {
				text-align:left;
				margin-top: min(80px, 10.5vw);
				margin-left: min(30px, 4vw);
				.archdiocese_title {
					font-size:1.52rem;
					font-weight:600;
				}
				.archdiocese_list { 
					margin-top: min(20px, 2.6vw);
					.diocese_item {
						display:inline-block;
						text-align:center;
						border:2px solid #eeeeee;
						width:24%; max-width:319.19px;
						padding:min(16px, 2vw);
						margin-right:2%;
						border-radius:999px;
						font-weight:600;
						font-size:1.2rem;
						&.on {
							font-weight:700;
							color:#ffffff;
							background-color: #2794bb;
						}
					}
				}
			}

			.diocese_box {
				text-align:left;
				margin-top: min(80px, 10.5vw);
				margin-left: min(30px, 4vw);
				.diocese_title {
					font-size:1.52rem;
					font-weight:600;
				}

				.parish_box {
					/*border:1px solid blue;*/
					margin-top: min(20px, 2.6vw);padding:0;
					overflow:hidden;
					.diocese_list { 
						display: block;
						width:auto;	height:auto;
						/*border:1px solid green;*/
						margin:0;padding:0;
						.line {
							width:auto;	height:auto;
							white-space: nowrap;
							margin-bottom:2%;
						}
						.diocese_item {
							display:inline-block;
							text-align:center;
							border:2px solid #eeeeee;
							width:25%; max-width:209.56px;/*min(210px, 27vw);*/
							padding:2%; /*min(10px, 1.3vw);*/
							margin-right:1%;
							border-radius:999px;
							font-weight:600;
							font-size:1.2rem;
							scroll-snap-align: center; /* 또는 start */
							&.on {
								font-weight:700;
								color:#ffffff;
								background-color: #2794bb;
							}
						}
					}
				}
			}

			.courses_box {
				text-align:right;
				cursor:pointer;
				margin-top: min(60px, 7.8vw);
				margin-right: min(30px, 3.9vw);
				vertical-align:middle;
				.courses_title {
					display:inline-block;
					text-align:center;
					width:auto; max-width:360px;
					padding:min(20px, 2.63vw);
					/*border:1px solid #eeeeee;*/
					font-weight:600;
					font-size:1.2rem;
					color: #2794bb;
					border-radius:5px;
					box-shadow: 2px 2px 4px 2px rgba(0, 0, 0, 0.2);
					img { vertical-align:middle; width:auto; height:12px; margin-left: min(20px, 2.63vw); }
				}
			}
			.map_box {
				border:1px solid #ffffff;/*red*/
				position:relative;
				margin: min(30px, 3.9vw) auto min(120px, 28vw) auto;
				width:calc(100% - 2px);	max-width:760px; height:auto;
				aspect-ratio: 760 / 1160;
				background-image: url('/common/images/main/map760.png');
				background-repeat: no-repeat;
				background-position:center top;
				background-size:cover; /*100% 100% contain;*/

				.pin {
					position:absolute;
					width:min(46px, 6vw); height:auto;
					&.off { display:none; }
					&.on { display:block; }
					&.Seoul { top:14.6%; left:28.7%; }
					&.Daegu { top:53.5%; left:65.7%; }
					&.Gwangju { top:64.5%; left:22.3%; }
					&.Incheon { top:16.5%; left:21.2%; }
					&.Suwon { top:20.7%; left:28%; }
					&.Daejeon { top:38.9%; left:35.9%; }
					&.Busan {  top:64.2%; left:80.2%; }
					&.Andong { top:30%; left:66.7%; }
					&.Cheongju {top:32.2%; left:38.4%;  }
					&.Jeonju { top:48.3%; left:23.6%; }
					&.Jeju { top:89.5%; left:11.5%; }
					&.Chuncheon { top:10%; left:48.3%; }
					&.Uijeongbu { top:9%; left:32.6%; }
					&.Wonju { top:19.5%; left:55.2%; }
					&.Masan { top:65.5%; left:65.5%; }
				}
			}
			.tour_box, .story_box {
				position:relative;
				text-align:left;
				margin: min(100px, 13vw) min(30px, 4vw);
				.tour_title, .story_title {
					font-size:1.92rem;
					font-weight:700;
					letter-spacing: -2px;
				}
				.tour_more, .story_more  {
					position:absolute;
					cursor:pointer;
					right:min(50px, 7vw); bottom:0;
					color:#2794bb;
					font-size:1.12rem;
					font-weight:600;
					text-decoration: underline; /* 디테일 조절 (최신 브라우저) */					 
					text-underline-offset: 5px; /* 글자와 밑줄 사이 간격 */
					text-decoration-color: #2794bb; /* 밑줄 색상 */
					text-decoration-thickness: 1px; /* 밑줄 두께 */
				}
				.tour_pluse, .story_pluse  {
					position:absolute;
					right:min(30px, 4vw); bottom:0;
					color:#2794bb;
					font-size:1.12rem;
					font-weight:400;
				}
			}
			.tour_list {
				margin: min(60px, 8vw) min(30px, 4vw) min(160px, 20vw) min(30px, 4vw);
				text-align:left;
				.list {
					display:block;
					clear:both;
					margin:min(60px, 7.9vw) 0;
					overflow:auto;
					/*border:1px solid red;*/
					.pic { 
						float:left;
						display: flex;
						width:min(220px, 29vw); height:auto;
						aspect-ratio: 1 / 1;
						background-color:#f2f2f2;
						border:1px solid #efefef;
						border-radius:10px;
						margin-right:min(20px, 2.6vw);
						text-align:center;
						img {
							margin:auto;
							width:80%;
						}
					}
					.title {
						width:auto; /*calc(100% - 4px);*/
						height:2em; line-height:1em;
						font-size:1rem;
						font-weight:500;
						white-space: nowrap;
						overflow:hidden;
						text-overflow: ellipsis; 
					}
					.button {
						margin-top:min(20px, 0.5vw);
						span {
							display: inline-block;
							text-align:center;
							width:auto; min-width:min(80px, 10vw);
							padding:min(10px, 1.3vw) min(20px, 2.6vw);
							margin-right:min(20px, 2.6vw);
							border:1px solid #d6d6d6;
							border-radius:6px;
						}
					}
					.info {
						margin-top:min(40px, 8vw);
						font-weight:normal;
						.bookmark,.book_mark  {
							width:min(30px, 4vw); height:auto; 
							vertical-align:top;
						}
						.distance {
							margin-left:0.2em;
							vertical-align:bottom;
						}
						.amount { float:right; }
					}
				}
			}
			.saint_box {
				display:block;
				/*	border:1px solid red;*/
				margin:min(100px, 13vw) 0 min(50px, 6.5vw) 0 0;
				padding:0;				
				width:100%; height:auto; /*min(500px, 65vw);overflow: hidden;*/
		        overflow: auto;
                overflow-y: hidden;
                -ms-overflow-style: none;
                scrollbar-width: none;
                -webkit-overflow-scrolling: touch;
                scroll-snap-type: x mandatory;		
				.saint_slide {
					/*border:1px solid red;*/
					font-size:0;
					margin:0;
					padding:0 0 min(50px, 6.5vw) 0;
					transition: transform 1s ease;
					width:auto; height:auto;
					white-space: nowrap;
					.people {
						display:inline-block;						
						margin:0;
						padding:0 min(28px, 3.68vw) min(50px, 6.57vw) min(28px, 3.68vw);	
						vertical-align:top;
						width: min(420px, 55.2vw); height:auto;					
						overflow: hidden;
						&.off { 
							filter: grayscale(100%);
						}

						.image-section {
							text-align:center;
							width:100%; max-width:420px; height:auto;
							border-top-right-radius:min(60px, 8vw);
							border-bottom-left-radius:min(60px, 8vw);
							aspect-ratio: 3 / 4;
							overflow: hidden;
							 box-shadow:0 min(40px, 5.2vw) min(30px, 4vw) #545454;
							img {
								width:100%; height:auto;
							}
							border:1px solid #ffffff;
							border-bottom:none;
						}
						.info-section {
							position: relative;
							margin-top: max(-160px, -21vw);
							background-color: #2c9dbb;
							color: #ffffff;							
							border-top-right-radius: min(40px, 5.2vw);
							border-bottom-left-radius: min(40px, 5.2vw);
							padding:min(20px, 2.6vw);
							/*border:1px solid red;*/
							text-align:left;
							width:86%; height:auto;	
							box-shadow:0 min(20px, 2.6vw) min(30px, 4vw) #555555;
							.saint_name_en {
								margin: 0;
								font-size: 1.12rem;
								font-weight: 700;
								white-space: nowrap;
								overflow:hidden;
								text-overflow: ellipsis; 
							}

							.saint_kind {
								margin: 5px 0;
								font-size:1rem;
								opacity: 0.9;
								white-space: nowrap;
								overflow:hidden;
								text-overflow: ellipsis; 
							}

							.saint_years {
							  display: inline-block;
							  background: rgba(255, 255, 255, 0.3);
							  padding:5px 12px;
							  border-radius:min(15px, 2vw);
							  font-size: 0.8rem;
							  margin-top: min(10px, 1.3vw);
							}

							.footer-stats {
							  display: flex;
							  justify-content: space-between;
							  align-items: center;
							  margin-top: min(25px, 3.2vw);
							  font-size: 0.8rem;
							  padding-top: min(10px, 1.3vw);
							  .views {
								.eye-icon {
									vertical-align:sub;
									font-size: 1.6rem;
								}
							  }
							  .date {
							  }
							}
						}
					}
				}
			}
			.control_box {
				text-align:center;
				margin:0 0 min(80px, 10.5vw) 0;
				.control_point {
					display:inline-block;
					width:auto;
					span {
						display:inline-block;
						margin: min(25px, 1vw);
						width:min(30px, 4vw);
						height:min(30px, 4vw);
						border-radius:50%;
						font-size:0;
						&.on {
							background-color:#2794bb;
							color:#2794bb;
						}
						&.off {
							background-color:#e8e8e8;
							color:#e8e8e8;
						}
					}
				}
				.control_button {
					display:inline-block;
					margin-left: min(50px, 3vw);
					img {
						width:min(40px, 5.2vw);
						&.on {
							display:inline;
						}
						&.off {
							display:none;
						}
					}

				}
			}

		.terms_box {
			position:relative;
			text-align:left;
			color:#ffffff;
			background-color:#899295;
			font-weight:700;
			padding: min(30px, 4vw);
			.con_box {
				.shot { 
					display:inline-block;
					width:30%;
				}
				.long {
					display:inline-block;
					width:100%;				
				}
				.sns {
					float:right;
					img {
						width:min(60px, 8vw);
					}
					a + a {  margin-left:min(20px, 2.6vw);/* border:1px solid red;*/}
				}
				a { color:#ffffff; }

			}
			.cycle {
				position:absolute;
				display:inline-block;
				/*border:1px solid red;*/
				cursor:pointer;
				text-align:center;
				top:max(-100px, -13vw);
				right:min(30px, 4vw);
				width:min(75px, 10vw);
				height:min(75px, 10vw); line-height:min(75px, 10vw);
				border-radius:50%;
				background-color:#ffffff;
				box-shadow:1px 1px 14px #888888;
				img {
					width:50%; height:auto;
				}
			}
		}
		.ceo_box {
			margin-top: min(60px, 8vw);
			color:#dfe1e2;
			font-weight:100;
			li {
				display:block;
				&.right {
					margin-top:min(20px, 2.6vw);
				}
			}
		}

/*--------모바일 관리-----------------------------*/
	@media screen and (max-width: 500px) {
		.diocese_box {
			.parish_box {
				/*border:1px solid green;*/
				overflow:auto; overflow-y:hidden;
				-ms-overflow-style: none; /* 인터넷 익스플로러 (IE), 엣지 */
				scrollbar-width: none;    /* 파이어폭스 (Firefox) */
				&::-webkit-scrollbar {
					display: none; /* 크롬, 사파리, 오페라, 엣지(Blink 기반) */
				}
			}
		}
	}