@charset "utf-8";
/* CSS Document */
footer{margin: 0;}
*{padding: 0; margin: 0;}
.contact-main{display: flex;align-items: center;flex-wrap: nowrap;justify-content: center;background: url("../img/contact-bg.jpg") top center no-repeat; background-size: cover; padding: 40px 20px; box-sizing: border-box; min-height: calc(100vh - 108px);}
.contact-cont{padding: 40px 80px;width:100%; max-width: 1000px; background: #F7F8FA; border-radius: 12px; box-sizing: border-box; text-align: center;}
.contact-cont h1{font-size: 24px; line-height: 1.5; color: #000; font-weight: 700; margin-bottom: 4px;}
.contact-cont p{font-size: 16px; line-height: 1.5; color: #000;}
.contact-cont p a{color: #286DE8; text-decoration: none;}
.contact-cont .contact-cont-text{color: #00000099;}
.contact-cont-inline{display: flex; justify-content: space-between; gap: 40px;}
.contact-info-item{margin-top: 40px; text-align: start; position: relative; flex: 1;}
.contact-info-item p{margin-bottom: 10px;}
.contact-info-item input, .contact-info-item textarea{background: #fff; border: 1px solid #E5E5E5; border-radius: 4px; box-sizing: border-box; font-size: 16px; font-family: inherit; line-height: 1.5; padding: 6px 10px; width: 100%; resize: none; outline: none; transition: .2s;}
.contact-info-item textarea{min-height: 252px;}
.contact-info-error{font-size: 12px; line-height: 14px; color: #FF5D5D; position: absolute; left: 2px; top: 100%; margin-top: 7px; font-style: normal; opacity: 0; visibility: hidden; transition: .2s;}
.contact-info-item.wrong input, .contact-info-item.wrong textarea{border-color: #FF5D5D;}
.contact-info-item.wrong .contact-info-error, .contact-submit-error.show{opacity: 1; visibility: visible;}
.contact-cont-tips{margin-top: 36px; text-align: left;}
.btn-blue{outline: none; border: none; font-size: 16px; color: #fff; line-height: 40px; border-radius: 6px; background: #1E76E3; margin-top: 40px; width: 90%; max-width: 320px; box-sizing: border-box; cursor: pointer;}
.contact-info-error.contact-submit-error{position: unset; display: block;}

.mask-bg{display: none; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; position: fixed; z-index: 51; width: 100%; height: 100%; top: 0; left: 0; background: #00000080;}
.popup{display: none; opacity: 0; visibility: hidden; transition: opacity .2s, visibility .2s; position: fixed; z-index: 52; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 48px 16px; width: 96%; max-width: 400px; text-align: center; background: linear-gradient(180deg, #E9F4FF 0%, #FFFFFF 100%); background-color: #F7F8FA; border-radius: 10px; box-sizing: border-box;}
.popup b{font-size: 20px; color: #000; font-weight: 700; line-height: 32px; margin-bottom: 4px; display: flex; justify-content: center; align-items: center; gap: 6px;}
.popup p{font-size: 14px; color: #000; line-height: 24px;}
.show.mask-bg, .show.popup{display: block; opacity: 1; visibility: visible;}
.loading-cont {position: fixed;top: 0;left: 0;width: 100%; height: 100%;background-color: rgba(0, 0, 0, 0.5);display: flex;justify-content: center; align-items: center;z-index: 9999;}
.loading-cont img {width: 100px;height: 100px; }

@media screen and (max-width: 568px) {
    .contact-cont h1{font-size: 20px;}
    .contact-cont{padding: 24px 5%;}
    .contact-cont-inline{flex-direction: column; gap: 0;}
    .popup b{font-size: 16px;}
}
@media screen and (max-width: 325px) {

}
@media only screen and (-webkit-min-device-pixel-ratio:1.5), only screen and (min--moz-device-pixel-ratio:1.5), only screen and (-o-min-device-pixel-ratio:3/2), only screen and (min-device-pixel-ratio:1.5) {
}