html, body { font-size: 18px; overflow-x: clip; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; margin: 0; padding: 0; background-color: #f3f3f3; } a { color: #2d2e2f; outline: none; text-decoration: none; } a:link { text-decoration: none; } a:visited { text-decoration: none; } a:hover { text-decoration: none; } a:active { text-decoration: none; } a:focus { text-decoration: none; } .nav_item .nav_con { top: 70px !important; } /* =================================================== */ .wrapper { background: url(../img/public-bg2.png) no-repeat; background-size: cover; } .contact { max-width: 1920px; padding: 70px 0; margin: 0 auto; } .contact-con{ width: 1200px; margin: 0 auto; padding-top: 40px; border-radius: 10px; display: flex; justify-content: space-between; flex-direction: column; background-color: #fff; } .contact-con>div{ width: 100%; padding: 30px; box-sizing: border-box; } .contact-con>div h2, .co-banner-bottom>div:nth-child(1) h2{ height: 90px; line-height: 50px; text-align: center; font-size: 28px; font-weight: 600; color: #0047a2; } .contact-con>div p{ font-size: 18px; line-height: 35px; color: #666; text-align: center; } .contact-con .contact-con-top img { width: 300px; margin: 0px auto 30px auto; } #contact-map { width: 100%; height: 400px; } #contact-map .custom-content-marker { position: relative; width: 40px; height: 40px; } #contact-map .custom-content-marker img { width: 100%; height: 100%; } .co-banner-bottom{ margin: 30px auto 0 auto; width: 1200px; background-color: #fff; border-radius: 10px; padding: 40px 150px; box-sizing: border-box; } .co-banner-bottom>div:nth-child(1){ position: relative; width: 100%; } .co-banner-bottom>div:nth-child(2){ width: 100%; /* height: 524px; */ box-sizing: border-box; } .liuyan_info{ display: flex; margin-bottom: 47px; position: relative; flex-direction: row; flex-wrap: nowrap; justify-content: space-between; } .liuyan_info:nth-child(2) { margin-bottom: 20px; } .liuyan_info:nth-child(3) { display: flex; margin-bottom: 20px; position: relative; flex-direction: column; flex-wrap: wrap; justify-content: space-between; } .liuyan_info p { display: flex; flex-direction: column; } .liuyan_info .error { padding: 0 25px; color: #4415f5; } .liuyan_info input, .liuyan_info textarea { background-color: #f5f5f5; } .liuyan_info textarea { width: 100%; padding: 10px 20px; box-sizing: border-box; font-size: 16px; color: #666; } .liuyan_info input{ border-bottom: 1px solid #ccc; background-color: #f5f5f5; border-left: 4px solid #f5f5f5; font-size: 16px; padding: 0 25px; margin-right: 40px; flex: 1; height: 50px; color: #666; } .liuyan_info input:hover { border-left: 4px solid #0449a5; background-color: #e5ecf6; } .liuyan_info input:nth-child(3) { margin-right: 0; } .liuyan_info .code { width: 12%; float: left; margin-right: 20px; } .liuyan_info img { float: left; height: 51px; } .liuyan_info .submit { border-left: unset; margin: 25px auto 0 auto !important; color: #fff !important; border: none; border-radius: 5px; width: 140px; height: 46px; background-color: #0048a2; flex: unset; display: block; cursor: pointer; } .liuyan_info .submit:hover { background-color: #0048a2; border-left:unset; box-shadow: 0px 0px 10px 6px #b7d7ff; transition: .2s; } #content{ /* width: 600px; height: 45px; */ border-bottom: 1px solid #ccc; font-size: 16px; color: #666; } .yanzhengma label{ height: 54px; line-height: 54px; } .yanzhengma{ display: flex; justify-content: space-between; } .yanzhengma img{ margin-left: 28px; } @media screen and (max-width: 900px) { .contact { height: auto; min-width: 335px; } .contact-con { width: 100%; flex-direction: column; } .contact-con>div { margin: 15px auto; padding: 20px; height: auto; width: 96%; } .contact-con>div h2, .co-banner-bottom>div:nth-child(1) h2 { padding-top: 0; height: 60px; line-height: 70px; font-size: 26px; position: relative; top:unset; left: unset; } .contact-con>div div { margin-bottom: 20px; } .contact-con>div p { font-size: 16px; line-height: 32px; } #contact-map { height: 200px; } .co-banner-bottom { width: 96%; height: auto; flex-direction: column; padding: 20px 20px; border-radius: 20px; background-size: cover; margin: 20px auto 40px auto; } .co-banner-bottom>div:nth-child(1) { width: 100%; height: 60px; } .co-banner-bottom>div:nth-child(1) div { top: unset; left: unset; text-align: center; position: relative; margin: 0 auto; height: 3px; } .co-banner-bottom>div:nth-child(2) { width: 100%; } .co-banner-bottom>div:nth-child(2) form { display: flex; flex-direction: column; } .liuyan_info { position: relative; display: block; float: left; margin: 20px 0 10px 0; } .liuyan_info p { margin-right: unset; width: 48%; } #content { width: 100%; } .co-banner-bottom>div:nth-child(2) form .liuyan_info:nth-child(4) { display: flex; width: 100%; flex-direction: row; } .co-banner-bottom>div:nth-child(2) form .liuyan_info:nth-child(3) p { width: 100%; } .co-banner-bottom>div:nth-child(2) form .liuyan_info:nth-child(4) p:nth-child(2) { align-items: start; position: relative; justify-content: flex-end; align-content: flex-end; flex-wrap: wrap; } .liuyan_info:nth-child(3)>div { display: flex; justify-content: space-around; } .liuyan_info input { margin: 4px 0; width: 100%; border: none; border-left: 4px solid #e5ecf6; padding: 0 15px; background-color: #e5ecf6; } .liuyan_info input:hover { border-left: 4px solid #0449a5; } .liuyan_info textarea { background-color: #e5ecf6; } .liuyan_info .code { margin-right: unset; width: 45%; flex: unset; height: 45px; } .liuyan_info img { height: 45px; width: 45%; margin: 4px 0; } .submit { position: relative; left: 0; top: 0; } }