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

/**Saints' Story*****************************************/
	.page_center {
		display:flex;
		flex-direction: column; 
		.search_box {
			display:block;
			margin:min(50px, 6.57vw) min(30px, 4vw);
			height:50px;line-height:50px;
			border:2px solid #cccccc;
			border-radius:999px;
			background-color:#ffffff;
			text-align:center;
			input[type='search'] {
				/*border:1px solid red; */
				font-size:16px;
				padding:min(10px, 1.3vw) min(20px, 2.6vw);
				width:calc(100% - 80px);
				border-radius:999px;
			}
			.search_icon {
				margin-left:10px;
				margin-right:4px;
				width:26px; height:auto;
			}
		}
		.bi_box {
			a { color:#000000; }
		}
		.saint_list {
			flex:1;
			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; /* 크롬, 사파리, 오페라, 엣지(신버전) */
			}
				/*border:1px solid red;*/
			.saint_box {
				/*display: flow-root;
				overflow:hidden;*/
				position:relative;
				border-bottom:1px solid #eeeeee;
				margin:min(30px, 4vw) min(30px, 4vw) 0 min(30px, 4vw);
				padding-bottom:min(30px, 4vw);
				text-align:left;
				li {
					margin-bottom:min(15px, 2vw);
					line-height:1em;;
				}
				.saint_im {
					float:left;
					border:1px solid #e7e7e7;
					background-color:#f2f2f2;
					margin-top:0;
					margin-right:min(20px, 2.6vw);
					width:min(190px, 25vw); height:auto;
					aspect-ratio: 19 / 20;
					border-radius:min(15px, 1.9vw);
					overflow:hidden;
					img {
						width:min(190px, 25vw);
						height:auto; /*min(255px, 33.55vw);*/
					}
				}
				.saint_name_en {
					font-size:1.12rem;
					font-weight:700;
				}
				.saint_kind {
					font-size:0.86rem;
					font-weight:400;
				}

				.saint_years {
					margin:min(20px, 2.6vw);
					span {
						display:inline-block;
						text-align:center;
						width:min(150px, 19.73vw);
						height:min(50px, 6.57vw); line-height:min(50px, 6.57vw);
						font-size:1rem;
						font-weight:300;
						background-color:#d4eaf1;
						border-radius:999px;
						font-weight:400;
					}
				}
				.good {			
					display:inline-block;
					position:absolute;
					left:min(150px, 19.73vw); 
					top:min(160px, 21.05vw);
					width:min(30px, 4vw);
					height:min(30px, 4vw); line-height:min(30px, 4vw);

						background-repeat: no-repeat;
						background-position:center 30%;
						background-size:contain; /*cover contain; clamp(30px, 50%, 80px)*/

						&.on { background-image: url('/common/images/about/good_on.png'); }
						&.off { background-image: url('/common/images/about/good_off.png'); }
				}
				.saint_look {
					font-size:1rem;
					font-weight:300;
					line-height:min(30px, 4vw);
					/*border:1px solid red;*/
					font-weight:300;	
					.icon {
						width:min(30px, 4vw);
						height:auto;
					}
					.count {
						margin-left:min(20px, 2.6vw);		
					}
					.wdate {
						float:right;
						transform:translateY(50%);
					}
				}
			}
		}

		.saint_page {
			display: flex;
			justify-content: space-between;
			align-items: center; /* 수직(교차축) 중앙 정렬 */
			height:min(150px, 19.73vw);
			line-height:min(150px, 19.73vw);
			margin:0 0 min(20px, 2.6vw) 0;
			padding:min(30px, 4vw);
			/*border:1px solid red;*/
			/*box-shadow: 0 10px 10px -5px rgba(0, 0, 0, 0.3);*/
			.arr {
				width:16px; height:auto;
			}
			.num {
				display:inline-block;
				text-align:center;
				width:35px; height:35px; line-height:35px;
				/*border:1px solid red;*/
				border-radius:50px;
				font-size:16px; /*1.28rem;*/
				font-weight:500;

				&.none {
					img { width:90% }
				}
				&.on { 
					background-color:#2793ba;
					color:#ffffff;

				}
			}
		}
	}
	.page_bottom {
		box-shadow: 0 -5px 10px rgba(0, 0, 0, 0.2);
	}
