@charset "utf-8"; .contact_us{ margin-top: 40px; border: #e5e5e5 1px solid; background-color: #ffffff;box-shadow: 0 6px 13px 0 rgba(69,69,69,0.13); margin-bottom: 50px;} .contact_us .contact_left{ float: left; width: 40%; background:-webkit-linear-gradient(to right,#006b6e,#0e8285); background:linear-gradient(to right,#006b6e,#0e8285); color: #ffffff;height:460px;} .contact_us .contact_left .contact_name{ position: relative; font-weight: bold; margin-bottom: 50px; font-size: 24px; margin-left: 40px; margin-right: 40px; margin-top: 60px; } .contact_us .contact_left .contact_name::after { left:0%; position: absolute; bottom:-25px; content: " "; width:42px; margin-left: 0; border-bottom: 3px solid #ffba00; -webkit-transition: .3s; transition: .3s; } .contact_us .contact_left .contact_adress{ line-height: 2.4; font-size:16px;margin-left: 40px; margin-right: 40px;} .contact_us .contact_right{ float: right; width:60%;background-position: center center; background-repeat: no-repeat; background-size: cover; height: 460px;} .contact_else{ overflow: hidden; padding-bottom: 80px;} .contact_else ul{ } .contact_else ul li{ float: left; width:48%; margin-right: 3.6%; display: inline;border: #e5e5e5 1px solid; background: #ffffff url("../images/weizhi.svg") 90% 80% no-repeat;box-shadow: 0 6px 13px 0 rgba(69,69,69,0.13); margin-bottom: 30px; background-size: auto 50%; padding: 40px 0;} .contact_else ul li:nth-child(2n){ margin-right: 0} .contact_else ul li .contact_else_name{ position: relative; font-weight: bold; margin-bottom: 50px; font-size: 20px; margin-left: 40px; margin-right: 40px; color: #006b6e; } .contact_else ul li .contact_else_name::after { left:0%; position: absolute; bottom:-20px; content: " "; width:40px; margin-left: 0; border-bottom: 3px solid #006b6e; -webkit-transition: .3s; transition: .3s; } .contact_else ul li .contact_else_adress{ line-height: 2.4; font-size:14px;margin-left: 40px; margin-right: 40px;} @media screen and (max-width: 1400px){ .contact_us .contact_left .contact_name{ font-size: 20px;margin-top: 40px;} .contact_us .contact_left .contact_adress{ font-size: 14px;} .contact_us .contact_right,.contact_us .contact_left{ height: 400px;} .contact_else ul li .contact_else_name{ margin-left: 30px; margin-right:30px; } } @media (max-width:768px) { .contact_us .contact_left { float: none; width: initial; background: -webkit-linear-gradient(to right,#006b6e,#0e8285); background: linear-gradient(to right,#006b6e,#0e8285); color: #ffffff; height: auto; padding: 50px 0; } .contact_us .contact_left .contact_name { position: relative; font-weight: bold; margin-bottom: 50px; font-size: 20px; margin-left:30px; margin-right:30px; margin-top: 0; } .contact_us .contact_left .contact_adress { line-height: 2.4; font-size: 15px; margin-left: 30px; margin-right: 30px; } .contact_us .contact_right { float: none; width: initial; height: 300px; } .contact_else ul li { float: none; width: initial; margin-right: 0; display: block; } }