@media screen and (max-width: 1360px) { body .about-contact { width: 100%; padding: 0 1rem; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; } body .about-banner { width: 100%; height: 8rem; } body .about-contact .title { text-align: center; margin-top: 3rem; margin-bottom: 2rem; color: #000000; font-size: 1.5rem; } body .about-contact .company { width: 100%; /* height: 780px; */ padding: 1.5rem; box-sizing: border-box; background-color: #ffffff; box-shadow: 0px 4px 24px 1px rgba(8, 100, 178, 0.15); } body .about-contact .company .name { display: flex; flex-direction: column; padding-bottom: 1.2rem; border-bottom: 2px solid #e2eef2; } body .about-contact .company .name .text { color: #000000; font-size: 1rem; text-align: end; margin-bottom: 1rem; } body .about-contact .company .name .name-phone { display: flex; justify-content: space-between; } body .about-contact .company .name .name-phone div:first-child { color: #000000; font-size: 1.2rem; } body .about-contact .company .name .name-phone div:last-child { color: #0084ce; font-size: 1.2rem; } body .about-contact .company .info { margin-top: 1rem; margin-bottom: 1rem; display: flex; justify-content: space-between; } body .about-contact .company .info .info-left { width: 100%; display: grid; grid-template-columns: 1fr; grid-column-gap: 1rem; align-content: flex-end } body .about-contact .company .info .info-left div { display: flex; align-items: flex-end; margin-bottom: 1rem; } body .about-contact .company .info .info-left div span:first-child { font-size: 1rem; color: #0d308d; font-weight: bold; margin-right: .5rem; } body .about-contact .company .info .info-left div span:last-child { color: #000000; font-size: 1rem; display: flex; line-height: 1.2rem; } body .about-contact .company .info .info-right { display: none; } body .about-contact .company .map { width: 100%; height: 10rem; background-color: #000000; } body .about-contact .region { margin: 2rem 0; text-align: center; color: #000000; font-size: 1.5rem; } body .about-contact .region-content { display: grid; grid-template-columns: 1fr 1fr; /* grid-template-rows: 1fr 1fr; */ grid-row-gap: 2rem; grid-column-gap: 2rem; } body .about-contact .region-content .label { background-color: #ffffff; box-shadow: 0px 0px 30px 0px rgba(10, 85, 127, 0.08); display: flex; flex-direction: column; } body .about-contact .region-content .label .top { height: unset; border-bottom: 1px solid #d9e8ed; padding: 0 1rem; box-sizing: border-box; display: flex; } body .about-contact .region-content .label .top p { margin: auto 0; color: #0084cd; font-size: 1.5rem; text-indent: .5rem; border-left: 5px solid #0084cd; height: 1.5rem; line-height: 2rem; margin: 1rem 0; } body .about-contact .region-content .label .bottom { padding: 1rem; box-sizing: border-box; } body .about-contact .region-content .label .bottom .name { color: #000000; font-size: 1.1rem; margin: 0; } body .about-contact .region-content .label .bottom div { margin: .5rem 0; } body .about-contact .region-content .label .bottom .addr { color: #000000; font-size: 1rem; /* margin: 20px 0; */ /* margin-top: 20px; margin-bottom: 18px; */ } body .voice { width: 100%; height: unset; margin-top: 0; } body .voice .voice-content { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; margin-bottom: 2rem; } body .voice .voice-content .voice-icon { margin: 2rem auto; display: flex; flex-direction: column; } body .voice .voice-content .voice-icon img { width: 2rem; margin: 0 auto; margin-bottom: .4rem; } body .voice .voice-content .voice-icon .title { color: #000000; font-size: 2rem; text-align: center; margin-bottom: .5rem; } body .voice .voice-content .from { display: flex; flex-direction: column; width: 100%; } body .voice .voice-content .from .from-first { display: flex; flex-direction: column; justify-content: space-between; margin-bottom: 1rem; padding: 0 1rem; box-sizing: border-box; } body .voice .voice-content .from .from-first .first-info { width: 100%; height: 4rem; background-color: #ffffff; border-radius: 4px; border: solid 1px #cccccc; display: flex; align-items: center; padding: 0 1rem; box-sizing: border-box; margin-bottom: 1rem; } body .voice .voice-content .from .from-first div label { color: #000000; font-size: 1.2rem; margin-right: 10px; height: 2rem; line-height: 2rem; } body .voice .voice-content .from .from-first div input { font-size: 1rem; line-height: 1rem; border: none; outline: none; background-color: transparent; flex: 1; } body .voice .voice-content .from .from-first .last-info { width: 100%; height: 4rem; background-color: #ffffff; border-radius: 4px; border: solid 1px #cccccc; display: flex; align-items: center; padding: 0 1rem; box-sizing: border-box; margin-bottom: 1rem; } body .voice .voice-content .from .from-text { width: unset; margin: 0 1rem; margin-bottom: 2rem; height: 12rem; background-color: #ffffff; border-radius: 4px; border: solid 1px #cccccc; padding: 1rem; box-sizing: border-box; display: flex; } body .voice .voice-content .from .from-text div { color: #000000; font-size: 1.2rem; margin-right: .4rem; height: 1.5rem; line-height: 1.5rem; } body .voice .voice-content .from .from-text textarea { flex: 1; border: none; background-color: transparent; outline: none; font-size: 1rem; resize: none; padding: 1px; line-height: 1.5rem; } body .voice .voice-content .submit { margin: 0 auto; width: 10rem; height: 2.8rem; background-color: #0084ce; border-radius: 28px; color: #ffffff; font-size: 1.2rem; text-align: center; line-height: 2.8rem; cursor: pointer; transition: all .3s; } body .voice .voice-content .submit span{ font-size: 1rem; } } .about-contact { width: 1360px; padding: 0 20px; box-sizing: border-box; margin: 0 auto; display: flex; flex-direction: column; } .about-banner { width: 100%; height: 320px; background-image: url('../../images/banner-8.png'); background-position: center; background-size: cover; background-repeat: no-repeat; } .about-contact .title { text-align: center; margin-top: 94px; margin-bottom: 60px; color: #000000; font-size: 32px; } .about-contact .company { width: 100%; /* height: 780px; */ padding: 60px; box-sizing: border-box; background-color: #ffffff; box-shadow: 0px 4px 24px 1px rgba(8, 100, 178, 0.15); } .about-contact .company .name { display: flex; flex-direction: column; padding-bottom: 30px; border-bottom: 2px solid #e2eef2; } .about-contact .company .name .text { color: #000000; font-size: 15px; text-align: end; margin-bottom: 16px; } .about-contact .company .name .name-phone { display: flex; justify-content: space-between; } .about-contact .company .name .name-phone div:first-child { color: #000000; font-size: 28px; } .about-contact .company .name .name-phone div:last-child { color: #0084ce; font-size: 28px; } .about-contact .company .info { margin-top: 25px; margin-bottom: 50px; display: flex; justify-content: space-between; } .about-contact .company .info .info-left { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; /* grid-row-gap: 28px; */ grid-column-gap: 28px; align-content: flex-end } .about-contact .company .info .info-left div { display: flex; align-items: flex-end; } .about-contact .company .info .info-left div span:first-child { font-size: 20px; color: #0d308d; font-weight: bold; margin-right: 8px; } .about-contact .company .info .info-left div span:last-child { color: #000000; font-size: 16px; display: flex; line-height: 22px; } .about-contact .company .info .info-right { display: flex; flex-direction: column; align-items: center; } .about-contact .company .info .info-right div:first-child { display: flex; flex-direction: column; justify-content: flex-end; margin-bottom: 10px; } .about-contact .company .info .info-right div:last-child p { color: #888888; font-size: 13px; } .about-contact .company .info .info-right div:first-child { width: 100px; height: 100px; border: solid 1px #d9d9d9; padding: 4px; box-sizing: border-box; } .about-contact .company .info .info-right div:first-child img { width: 100%; } .about-contact .company .map { width: 100%; height: 400px; background-color: #000000; } .about-contact .region { margin: 60px 0; text-align: center; color: #000000; font-size: 32px; } .about-contact .region-content { display: grid; grid-template-columns: 1fr 1fr 1fr; /* grid-template-rows: 1fr 1fr; */ grid-row-gap: 34px; grid-column-gap: 34px; } .about-contact .region-content .label { /* width: 450px; */ /* height: 260px; */ background-color: #ffffff; box-shadow: 0px 0px 30px 0px rgba(10, 85, 127, 0.08); display: flex; flex-direction: column; } .about-contact .region-content .label .top { height: 70px; border-bottom: 1px solid #d9e8ed; padding: 0 30px; box-sizing: border-box; display: flex; } .about-contact .region-content .label .top p { margin: auto 0; color: #0084cd; font-size: 24px; text-indent: .5rem; border-left: 5px solid #0084cd; height: 24px; line-height: 24px; } .about-contact .region-content .label .bottom { padding: 30px; box-sizing: border-box; } .about-contact .region-content .label .bottom .name { color: #000000; font-size: 22px; margin: 0; } .about-contact .region-content .label .bottom div { margin: 15px 0; } .about-contact .region-content .label .bottom .phone{font-family:none !important;} .about-contact .region-content .label .bottom .addr { color: #000000; font-size: 15px; /* margin: 20px 0; */ /* margin-top: 20px; margin-bottom: 18px; */ } .voice { width: 100%; height: 701px; margin-top: 136px; background-image: url('../../images/contact-bg.png'); background-position: center; background-repeat: no-repeat; background-size: cover; display: flex; justify-content: center; } .voice .voice-content { width: 1260px; height: 100%; display: flex; flex-direction: column; align-items: center; } .voice .voice-content .voice-icon { margin: 50px auto; display: flex; flex-direction: column; } .voice .voice-content .voice-icon img { width: 69px; margin: 0 auto; margin-bottom: 12px; } .voice .voice-content .voice-icon .title { color: #000000; font-size: 32px; text-align: center; margin-bottom: 12px; } .voice .voice-content .from { display: flex; flex-direction: column; width: 100%; } .voice .voice-content .from .from-first { display: flex; justify-content: space-between; margin-bottom: 30px; } .voice .voice-content .from .from-first .first-info { width: 400px; height: 60px; background-color: #ffffff; border-radius: 4px; border: solid 1px #cccccc; display: flex; align-items: center; padding: 20px; box-sizing: border-box; } .voice .voice-content .from .from-first div label { color: #000000; font-size: 16px; margin-right: 10px; height: 18px; line-height: 15px; } .voice .voice-content .from .from-first div input { font-size: 14px; line-height: 16px; border: none; outline: none; background-color: transparent; flex: 1; } .voice .voice-content .from .from-first .last-info { width: 615px; height: 60px; background-color: #ffffff; border-radius: 4px; border: solid 1px #cccccc; display: flex; align-items: center; padding: 20px; box-sizing: border-box; } .voice .voice-content .from .from-text { margin-bottom: 40px; width: 100%; height: 129px; background-color: #ffffff; border-radius: 4px; border: solid 1px #cccccc; padding: 20px; box-sizing: border-box; display: flex; } .voice .voice-content .from .from-text div { color: #000000; font-size: 16px; margin-right: 10px; height: 18px; line-height: 15px; } .voice .voice-content .from .from-text textarea { flex: 1; border: none; background-color: transparent; outline: none; font-size: 14px; resize: none; padding: 1px; } .voice .voice-content .submit { margin: 0 auto; width: 240px; height: 56px; background-color: #0084ce; border-radius: 28px; color: #ffffff; font-size: 18px; text-align: center; line-height: 56px; cursor: pointer; transition: all .3s; } .voice .voice-content .submit:hover { opacity: .7; }