@import 'head.spe.css';

/*banner part*/
.banner { position: relative;background:url('/images/contact/banner.jpg') left center;background-size:cover;user-select:none;}
.banner .auto-box {height:650px;position:relative;}
.banner .auto-box > div { position: absolute; top:50%;margin-top:-80px; right:2%; color: #fff; text-shadow: rgba(0,0,0,0.8) 3px 3px 3px; }
.banner .auto-box > div > h6 {font-family: 'Wulkan Display Italic'; font-size: 56px;font-style:italic; line-height: 2em; position: relative; font-weight:400;}

.contact-title { padding: 50px 0; }
.contact-title .auto-box { text-align: center; color: #000;font-weight:400; font-size: 60px; line-height: 1.4em; }

/*contact-us*/
.contact-us { display: flex; justify-content: space-between; padding:50px 0 90px 0; }
.contact-us .infos { width: 45%; padding-right: 5%; }
.contact-us .infos h5 { font-size: 28px; line-height:1.4em;padding:0.8em 0;font-weight:500; border-bottom:1px solid #bbb;width:fit-content;margin-bottom:30px;}
.contact-us .infos p { font-size: 16px; line-height: 1.5em; margin: 1em 0; padding-left:30px;}
.contact-us .infos p .aicf { color:#444;margin-right:14px;margin-left:-30px;}

.contact-us .form { width: 50%; padding: 0 40px; font-size: 18px;}
.contact-us .form > form > .texts {  line-height: 1.6em; padding-bottom: 20px; }
.contact-us .form > form ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
.contact-us .form > form li { display: block; width: 48%; padding-bottom: 15px; }
.contact-us .form > form li.long { width: 100%; }
.contact-us .form > form li > label { display: block; line-height: 1.2em; padding: 8px 0; }
.contact-us .form > form li > label > em { color: #f00; font-style: normal; }
.contact-us .form > form li > input[type="text"], .contact-us .form > form li > textarea { position: relative; width: 100%; padding: 8px; min-height: 22px; line-height: 1.2em; border: 1px solid #ccc; background:none transparent; color: #333; border-radius: 3px; transition: all .3s ease; }
.contact-us .form > form li .text-danger { color: #ff0000; }
.contact-us .form > form input[type="submit"] { margin-top: 15px; width: 120px; height: 38px; line-height: 1em; color: #fff; cursor: pointer; border: none; text-transform: uppercase; background: #E8941E; border-radius: 6px; }

.contact-us .form > form li > input[type="text"]:focus, .contact-us .form > form li > textarea:focus { box-shadow: rgba(0,0,0,0.3) 0 0 8px; }

@media only screen and (max-width:1640px) {
	.banner .auto-box {height: 41vw;min-height:240px;}
	.banner .auto-box > div {margin-top:-5vw;}
	.banner .auto-box > div > h6 {font-size:3.5vw;}

	.contact-title .auto-box {font-size:3.75vw;}
	.contact-top-part .img { height: 40.625vw;}
	.contact-top-part .cont { padding: 9.375vw 11.875vw 0 15vw; }
	.contact-top-part .cont h5 { font-size: 3vw;}
	.contact-top-part .cont p { font-size:1.1vw; }

	.contact-us .form { padding: 0 2.5vw; font-size: 1.1vw;}
	.contact-us .form > form > .texts {  padding-bottom: 1.25vw; }
	.contact-us .form > form ul { display: flex; flex-wrap: wrap; justify-content: space-between; }
	.contact-us .form > form li { padding-bottom: 1vw; }
	.contact-us .form > form li > label { padding: 0.5vw 0; }
	.contact-us .form > form li > input[type="text"], .contact-us .form > form li > textarea { padding: 0.5vw; min-height: 1.375vw; }
	.contact-us .form > form input[type="submit"] { margin-top: 1vw; width: 7.5vw; height: 2.375vw;  }

	.contact-us .form > form li > input[type="text"]:focus, .contact-us .form > form li > textarea:focus { box-shadow: rgba(0,0,0,0.3) 0 0 0.5vw; }
}
@media only screen and (max-width:1200px) {
	.contact-title .auto-box {font-size:44px;}

	.contact-top-part .cont h5 { font-size:36px;}
	.contact-top-part .cont p { font-size:14px; }

	.contact-us .infos > .title { font-size:24px; }
	.contact-us .infos .address-ist li { font-size:14px; margin-bottom:60px; }
	.contact-us .infos .address-ist li h6 { margin-bottom:8px; padding-bottom:8px; padding-right:8px; }
	.contact-us .form { padding: 0 30px; font-size:14px;}
	.contact-us .form > form > .texts {  padding-bottom:15px; }
	.contact-us .form > form li { padding-bottom:10px; }
	.contact-us .form > form li > label { padding:8px 0; }
	.contact-us .form > form li > input[type="text"], .contact-us .form > form li > textarea { padding: 8px; min-height:16px; }
	.contact-us .form > form input[type="submit"] { margin-top:12px; width:90px; height:28px;  }

	.contact-us .form > form li > input[type="text"]:focus, .contact-us .form > form li > textarea:focus { box-shadow: rgba(0,0,0,0.3) 0 0 10px; }
}
@media only screen and (max-width:1080px) {
	.contact-top-part .cont {padding: 8vw 8vw 0 12vw;}

	.contact-us {display:block;}
	.contact-us>div {width:100% !important;}
	.contact-us .infos {padding:0 30px;}

	.contact-us .form {margin-top:50px;}
}
@media only screen and (max-width:768px) {
	.banner .auto-box > div > h6 {font-size:22px;text-indent:20px;}

	.contact-top-part .cont {padding: 4vw 5vw 0 7vw;}

	.contact-us { display: block;padding:50px 0; }
	.contact-us .infos {width:100%;padding:0;}
	.contact-us .form {width:100%;padding:0;}
}
@media only screen and (max-width:560px) {
	.banner .auto-box > div {margin-top:-28px;}

	.contact-top-part {display:block;}
	.contact-top-part .img { height:220px;width:100%;}
	.contact-top-part .cont {width:100%; padding:20px; }
}