@charset "UTF-8";

/* KV */
#kv {
	width: 100%;
	margin: 0 auto;
	padding: 0;
	position: relative;
}
	#kv:before {
		opacity: 0;
		position: absolute;
		content: '';
		display: block;
		width: 100%;
		height: 900px;
		background: url(../images/top/kv_bg.png) center / cover no-repeat;
		top: 0;
		left: 0;
	}
		#kv.scrollin:before {
			-webkit-animation: bottomIn 0.2s ease-out 0s 1 forwards;
			animation: bottomIn 0.2s ease-out 0s 1 forwards;
		}
	#kv div.txt_slide {
		position: absolute;
		opacity: 0;
		margin: 0;
		padding: 0;
		display: flex;
		top: 30px;
		left: 0;
	}
		#kv div.txt_slide.scrollin {
			-webkit-animation: bottomIn 0.2s ease-out 0.3s 1 forwards;
			animation: bottomIn 0.2s ease-out 0.3s 1 forwards;
		}
		#kv div.txt_slide p {
			margin: 0;
			padding: 0 0 0 0.3em;
			font-size: 400px;
			line-height: 100%;
			font-family: "Cairo", sans-serif;
			font-optical-sizing: auto;
			font-weight: var(--weight-bold1);
			font-style: normal;
			white-space: nowrap;
			color: rgba(244,245,249,0.6);
		}
		#kv div.txt_slide p:nth-of-type(odd) {
			padding-top: 50px;
			padding-right: 700px;
			animation: loop 130s -65s linear infinite;
		}
		#kv div.txt_slide p:nth-of-type(even) {
			padding-top: 350px;
			padding-right: 700px;
			animation: loop2 130s linear infinite;
		}
@keyframes loop {
	0% {
		transform: translateX(100%);
	}
	to {
		transform: translateX(-100%);
	}
}
@keyframes loop2 {
	0% {
		transform: translateX(0);
	}
	to {
		transform: translateX(-200%);
	}
}
	#kv div.kv_in {
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
		padding: 570px 0 130px;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		align-items: flex-end;
		position: relative;
		z-index: 2;
	}
		#kv div.kv_in h2 {
			opacity: 0;
			margin: 0;
			padding: 0;
			font-size: 54px;
			line-height: 150%;
			font-weight: var(--weight-bold2);
		}
			#kv div.kv_in h2 small {
				display: block;
				margin: 10px 0 0;
				padding: 0;
				font-size: 28px;
				line-height: 160%;
				font-weight: var(--weight-nomal);
			}
		#kv div.kv_in h3 {
			opacity: 0;
			margin: 25px 0 0;
			padding: 0;
			font-size: 20px;
			line-height: 160%;
			font-family: "Cairo", sans-serif;
			font-optical-sizing: auto;
			font-weight: var(--weight-bold1);
			font-style: normal;
			color: #0D3383;
		}
		#kv div.kv_in h2.scrollin {
			-webkit-animation: bottomIn 0.2s ease-out 0.6s 1 forwards;
			animation: bottomIn 0.2s ease-out 0.6s 1 forwards;
		}
		#kv div.kv_in h3.scrollin {
			-webkit-animation: bottomIn 0.2s ease-out 0.6s 1 forwards;
			animation: bottomIn 0.2s ease-out 0.6s 1 forwards;
		}

