﻿.banner { position: relative;background:url('/images/qa/banner.jpg?v20250219-01') left center no-repeat;background-size:cover;}
.banner .auto-box {height:750px !important;position:relative;}
.banner .auto-box > div { position: absolute; top: 45% !important;margin-top:-20px;right:2%; color: #fff; text-shadow: rgba(0,0,0,0.8) 1px 1px 3px; }
.banner .auto-box > div > h6 { line-height: 2em; position: relative; }
.banner .auto-box > div > h6 .txt-title {font-size: 32px;}


.contact-title { padding: 36px 0; background: #fff; }
.contact-title .auto-box { text-align: center; color: #000;font-weight:400; font-style: italic; font-size: 60px; line-height: 1.4em; }

.contact-top-part { background: #ededed; padding: 0; background: #353535; display: flex; margin:150px 0;}
.contact-top-part .img { width: 50vw; height: 649px; background: url('/images/contact/01.jpg?v20250219-01') top right no-repeat; background-size:cover;}
.contact-top-part .cont { width: 50%; max-width: 820px; padding: 100px 190px 0 180px; color: #fff; }
.contact-top-part .cont h5 {padding-bottom:0;margin-left:-1.2em;}
.contact-top-part .cont p {padding-top:0.2em;padding-bottom:0.5em;}
.contact-top-part .cont p.icon { position: relative; padding-left: 2em;margin-left:-2em;}
.contact-top-part .cont p.icon > img { position: absolute; height: 1.11em; left: 0; margin-top:0.35em; }
/*.contact-top-part .cont h5 { font-size: 28px; line-height: 2em; font-weight:500; }
.contact-top-part .cont p { font-size: 18px; line-height: 1.5em; font-family: Arial; margin: 1em 0; }
*/
/*contact-us*/
.contact-us { display: flex; justify-content: space-between; padding: 150px 0 90px 0; }
.contact-us .infos { width: 45%; padding-right: 5%; }
.contact-us .infos > .title { color: #f29600; font-size: 32px; line-height:1.6em; }
.contact-us .infos .address-ist { display: flex; flex-wrap: wrap; justify-content: space-between; }
.contact-us .infos .address-ist li { width: 40%; position: relative; font-size: 18px; line-height: 1.5em; color: rgba(0 0 0/0.8); margin-bottom: 80px; }
.contact-us .infos .address-ist li h6 { font-size: 1.1em; border-bottom: 1px solid #ccc; margin-bottom: 10px; padding-bottom: 10px; width: fit-content; padding-right: 8px; }
.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: #fff; 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; }

.contact-form {padding:50px 0 100px 0;}
.contact-form>div>.txt-title {color:#000;}
.contact-form form {margin:0 auto;max-width:880px;padding:0 10px;}
.contact-form .form ul {display:flex;justify-content:space-between;flex-wrap:wrap;}
.contact-form .form ul li {width:48%;margin-top:38px;position:relative;font-weight:400;}
.contact-form .form ul li.long {width:100%;}
.contact-form .form ul li input[type="text"] {width:100%;height:60px;border:none transparent;padding-left:130px;padding-right:10px;}
.contact-form .form ul li input[type="text"].nopadding {padding-left:10px;}
.contact-form .form ul li textarea {width:100%;height:84px;border:none transparent;padding:10px;resize:none;}
.contact-form .form ul li>label {display:block;position:absolute;height:20px;margin-top:-10px;top:50%;left:10px;color:#666;}
.contact-form .form ul li label em {margin-right:5px;color:#ff0000;}
.contact-form .form ul li>span.text-danger {display:block;position:absolute;bottom:-24px;max-width:260px;right:0px;padding:5px;color:#dd0000;}
.contact-form .form ul li>span.titlespan {display:block;padding-bottom:0.5em;}

.contact-form .form ul li>div.radio {display:flex;}
.contact-form .form ul li>div.radio>div {width:fit-content;margin-right:20px;}


.contact-form form .buts {display:flex;flex-direction:row-reverse;}
.contact-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-form form .error-result {margin-top:15px;}

@media only screen and (max-width:1640px) {
	.banner .auto-box {height: 45.7vw !important;min-height:240px;}
	.banner .auto-box > div {margin-top:-1.25vw;}

	.contact-title { padding:2.25vw 0;}
	.contact-title .auto-box {font-size:3.75vw;}
	.contact-top-part .img { height: 40.625vw;}
	.contact-top-part .cont { padding: 6.1vw 11.6vw 0 11vw; }

	.contact-us { display: flex; justify-content: space-between; padding: 9.375vw 0 5.625vw 0; }
	.contact-us .infos > .title { font-size: 2vw; }
	.contact-us .infos .address-ist li { font-size: 1.1vw; margin-bottom: 5vw; }
	.contact-us .infos .address-ist li h6 { margin-bottom: 0.6vw; padding-bottom: 0.6vw; padding-right: 0.5vw; }
	.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:1400px) {
	.contact-top-part .cont { padding: 5vw 8.6vw 0 8vw; }
}
@media only screen and (max-width:1280px) {
	.contact-title { padding:30px 0;}
	.contact-title .auto-box {font-size:44px;}

	.contact-top-part .cont { padding: 3vw 2.6vw 0 8vw; }

	.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 {display:block;}
	.contact-top-part .img { height:68vw;width:100%;}
	.contact-top-part .cont {width:100%; padding:60px; }

}
@media only screen and (max-width:768px) {
	.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) {
	.contact-top-part {margin:0 auto;}

	.contact-form .form ul li {width:100%;}
}