/**Saints' Story - view *****************************************/

		.like_box {
			.good {
				display:inline-block;
				width:20px; height:20px;
				margin-right:20px;
				background-repeat: no-repeat;
				background-position:top left;
				background-size:contain; /*cover contain; clamp(30px, 50%, 80px)*/

				&.on { background-image: url('/common/images/about/good_on.png'); }
				&.off { background-image: url('/common/images/about/good_off.png'); }
			}
		}
	.saint_top {
		/*border:1px solid red;#eeeeee*/
		padding:min(55px, 7.23vw) min(30px, 4vw);
		background-color:#0d3a52;
		text-align:left;
		.saint_data {
			position:relative;
			display:inline-block;
			width:calc(100% - min(310px, 40.78vw));
			margin:0;padding:0; 
			li {
				margin-bottom:min(15px, 2vw);
				line-height:1em;
				color:#ffffff;
			}
			.saint_years {	
				font-size:1rem;
				font-weight:300;
			}

			.saint_name_en {
				font-size:1.52rem;
				font-weight:700;
			}
			.saint_name_kr {
				position:relative;
				font-size:1.12rem;
				font-weight:400;
				/*border:1px solid red;*/
				margin-top:min(20px, 2.6vw);				
			}
			.saint_kw {
				margin:min(60px, 7.8vw) 0;
				font-size:1.12rem;
				font-weight:400;
				span {
					border:1px solid #ffffff;
					border-radius:999px;
					padding:min(10px, 1.3vw);
				}
			}
			.saint_look {
				font-size:1rem;
				font-weight:300;
				line-height:min(30px, 4vw);
				/*border:1px solid red;*/
				font-weight:300;	
				.icon {
					width:min(30px, 4vw);
					height:auto;
				}
				.count {
					margin-left:min(20px, 2.6vw);		
				}
				.wdate {
					float:right;
					transform:translateY(50%);
				}
			}
		}
		.saint_im {
			float:right;
			display:inline-block;
			vertical-align:top;
			background-color:#f2f2f2;
			margin:0;
			width:min(270px, 35.52vw); height:auto;
			aspect-ratio: 3 / 4;
			overflow:hidden;
			img {
				width:100%;
				height:auto; 
			}
		}
	}

	.saint_sum {
		position: relative;
		display: flex;
		align-items: center;
		justify-content: center;
		height:min(320px, 42.10vw);
		text-align:center;
		padding:0;	
		color:#0d3a52;
		font-family: 'NotoSerifItalic';	
		font-size:1.92rem;
		font-weight:500;
		line-height:1.5;
		/*border:1px solid green;*/
		&::before {
			content: "";
			position: absolute;
			top:85%;
			left: 50%;
			transform:translateX(-50%);
			height:min(4px, 0.8vw);
			width:min(100px, 13.15vw);
			background-color:#2794bb;
		}

	}
	.who_box {
		text-align:left;
		/* border:1px solid green; */
		padding:min(60px, 7.8vw) min(30px, 4vw);
		.who {
			.who_text {
				font-size:1.52rem;
				font-weight:700;
				color:#2794bb;
				margin-bottom:min(30px, 4vw);
			}
		}
		.saint_who {
			margin:0 auto;
			font-size:1.12rem;
			font-weight:400;
			line-height:1.5;
		}
	}

	.connection_box {
		text-align:left;		
		padding:min(60px, 7.8vw) min(30px, 4vw);
		.connection_text {
			font-size:1.52rem;
			font-weight:700;
			color:#2794bb;
			margin-bottom:min(30px, 4vw);
		}
		.connection {
			margin-bottom:min(30px, 4vw);
			.person_box {
				/*border:2px solid #2794bb;*/
				border-radius:min(20px, 2.6vw);
				background-color:#f2f8fb;
				padding:min(40px, 5.26vw) min(30px, 4vw);
				margin-bottom:min(30px, 4vw);
				.saint_cnec {
					font-size:1.12rem;
					font-weight:400;
					line-height:2em;
					color:#a3a3a3;
				}
				.cnec_name {
					font-size:1.28rem;
					font-weight:700;
					line-height:1.6em;					
				}
				.cnec_text {
					font-size:1.12rem;
					font-weight:400;		
				}
			}
		}
		.cnec_sum {
			margin-top:min(90px, 9.21vw);
			text-align:center;
			font-size:1.12rem;
			font-weight:700;
			line-height:1.6em;	
		}
	}
	.happened_box {
		text-align:left;		
		padding:min(60px, 7.8vw) min(30px, 4vw);
		background-color:#ffffff;
		.happened_text {
			font-size:1.52rem;
			font-weight:700;
			color:#2794bb;
			margin-bottom:min(30px, 4vw);
		}
		.story_box {
			position: relative;
			/*border:1px solid red;*/
			.story_item {
				position: relative;
				padding-bottom:min(60px, 8vw);
				&::before {
					position: absolute;
					content: "";              
					display: inline-block;    
					width:min(12px, 2.5vw);              
					height:min(12px, 2.5vw);              
					top:4px; left:12%;
					transform: translateX(-50%);
					background-image: url('/common/images/about/smallw.png');
					background-size: contain;  /* 이미지가 영역에 꽉 차게 */
					background-repeat: no-repeat;
					z-index:2;
				}
				&:not(:last-child)::after {
					content: "";
					position: absolute;
					top:min(12px, 2.5vw); bottom:-4px;
					left:calc(12% - 1px); width:1%;
					border-left:1px solid #abb3bc;
					z-index:0;
				}

				.story_year {
					display:inline-block;
					vertical-align:top;
					width:10%;
					font-size:1.12rem;
					font-weight:700;
				}
				.story_text {
					display:inline-block;
					vertical-align:top;
					width:84%;
					margin-left:2%;
					padding-left:3%;
					font-size:1.12rem;
					font-weight:400;
				}
			}
		}
	}
	.place_box {
		text-align:left;		
		padding:min(30px, 4vw);
		/*background-color:#e4f1f7;*/

		.place_text {
			font-size:1.52rem;
			font-weight:700;
			color:#2794bb;
			margin-bottom:min(40px,5.26vw);
		}
		.place_tab {
			display: flex;
			justify-content: space-between;
			align-items: center; /* 수직(교차축) 중앙 정렬 */
			font-size:1.28rem;
			font-weight:700;
			color:#2794bb;
			margin-top:min(60px,7.89vw);
			.num {
				display:inline-block;
				padding:min(20px, 2.63vw) min(10px, 1.35vw);
				border-radius:999px;
				width:min(100px, 13.15vw);
				border:2px solid #2794bb;
				text-align:center;
				&.on { background-color:#2794bb;  color:#ffffff;}
				&.off { }
			}
		}
		.saint_map {
			width:100%;
			height:min(400px, 52.63vw);
			margin-top:min(30px, 4vw);
			overflow:hidden;
			border:1px solid #cccccc;
			border-radius:min(10px, 1.3vw);
		}
		.place_info {
			.place_part {
				&.on { display:block; }
				&.off { display:none; }
				.saint_spot_title {
					font-size:1.28rem;
					font-weight:600;
					margin:min(40px, 5.26vw) 0 min(30px, 4vw) 0;					
				}
				.story_spot_con {
					font-size:1.12rem;
					font-weight:300;				
				}
				.story_spot_text {
					margin:min(30px, 4vw) 0;	
					font-size:1.12rem;
					font-weight:400;	
				}

				.story_spot_dr {
					display:inline-block;
					margin-top:min(40px, 5.26vw);
					text-align:center;
					width:40%;
					height:min(90px,11.84vw); line-height:min(90px,11.84vw); 
					font-size:1.28rem;
					font-weight:500;
					color:#abacac;
					border:1px solid #dedede;
					border-radius:min(10px, 1.3vw);
					img {
						width:min(40px, 5.26vw);
						height:min(40px, 5.26vw);
						margin:0 min(10px, 1.3vw);	
					}
				}
			}
		}
	}
	.matters_box {
		text-align:left;
		margin:min(100px, 13.15vw) min(30px, 4vw) min(30px, 4vw) min(30px, 4vw);
		.matters_text {
			font-size:1.52rem;
			font-weight:700;
			color:#2794bb;
			margin-bottom:min(40px,5.26vw);
		}
		.matters_list {
			margin:min(50px, 65.78vw) 0;
			background-color:#f2f8fb;
			border:1px solid #d6ecf7; 
			border-radius:min(10px, 1.3vw);
			.matters_piece {
				& + & { border-top:1px solid #d6ecf7; }
				padding:min(40px,5.26vw) min(30px, 4vw) min(40px,5.26vw) min(70px, 9.2vw);
				.story_say_title {
					font-size:1.12rem;
					font-weight:600;
					line-height:2em;
				}
				.story_say_text {
					position: relative;
					font-weight:400;
					.dot {
						position: absolute;
						left:min(-15px, -1.9vw);
						font-size:6px;
						color:#2794bb;
					}
				}
			}
		}
	}
	.saint_say_box {
		display: flex;
		flex-direction: column; 
		justify-content: center;
		align-items: center; /* 수직(교차축) 중앙 정렬 */
		margin:min(80px,10.52vw) min(30px, 4vw);
		padding:min(30px, 4vw);
		border-radius:min(10px, 1.3vw);
		background-color:#0d3a52;
		color:#ffffff;
		height:min(300px, 39.47vw);
		.saint_say_title {
			font-size:1.12rem;
			font-family: 'NotoSerifItalic';	
			font-weight:100;
			line-height:2em;
			  -webkit-font-smoothing: antialiased;    /* Chrome, Safari */
			  -moz-osx-font-smoothing: grayscale;    /* Firefox (macOS) */
		}
		.saint_say { 
			padding:min(30px, 4vw) 0 min(60px, 8vw) 0 ;
			font-size:1.28rem;
			font-family: 'NotoSerifItalic';	
			font-weight:500;
			line-height:1.2em;
		}
		.saint_line { 
			display:inline-block;
			/*margin:min(30px, 4vw) auto;*/
			width:min(50px, 6.57vw);
			height:2px;
			background-color:#2794bb;

		}
	}

	.share_box { 
		margin:min(40px,5.26vw);
		text-align:center;
		.share_title {
			width:40%;
			margin:0 auto;
			height:min(90px,11.84vw); line-height:min(90px,11.84vw); 
			background-color:#f2f8fb;
			border:1px solid #d6ecf7;
			border-radius:min(10px, 1.3vw);
			color:#2794bb;
			font-size:1.28rem;
			cursor:pointer;
			img {
				width:min(40px,5.26vw); height:auto;
				margin-left:min(10px, 1.3vw)
			}
		}
	}

	.next_box { 
		margin:min(90px,11.84vw) min(30px,4vw);
		text-align:left;
		.next_title {
			font-size:1.52rem;
			font-weight:700;
			margin-bottom:min(40px,5.26vw);
		}

		.next_list { 
			position:relative;
			background-color:#ffffff;
			width:100%;
			overflow:hidden;
			/* border:1px solid red;*/
			.arrow {
				position:absolute;
				cursor:pointer;
				top:50%;
				transform: translateY(-50%);
				width:min(25px,3.28vw);
				height:min(40px,5.26vw);
				&.on { display: block; }
				&.off { display: none; }
				&.left { left:0; }
				&.right { right:0; }/*min(30px,4vw)*/
			}
			.next_slide { 
				display:inline-block;
				width:100%;
				white-space: nowrap;
				transition: transform 1s ease;
				overflow:hidden;
				.next_item {
					display:inline-block;
					position:relative;
					/*border-bottom:1px solid #eeeeee;*/
					overflow:hidden;
					width:calc(100% - min(70px, 9.2vw));
					/*min-width:300px;*/
					max-width:min(82vw, 500px);
					margin:0 min(70px, 9.2vw) 0 0;
					padding:0;
					text-align:left;
					li {
						margin-bottom:min(15px, 2vw);
						line-height:1em;
					}
					.saint_im {
						float:left;
						/*border:1px solid #e7e7e7;*/
						background-color:#f2f2f2;
						margin-top:0;
						margin-right:min(20px, 2.6vw);
						width:min(190px, 25vw); height:auto;
						aspect-ratio: 3 / 4;
						border-radius:min(10px, 1.3vw);
						overflow:hidden;
						img {
							width:min(190px, 25vw);
							height:auto; /*min(255px, 33.55vw);*/
						}
					}
					.saint_years {
						margin:min(20px, 2.6vw);
						color:#abacac;
						font-size:1rem;
						font-weight:400;
					}
					.saint_name_en {
						font-size:1.12rem;
						font-weight:700;
					}
					.saint_kind {
						position:absolute;
						left:min(220px, 28.94vw);
						bottom:0;
						font-size:0.86rem;
						font-weight:400;
					}
				}
			}
		}
	}

	.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(-50px, -6.57vw);
			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);
				}
			}
		}

	}