/* information */
#information {
	margin: 0 auto;
	padding: 170px 0;
	background: linear-gradient(to right, #0F3381, #0E6D4D);
}
	#information div.info_in {
		width: 1120px;
		margin: 0 auto;
		padding: 0;
		display: flex;
		justify-content: space-between;
	}
		#information div.info_in div.info_cont {
			opacity: 0;
			width: 650px;
			height: 265px;
			margin: 0;
			padding: 35px 60px 0;
			color: #fff;
			text-align: left;
			background: rgba(7,152,131,0.2);
			border-radius: 20px;
		}
			#information div.info_in div.info_cont.scrollin {
				-webkit-animation: bottomIn 0.2s ease-out 0s 1 forwards;
				animation: bottomIn 0.2s ease-out 0s 1 forwards;
			}
			#information div.info_in div.info_cont h2 {
				margin: 0;
				padding: 0;
				font-size: 34px;
				line-height: 160%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: normal;
			}
			#information div.info_in div.info_cont ul {
				margin: 0;
				padding: 5px 0 0 30px;
				list-style: none;
			}
				#information div.info_in div.info_cont ul li {
					margin: 10px 0 0;
					padding: 0;
				}
					#information div.info_in div.info_cont ul li a {
						display: inline-block;
						margin: 0;
						padding: 0;
						font-size: 16px;
						line-height: 180%;
						color: #fff;
						text-decoration: none;
						position: relative;
					}
						#information div.info_in div.info_cont ul li a:after {
							position: absolute;
							content: '';
							display: block;
							width: 14px;
							height: 12px;
							margin: 0;
							padding: 0;
							background: url(../images/icon/link_ico.png) center / contain no-repeat;
							top: 9px;
							right: -20px;
						}
						#information div.info_in div.info_cont ul li a:hover {
							text-decoration: underline;
						}
						#information div.info_in div.info_cont ul li a span,
						#information div.info_in div.info_cont ul li em span {
							display: inline-block;
							margin: 0 30px 0 0;
							padding: 0;
							font-size: 17px;
							line-height: 160%;
							font-family: "Cairo", sans-serif;
							font-optical-sizing: auto;
							font-weight: var(--weight-bold1);
							font-style: italic;
						}
		#information div.info_in a.service {
			opacity: 0;
			display: block;
			width: 415px;
			height: 265px;
			margin: 0;
			padding: 50px 60px 0;
			text-align: left;
			text-decoration: none;
			border-radius: 20px;
			background: url(../images/top/service_bg.png) bottom right / 89px auto no-repeat ,#fff;
		}
			#information div.info_in a.service.scrollin {
				-webkit-animation: bottomIn 0.2s ease-out 0.2s 1 forwards;
				animation: bottomIn 0.2s ease-out 0.2s 1 forwards;
			}
			#information div.info_in a.service:hover {
				opacity: 0.8;
			}
			#information div.info_in a.service h2 {
				margin: 0;
				padding: 0;
				font-size: 34px;
				line-height: 160%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: normal;
				color: #0D3383;
			}
			#information div.info_in a.service p {
				margin: 20px 0 0;
				padding: 0;
				font-size: 16px;
				line-height: 200%;
				color: #000;
			}

/* About */
#about {
	margin: 40px 40px 0;
	padding: 125px 0 40px;
	background: #F4F4F5;
	border-radius: 20px;
	position: relative;
}
	#about:before,
	#about:after {
		position: absolute;
		content: '';
		display: block;
		margin: 0;
		padding: 0;
	}
	#about:before {
		width: 765px;
		height: 348px;
		background: url(../images/top/about_bg1.png) center / contain no-repeat;
		top: 0;
		left: 565px;
		z-index: 1;
	}
	#about:after {
		width: 273px;
		height: 223px;
		background: url(../images/top/about_bg2.png) center / contain no-repeat;
		bottom: 0;
		left: 60px;
		z-index: 1;
	}
	#about div.about_in {
		width: 100%;
		max-width: 1280px;
		margin: 0 auto;
		padding: 0 140px 190px 40px;
		text-align: left;
		position: relative;
		z-index: 2;
	}
		#about div.about_in h3 {
			margin: 0;
			padding: 0;
			display: flex;
			flex-direction: column;
			align-items: flex-start;
		}
			#about div.about_in h3 p {
				opacity: 0;
				display: inline-block;
				margin: 0;
				padding: 0;
				position: relative;
				overflow: hidden;
			}
				#about div.about_in h3 p.scrollin {
					-webkit-animation: FadeIN 0.2s ease-out 0s 1 forwards;
					animation: FadeIN 0.2s ease-out 0s 1 forwards;
				}
				#about div.about_in h3 p span {
					opacity: 0;
					display: inline-block;
					margin: 0;
					padding: 0;
					font-size: 80px;
					line-height: 130%;
					font-family: "Cairo", sans-serif;
					font-optical-sizing: auto;
					font-weight: var(--weight-bold1);
					font-style: normal;
					background: linear-gradient(to right, #0E3383, #13823B);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

				}
				#about div.about_in h3 p:first-of-type span {
					background: linear-gradient(to right, #0E3383, #104670);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}
					#about div.about_in h3 p span.scrollin {
						-webkit-animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
						animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
					}
				#about div.about_in h3 p:after {
					opacity: 0;
					position: absolute;
					content: '';
					display: block;
					width: 100%;
					height: 100%;
					background: linear-gradient(to right, #0E3383, #13823B);
					bottom: 0;
					left: 0;
					right: 0;
					top: 0;
				}
				#about div.about_in h3 p:after {
					opacity: 0;
					position: absolute;
					content: '';
					display: block;
					width: 100%;
					height: 100%;
					background: linear-gradient(to right, #0E3383, #13823B);
					bottom: 0;
					left: 0;
					right: 0;
					top: 0;
				}
					#about div.about_in h3 p:first-of-type:after {
						background: linear-gradient(to right, #0E3383, #104670);
					}
					#about div.about_in h3 p.scrollin:after {
						animation: mask-bg 1.0s cubic-bezier(0.8, 0, 0.170, 1) 0s 1 forwards;
					}

		#about div.about_in h2 {
			margin: 15px 0 0;
			padding: 0;
			font-size: 20px;
			line-height: 180%;
			color: #0E3383;
			font-weight: var(--weight-nomal);
		}
		#about div.about_in div.txt {
			margin: 0;
			padding: 50px 0 0;
			display: flex;
			flex-direction: column;
			align-items: flex-end;
		}
			#about div.about_in div.txt p {
				width: 810px;
				margin: 15px 0 0;
				padding: 0;
				font-size: 16px;
				line-height: 200%;
			}
			#about div.about_in div.txt h4 {
				width: 810px;
				margin: 75px 0 0;
				padding: 0;
				font-size: 26px;
				line-height: 180%;
				font-weight: var(--weight-bold2);
			}
		#about div.about_in h5 {
			position: absolute;
			margin: 0;
			padding: 0;
			font-size: 58px;
			line-height: 160%;
			font-family: "Cairo", sans-serif;
			font-optical-sizing: auto;
			font-weight: var(--weight-bold1);
			font-style: normal;
			color: #fff;
			bottom: 0;
			right: 0;
		}

