/* contact */
#contact .contact .center {
	position: relative;
	width: fit-content;
	left: 50%;
	transform: translateX(-50%);
}

.t-mail {
	background: linear-gradient(to bottom, rgb(247 195 29), rgb(218 125 27));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	text-transform: uppercase;
}

#myContact {
	background-position: center;
	background-size: cover;
}

#myContact form {
	display: flex;
	flex-direction: column;
	align-items: end;
}

/* animation for contact address */
@keyframes swip-one {
from {opacity: 1;}
to {opacity: 0;}
}

@keyframes swip-two {
from {opacity: 0;}
to {opacity: 1;}
}

/* 1-07-25 */
.contact-button {
	border-radius: 50%;
	background-image: url(../../image/normal-tw-web.png);
	background-position: center;
	background-size: 100%;
	transition: all 0.4s linear(0, 0.007 1.1%, 0.03 2.3%, 0.119 4.9%, 0.239 7.4%, 0.638 14.9%, 0.748 17.3%, 0.838 19.6%, 0.913 21.9%, 0.974 24.3%, 1.019 26.7%, 1.051 29.2%, 1.075 32.6%, 1.081 36.5%, 1.07 41.1%, 1.016 54.3%, 0.998 62.5%, 0.993 72.2%, 1);
	cursor: pointer;
}

.contact-button:hover {transform: scale(1.2);}

.contact-button::before,
.contact-button::after {
	position: absolute;
	content: '';
	width: 100%;
	height: 100%;
	border-radius: 50%;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) scale(1);
	opacity: 0;
	animation: contact-pop 2s infinite ease;
}

.contact-button::before {animation-delay: 1.3s;}

@keyframes contact-pop {
20% {opacity: 1;}
80% {
	box-shadow: 0 0 20px #474747bb;
	transform: translate(-50%, -50%) scale(1.2);
	opacity: 0;
}
}

.close-button {
	border-radius: 50%;
	background-image: url(../../image/04CONTACT/close-but.webp);
	background-position: center;
	background-size: 100%;
	cursor: pointer;
	transition: transform 0.3s linear(0, 0.49 7.4%, 0.864 15.3%, 1.005 19.4%, 1.12 23.7%, 1.206 28.1%, 1.267 32.8%, 1.296 36.4%, 1.311 40.2%, 1.313 44.2%, 1.301 48.6%, 1.252 56.9%, 1.105 74.4%, 1.048 82.5%, 1.011 91.1%, 1);
}

.close-button:hover {transform: scale(1.1);}

.form-popup {
	display: flex;
	position: fixed;
	flex-direction: column;
	overflow: hidden;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: #fff;
	width: 0;
	height: 0;
	border-radius: 50%;
	transition: all 1s ease;
}

.form-popup.open {
	background-image: url('../../image/04-MARKET/webP26BGinndercontact-tw-p.webp');
	width: 100vw;
	height: 100vh;
	border-radius: 0;
}

/* contact page 01-07-25 */
.form-popup .contact-content {
	opacity: 0;
	transition: transform 1s 1s linear(0, 0.36 6.6%, 0.635 13.7%, 0.832 21.5%, 0.903 25.7%, 0.959 30.3%, 1.015 38.2%, 1.036 47.6%, 1.034 55.8%, 1.005 80.7%, 1), opacity 1s 1s linear(0, 0.36 6.6%, 0.635 13.7%, 0.832 21.5%, 0.903 25.7%, 0.959 30.3%, 1.015 38.2%, 1.036 47.6%, 1.034 55.8%, 1.005 80.7%, 1), 0.5s background 0.5s ease-in;
	transform: scale(0.7) rotateX(45deg) translateY(100%);
	background: rgb(254 194 4);
}

.form-popup.open .contact-content {
	opacity: 1;
	transform: none;
	background: rgb(254 194 4 /0.95);
}

/* text head */
.form-popup .eff-contact {
	opacity: 0;
	transition: 0.6s opacity 2s ease-in;
}

.form-popup.open .eff-contact {opacity: 1;}

/* marguee */
.marquee {
	width: 100%;
	height: 15rem;
	max-height: 20vh;
	margin-top: 2vh;
	overflow: hidden;
	white-space: nowrap;
	display: flex;
	flex-direction: column;
}

.marquee:hover .marquee__item {
	-webkit-animation-play-state: paused;
	animation-play-state: paused;
}

.marquee__item p {display: flex;}

.marquee__item img.icon-phone {
	width: 50px;
	height: 50px;
	position: relative;
}

.marquee__seperator {margin: 0 2rem;}

.marquee__item {
	display: inline-block;
	will-change: transform;
	-webkit-animation: marquee 15s linear infinite;
	animation: marquee 15s linear infinite;
}

.marquee__item div {
	height: 25vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

@-webkit-keyframes marquee {
0% {transform: translateX(0);}
100% {transform: translateX(-100%);}
}

@keyframes marquee {
0% {transform: translateX(0);}
100% {transform: translateY(-100%);}
}

#myContact .btn-contact {
	width: 8rem;
	padding: 0.5rem;
	border-radius: 1em;
	border: 2px solid #fff;
	display: inline-block;
	cursor: pointer;
	position: relative;
	background-color: transparent;
	text-decoration: none;
	overflow: hidden;
	z-index: 1;
}

#myContact .btn-contact::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0;
	width: 150%;
	height: 100%;
	border-radius: 0;
	background: #fff;
	transform: translateX(-100%);
	transition: all .3s;
	z-index: -1;
}

#myContact .btn-contact:hover::before {
	border-radius: 5rem;
	transform: translateX(-20%);
}

#myContact .btn-contact:hover {color: rgb(254 194 4);}

@media screen and (max-width: 1450px) {
	.marquee {margin-right: 2rem;}
}

@media (max-width:1024px) and (max-height:1024px) {
	#myContact p {font-size: 12px;}

	#myContact h2 {font-size: 22px;}

	#myContact label {font-size: 20px;}

	#myContact .contact-content {padding: 1rem;}

	#myContact form input,
	#myContact form textarea {
		margin: 0.5rem 0;
		margin-left: 1rem;
	}
}

@media screen and (min-width: 1700px) {
	.contact-button {
		width: 4vw;
		height: 4vw;
	}

	.contact-content {
		width: 79vw;
        height: 42vw;
        padding: 4vw;
	}
	.contact-content .text-head{margin-bottom: 5vw;}
	.contact-content .text-head span{
		font-size: 4vw;
		letter-spacing: 8px;
	}
	.contact-content .text-head p{
		font-size: 1.3vw;
		font-weight: 100;
	}
	.close-button{
		width: 3vw;
		height: 3vw;
	}

	.marquee__item span {font-size: 2vw;}

	.marquee__item p {font-size: 1.2vw;}

	#contact-form label {font-size: 1.5vw;}

	#contact-form input,
	#contact-form textarea {
		min-width: 17vw;
        height: 1.5vw;
	}
	#contact-form textarea {height: 5vw;}

	#myContact .btn-contact {
		font-size: 0.75vw;
        padding: 0.5rem 2rem;
        width: auto;
        border: 4px solid #fff;
        margin-top: 1.5vw;
	}
	#myContact .eff-contact {padding-inline: 9vw;}

	#myContact .eff-contact .--con {padding-inline: 2vw;}
}

@media screen and (max-width: 1450px) {
	.form-popup .contact-content {padding: 3rem;}
}

@media screen and (min-width: 4000px) {
	.marquee {
		min-height: 20vh;
	}
}