/*Catholicism in Korea*****************************/
	.page_top {
		border-bottom:1px solid #eaeaea; 
	}
	.Catholicism_block {
		margin:min(50px, 6.57vw) min(30px, 4vw) min(90px, 11.84vw) min(30px, 4vw);
		.Catholicism_title {
			text-align:left;
			color:#0d3a52;
			font-size:1.52rem;
			font-weight:700;
		}
		.Catholicism_list {
			border:1px solid #ffffff;
			.Catholicism_box {
				position:relative;
				text-align:left;
				margin:min(50px, 6.57vw) 0;
				padding:min(30px, 4vw);
				border-radius:min(20px, 2.63vw);
				width:auto; height:auto;
				box-shadow: 0 -4px 0 0 #2794bb;
				/*min(30px, 4vw);*/
				background-repeat: no-repeat, no-repeat;
				background-position:95% 90%, left top;
				background-size:20% 30%, 100% min(500px, 65.78vw);
		
				.Catholicism_H1 {
					position:relative;
					font-family: 'NotoSerifItalic'; 
					color:#0d3a52;
					font-size:2.72rem;
					font-weight:700;
					font-style: italic;
					&::before {
						content: "";
						position: absolute;
						top:50%;
						left:min(140px, 18.42vw);
						right:min(90px, 11.84vw);
						border-top:2px solid #abb3bc; 
					}

					.updown {
						position:absolute;
						top:50%;
						transform:translateY(-50%);
						right:0;
						width:min(30px, 4vw); height:auto;
						transition: all 0.5s ease-in-out;					
					}
				}
				.Catholicism_H2 {
					margin-top:min(30px, 4vw);
					color:#0d3a52;
					font-size:1.52rem;
					font-weight:700;
				}
				.Catholicism_memo {
					display:block;
					margin-top:min(30px, 4vw);
					width:min(450px, 59.51vw);
					height:0; /*min(200px, 26.31vw);*/
					transition:transform 1s ease;
					overflow:hidden;
				}

				&:nth-child(1) {
					background-image:none,url('/common/images/about/about-korea_Catholicism_bg.png'); 
				}
				&:nth-child(2) {
					background-image:none,url('/common/images/about/about-korea_Catholicism_bg.png'); 
				}			
				&:nth-child(3) {
					background-image:none,url('/common/images/about/about-korea_Catholicism_bg.png'); 
				}
				&:nth-child(4) {
					background-image:none,url('/common/images/about/about-korea_Catholicism_bg.png'); 
				}
				&:nth-child(5) {
					background-image:none,url('/common/images/about/about-korea_Catholicism_bg.png'); 
				}
				&.on {
					&:nth-child(1) {
						background-image:url('/common/images/about/q1.png'),url('/common/images/about/about-korea_Catholicism_bg.png'); 
					}
					&:nth-child(2) {
						background-image:url('/common/images/about/q2.png'),url('/common/images/about/about-korea_Catholicism_bg.png'); 
					}			
					&:nth-child(3) {
						background-image:url('/common/images/about/q3.png'),url('/common/images/about/about-korea_Catholicism_bg.png'); 
					}
					&:nth-child(4) {
						background-image:url('/common/images/about/q4.png'),url('/common/images/about/about-korea_Catholicism_bg.png'); 
					}
					&:nth-child(5) {
						background-image:url('/common/images/about/q5.png'),url('/common/images/about/about-korea_Catholicism_bg.png'); 
					}
					.updown { transform: rotate(180deg); } 
					.Catholicism_memo {height:auto;}
				}

			}
		}

		.Timeline_title {
			margin-top:min(60px, 7.89vw);
			text-align:left;
			color:#0d3a52;
			font-size:1.52rem;
			font-weight:700;
		}
		.Timeline_list {
			text-align:left;
			.Timeline_box {
				/*border:1px solid red;*/
				position:relative;
				margin-left:min(80px, 10.52vw);
				margin-bottom:min(50px, 6.57vw);
				&::before {
					position: absolute;
					content: "";              
					display: inline-block;    
					width:min(12px, 2.5vw);              
					height:min(12px, 2.5vw);              
					top:min(60px, 7.89vw); 
					left:max(-50px, -6.57vw);
					transform: translateX(-50%);
					background-image: url('/common/images/about/smallr.png');
					background-size: contain;  /* 이미지가 영역에 꽉 차게 */
					background-repeat: no-repeat;
					background-position:0 0;
					z-index:2;
				}
				&:not(:last-child)::after {
					position: absolute;
					content: ""; 
					top:min(60px, 7.89vw); 
					left:max(-52px, -6.84vw);
					bottom:max(-110px, -14.47vw);
					width:2px;
					background-color:#abb3bc;
					z-index:0;
				}
				.Timeline_year {
					display:inline-block;
					width:auto;
					text-align:center;
					margin:min(40px, 5.26vw) 0 min(15px, 1.97vw) 0;
					color:#e32626;
					font-size:1.52rem;
					font-weight:700;
					background-color:#faeded;
					padding:min(5px, 0.65vw) min(20px, 2.6vw);
					border-radius:min(10px, 1.31vw);
				}
				.Timeline_subject {
					color:#0d3a52;
					font-size:1.12rem;
					font-weight:700;
					line-height:1.2em;

				}
				.Timeline_memo {
					margin-top:min(30px, 4vw);
					font-size:1.12rem;
					font-weight:400;
				}
			}
		}
	}