/* Our Service */
#service {
	width: 100%;
	max-width: 1280px;
	margin: 180px auto 0;
	padding: 0 40px 180px;
}
	#service div.ttl {
		margin: 0 auto;
		padding: 0;
		text-align: left;
		position: relative;
	}
		#service div.ttl h3 {
			opacity: 0;
			display: inline-block;
			margin: 0;
			padding: 0;
			position: relative;
			overflow: hidden;
		}
			#service div.ttl h3.scrollin {
				-webkit-animation: FadeIN 0.2s ease-out 0s 1 forwards;
				animation: FadeIN 0.2s ease-out 0s 1 forwards;
			}
			#service div.ttl h3 span {
				opacity: 0;
				display: inline-block;
				margin: 0;
				padding: 0;
				font-size: 80px;
				line-height: 130%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: normal;
				background: linear-gradient(to right, #0E3383, #13823B);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#service div.ttl h3 span.scrollin {
				-webkit-animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
				animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
			}
		#service div.ttl h3:after {
			opacity: 0;
			position: absolute;
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(to right, #0E3383, #13823B);
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
		}
			#service div.ttl h3.scrollin:after {
				animation: mask-bg 1.0s cubic-bezier(0.8, 0, 0.170, 1) 0s 1 forwards;
			}
		#service div.ttl h2 {
			margin: 15px 0 0;
			padding: 0;
			font-size: 20px;
			line-height: 180%;
			color: #0E3383;
			font-weight: var(--weight-nomal);
			text-align: left;
		}
		#service div.ttl h4 {
			position: absolute;
			margin: auto;
			padding: 0;
			font-size: 400px;
			line-height: 100%;
			font-family: "Cairo", sans-serif;
			font-optical-sizing: auto;
			font-weight: var(--weight-bold1);
			font-style: normal;
			color: #FAFAFA;
			white-space: nowrap;
			top: -40px;
			left: 50%;
			transform: translateX(-50%);
			-webkit- transform: translateX(-50%);
			z-index: -1;
		}
	#service ul.service_slick {
		width: 100%;
		max-width: 1280px;
		margin: 70px 0 0;
		padding: 0;
		list-style: none;
		display: flex;
	}
		#service ul.service_slick li.slick-slide {
			width: calc(1280px * 0.453125);
			margin: 0 20px;
			padding: 75px 75px 55px;
			border: 5px solid #F3F3F3;
			border-radius: 20px;
			background: #fff;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}
@media screen and (max-width:1280px) {
		#service ul.service_slick li.slick-slide {
			width: calc(93.75vw * 0.453125);
			margin: 0 calc(93.75vw * 0.03125);
		}
}
@media screen and (max-width:1120px) {
		#service ul.service_slick li.slick-slide {
			width: calc(1040px * 0.453125);
			margin: 0 calc(1040px * 0.03125);
		}
}
			#service ul.service_slick li.slick-slide h5 {
				height: 75px;
				margin: 65px auto 0;
				padding: 0;
				font-size: 26px;
				line-height: 160%;
				font-weight: var(--weight-bold2);
			}
				#service ul.service_slick li.slick-slide h5 small {
					display: block;
					margin: 5px auto 0;
					padding: 0;
					font-size: 16px;
					line-height: 160%;
				}
			#service ul.service_slick li.slick-slide p {
				margin: 25px auto 0;
				padding: 0;
				font-size: 16px;
				line-height: 200%;
				text-align: left;
			}

