@keyframes zoomin {
	0% {
		opacity: 0;
		transform: scale(1.5);
	}

	100% {
		opacity: 1;
		transform: scale(1);
	}
}

.first_view {
	position: relative;
	background-image: url(../image/bg_mv.jpg);
	background-size: cover;
	background-repeat: no-repeat;
	height: 770px;
	overflow: hidden;
}

.first_view span {
	display: inline-block;
}


.sent_box{
	position: absolute;
	top: 22%;
	left: 11%;
}

.img_sent1 {
	font-size: clamp(30px, 2.9vw, 50px);
	margin-bottom: 5%;
}

.img_sent1 span {
	font-weight: bold;
	color: yellow;
	text-shadow:1px 1px 0 #e5f2ff, -1px -1px 0 #e5f2ff,
	-1px 1px 0 #e5f2ff, 1px -1px 0 #e5f2ff,
	0px 1px 0 #e5f2ff,  0-1px 0 #e5f2ff,
	-1px 0 0 #e5f2ff, 1px 0 0 #e5f2ff;
}

.img_sent2 {
	font-size: clamp(25px, 1.5vw, 30px);
	font-weight: bold;
	margin-bottom: 5%;
}

.img_sent3 {
    border: 2px solid #0d49b2;
    font-size: clamp(27px, 2vw, 40px);
    background-color: #0d49b2;
    border-radius: 30px;
    overflow: hidden;
    width: 60%;
    text-align: center;
	position: relative;
}

.img_sent3 h1 {
    display: inline-block; 
    margin: 0 auto; 
    text-align: center; 
}

.img_sent3 a {
    color: white;
    padding: 0.5%;
	display: block;
}

.img_sent3 a:hover {
    background: #fff;
    color: #0d49b2;
    transition: 0.5s;
}

.first_box {
	position: absolute;
	bottom: 15%;
	left: 50%;
	transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	background-color: rgb(255, 255, 255);
	border-radius: 5px;
	width: 30%;
	border-style: groove;
	display: flex;
	padding: 2%;
}

.first_box img {
	margin: 0 auto;
}

.sign{
	width: 5%;
}

.my_logo,
.img_logo {
    width: 30%;
    height: auto;
}


@media (max-width: 768px) {

	.sent_box{
		position: absolute;
		top: 22%;
		left: 8%;
	}

	.first_view {
		position: relative;
		background-image: url(../image/bg_mv.jpg);
		background-size: cover;
		background-repeat: no-repeat;
		height: 600px;
		overflow: hidden;
	}



	.first_box {
		position: absolute;
		bottom: 20%;
		left: 50%;
		transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		background-color: rgb(255, 255, 255);
		border-radius: 5px;
		width: 70%;
		border-style: groove;
		display: flex;
		padding: 2%;
	}

	.img_sent3 {
		border: 2px solid #0d49b2;
		font-size: clamp(18px, 2vw, 40px);
		background-color: #0d49b2;
		border-radius: 30px;
		overflow: hidden;
		width: 40%;
		text-align: center;
	}

	.img_sent3 a {
		color: white;
		padding: 3%;
		display: block;
	}
	
	.img_sent3 a:hover {
		background: #fff;
		color: #0d49b2;
		transition: 0.5s;
	}

  }




.three span {
	color: black;
	opacity: 0;
	transform: translate(-100px, 0) scale(1);
	animation: sideSlide 1s forwards;
}

@keyframes sideSlide {
	60% {
		transform: translate(20px, 0) scale(1);
		color: black;
	}

	80% {
		transform: translate(20px, 0) scale(1);
		color: black;
	}

	99% {
		transform: translate(0) scale(1.2);
		color: yellow;
	}

	100% {
		transform: translate(0) scale(1);
		opacity: 1;
		color: black;
	}
}

.img_sent1 span:nth-of-type(2) {
	animation-delay: .05s;
}

.img_sent1 span:nth-of-type(3) {
	animation-delay: .1s;
}

.img_sent1 span:nth-of-type(4) {
	animation-delay: .15s;
}

.img_sent1 span:nth-of-type(5) {
	animation-delay: .2s;
}

.img_sent1 span:nth-of-type(6) {
	animation-delay: .25s;
}

.img_sent1 span:nth-of-type(7) {
	animation-delay: .3s;
}

.img_sent1 span:nth-of-type(8) {
	animation-delay: .35s;
}

.img_sent1 span:nth-of-type(9) {
	animation-delay: .4s;
}

.img_sent1 span:nth-of-type(10) {
	animation-delay: .45s;
}

.img_sent1 span:nth-of-type(11) {
	animation-delay: .5s;
}

.img_sent1 span:nth-of-type(12) {
	animation-delay: .55s;
}

.img_sent1 span:nth-of-type(13) {
	animation-delay: .6s;
}

.img_sent1 span:nth-of-type(14) {
	animation-delay: .65s;
}

.img_sent1 span:nth-of-type(15) {
	animation-delay: .7s;
}

.img_sent1 span:nth-of-type(16) {
	animation-delay: .75s;
}

.img_sent1 span:nth-of-type(17) {
	animation-delay: .8s;
}

.img_sent1 span:nth-of-type(18) {
	animation-delay: .85s;
}

.img_sent1 span:nth-of-type(19) {
	animation-delay: .9s;
}

.img_sent1 span:nth-of-type(20) {
	animation-delay: .95s;
}

.img_sent1 span:nth-of-type(21) {
	animation-delay: 1s;
}