/* Blog */
#blog {
	width: 100%;
	margin: 0 auto;
	padding: 130px 0 140px;
	background: #F4F4F5;
	overflow: hidden;
	position: relative;
}
	#blog:before,
	#blog:after {
		position: absolute;
		content: '';
		display: block;
		margin: 0;
		padding: 0;
	}
		#blog:before {
			width: 914px;
			height: 993px;
			background: url(../images/top/blog_bg1.png) center / contain no-repeat;
			top: 0;
			left: 0;
		}
		#blog:after {
			width: 253px;
			height: 202px;
			background: url(../images/top/blog_bg2.png) center / contain no-repeat;
			bottom: 0;
			right: 235px;
		}
	#blog div.ttl {
		width: 100%;
		max-width: 1400px;
		margin: 0 auto;
		padding: 0 60px;
		text-align: left;
		position: relative;
		z-index: 1;
	}
		#blog div.ttl h3 {
			opacity: 0;
			display: inline-block;
			margin: 0;
			padding: 0;
			position: relative;
			overflow: hidden;
		}
			#blog div.ttl h3.scrollin {
				-webkit-animation: FadeIN 0.2s ease-out 0s 1 forwards;
				animation: FadeIN 0.2s ease-out 0s 1 forwards;
			}
			#blog div.ttl h3 span {
				opacity: 0;
				display: inline-block;
				margin: 0;
				padding: 0;
				font-size: 80px;
				line-height: 130%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: normal;
				background: linear-gradient(to right, #0E3383, #13823B);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#blog div.ttl h3 span.scrollin {
				-webkit-animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
				animation: FadeIN 0.2s ease-out 0.5s 1 forwards;
			}
		#blog div.ttl h3:after {
			opacity: 0;
			position: absolute;
			content: '';
			display: block;
			width: 100%;
			height: 100%;
			background: linear-gradient(to right, #0E3383, #13823B);
			bottom: 0;
			left: 0;
			right: 0;
			top: 0;
		}
			#blog div.ttl h3.scrollin:after {
				animation: mask-bg 1.0s cubic-bezier(0.8, 0, 0.170, 1) 0s 1 forwards;
			}
		#blog div.ttl h2 {
			margin: 15px 0 0;
			padding: 0;
			font-size: 20px;
			line-height: 180%;
			color: #0E3383;
			font-weight: var(--weight-nomal);
			text-align: left;
		}
	#blog div.blog_cont {
		width: 100%;
		max-width: 1400px;
		margin: 60px auto 0;
		padding: 0;
		display: flex;
		justify-content: space-between;
		position: relative;
		z-index: 1;
	}
		#blog div.blog_cont ul {
			opacity: 0;
			width: 48.571%;
			margin: 0;
			padding: 60px;
			text-align: left;
			background: rgba(255,255,255,0.9);
			border-radius: 20px;
			list-style: none;
		}
			#blog div.blog_cont ul.scrollin:nth-of-type(1) {
				-webkit-animation: bottomIn 0.2s ease-out 0s 1 forwards;
				animation: bottomIn 0.2s ease-out 0s 1 forwards;
			}
			#blog div.blog_cont ul.scrollin:nth-of-type(2) {
				-webkit-animation: bottomIn 0.2s ease-out 0.2s 1 forwards;
				animation: bottomIn 0.2s ease-out 0.2s 1 forwards;
			}
			#blog div.blog_cont ul h4 {
				display: inline-block;
				margin: 0;
				padding: 0;
				font-size: 30px;
				line-height: 160%;
				font-family: "Cairo", sans-serif;
				font-optical-sizing: auto;
				font-weight: var(--weight-bold1);
				font-style: italic;
				background: linear-gradient(to right, #0E3383, #13823B);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
			#blog div.blog_cont ul li {
				display: block;
				margin: 0;
				padding: 0;
				border-bottom: 1px solid #E9E9E9;
				position: relative;
			}
				#blog div.blog_cont ul li:first-of-type {
					margin-top: 25px;
					border-top: 1px solid #E9E9E9;
				}
				#blog div.blog_cont ul li:before {
					position: absolute;
					content: '';
					display: block;
					width: 28px;
					height: 30px;
					background: url(../images/icon/pdf_ico.png) center / contain no-repeat;
					top: 20px;
					left: 10px;
				}
				#blog div.blog_cont ul li a {
					display: block;
					margin: 0;
					padding: 20px 10px 20px 60px;
					font-size: 16px;
					line-height: 180%;
					color: #000;
					text-decoration: none;
				}
					#blog div.blog_cont ul li a:hover {
						background: #fff;
						color: #194084;
					}
	#blog div.blog_more {
		width: 100%;
		max-width: 1400px;
		margin: 50px auto 0;
		padding: 0;
		display: flex;
		justify-content: flex-end;
		position: relative;
		z-index: 1;
	}
		#blog div.blog_more a {
			width: 250px;
			height: 46px;
			margin: 0;
			padding: 0;
			font-size: 15px;
			line-height: 120%;
			font-weight: var(--weight-bold2);
			color: #fff;
			text-decoration: none;
			background: #0E3383;
			border-radius: 23px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
			#blog div.blog_more a:hover {
				background: #0E6D4D;
			}