@charset "utf-8"; /********************联系我们*****************/ .con1{ position: relative; width: 100%; padding-top: 75px; padding-bottom: 120px; } .conTitlt{ width: 100%; } .conTitlt p{ font-family: gilroy-regular; font-size: 46px; color: #222; line-height: 1; } .contactType{ margin-top: 100px; display: flex; justify-content: space-between; padding-left: 8px; } .types{ display: flex; justify-content: flex-start; } .types .typeL{ margin-right: 30px; } .types .typeL .imgIcon{ position: relative; width: 76px; height: 76px; border-radius: 50%; display: flex; justify-content: center; align-items: center; } .types .typeL .imgIcon:before{ position: absolute; content: ''; width: 100px; height: 100px; border-radius: 50%; top: -12px; left: -12px; opacity: .4; } .type1 .typeL .imgIcon,.type1 .typeL .imgIcon:before{ background: #b42328; } .type2 .typeL .imgIcon,.type2 .typeL .imgIcon:before{ background: #53969f; } .type3 .typeL .imgIcon,.type3 .typeL .imgIcon:before{ background: #4d7ac4; } .types .typeR .conInfo p{ font-size: 40px; color: #222; line-height: 1; } .types .typeR .conTit{ margin-top: 20px; } .types .typeR .conTit p{ font-family: gilroy-regular; font-size: 1vw; color: #666; line-height: 1; } .row-contact2{ position: relative; width: 100%; min-height: 300px; background: #f6f6f6; } .con2{ position: relative; width: 100%; padding-top: 65px; padding-bottom: 95px; } .tables{ position: relative; width: 100%; background: #fff; margin-top: 50px; } .tab-buttons{ width: 100%; } .tab-buttons ul{ position: relative; display: flex; justify-content: space-around; } .tab-buttons ul li{ background: #245199; height: 80px; border-right: 1px solid rgba(201,201,201,.2); width: 25%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .tab-buttons ul li:last-child{ border-right: none; } .tab-buttons ul li.act{ background: #b42328; } /*.tab-buttons ul li:hover{ background: #b42328; }*/ .tab-buttons ul li a{ font-family: gilroy-regular; font-size: 24px; color: #fff; line-height: 1; } .form{ display: none; position: relative; width: 100%; background: #fff; padding: 60px 65px; } .form.active{ display: block; } .form{ position: relative; } form{ display: flex; flex-wrap: wrap; } form .tab1{ width: calc(50% - 15px); border: 1px solid #eee; height: 65px; border-radius: 10px; padding: 0 20px; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 30px; } form .tab1:nth-child(1),form .tab1:nth-child(3){ margin-right: 30px; } form .tab2{ width: 100%; border: 1px solid #eee; height: 60px; border-radius: 10px; padding: 0 20px; display: flex; justify-content: flex-start; align-items: center; margin-bottom: 30px; } form input{ height: 100%; width: calc(100% - 100px); outline: none; margin-left: 10px; font-family: gilroy-regular; font-size: 18px; color: #222; line-height: 1.5; } form .phone input{width:calc(100% - 150px);} form .tab2 input{ width: 90%; } form .tab3{ width: 100%; height: 150px; border: 1px solid #eee; border-radius: 10px; margin-bottom: 30px; padding: 15px 20px; display: flex; justify-content: flex-start; } form .tab3 textarea{ height: 100%; width: calc(100% - 100px); outline: none; margin-left: 10px; font-family: gilroy-regular; font-size: 18px; color: #222; line-height: 1.5; margin-top: -5px; } form .tab3 textarea::-webkit-input-placeholder{color: #666;font-size: 18px;} form p{ font-family: gilroy-regular; font-size: 0.9vw; line-height: 1; color: #888; vertical-align: text-top; } form p span{ display: inline-block; position: relative; height: 10px; width: 10px; margin-left: 5px; } form p span img{ position: absolute; left: 0; top: -5px; } form .subBtn{ width: 100%; height: 65px; border-radius: 8px; } form .subBtn button{ width: 100%; height: 100%; border: none; background: #f5f5f5; border-radius: 8px; color: #222; text-align: center; line-height: 60px; font-family: gilroy-regular; font-size: 18px; cursor: pointer; } form .subBtn button:hover{ background: #b42328; color: #fff; } .form3 .tab3 textarea{ width: calc(100% - 200px); } .form4 .tab3 textarea{ width: calc(100% - 225px); } form .tab4{ position: relative; width: calc(50% - 15px);; height: 60px; margin-bottom: 30px; display: flex; justify-content: flex-start; align-items: center; } form .tab4 input{ border: 1px solid #eee; border-radius: 10px; } form .tab4 input{ width: calc(100% - 185px); } .form2 .tab1:nth-child(4) input{ width: calc(100% - 150px); } .form2 .tab4 input{ opacity: 0; z-index: 5; } .form2 .tab4 .btnFile{ position: absolute; display: flex; justify-content: center; align-items: center; width: calc(100% - 185px); height: 60px; left: 185px; border-radius: 10px; border: 1px solid #eee; text-align: center; z-index: 1; } .form2 .tab4 .btnFile img{ height: 18px; margin-left: 10px; } @media only screen and (min-width:1921px) and (max-width:2560px){ form input{width: calc(100% - 120px);} form .tab3 textarea{width: calc(100% - 110px);} form .tab4 input{width: calc(100% - 190px);} .form2 .tab1:nth-child(4) input{width: calc(100% - 185px);} .form2 .tab4 .btnFile{left:225px;width: calc(100% - 190px);} .form3 .tab3 textarea{width: calc(100% - 170px);} .form4 .tab3 textarea{width: calc(100% - 125px);} } @media only screen and (max-width: 1900px){ .con1{ padding-top: 3.906vw; padding-bottom: 6.25vw; } .conTitlt p{ font-size: 2.395vw; } .contactType{ margin-top: 5.209vw; } .types .typeL{ margin-right: 1.5625vw; } .types .typeL .imgIcon{ width: 3.9583vw; height: 3.9583vw; } .types .typeL .imgIcon:before{ width: 5.209vw; height: 5.209vw; top: -0.625vw; left: -0.625vw; } .types .typeR .conInfo p{ font-size: 2.084vw; } .types .typeR .conTit{ margin-top: 1.0417vw; } .types .typeR .conTit p{ font-size: 1.0417vw; } .con2{ padding-top: 3.3854vw; padding-bottom: 4.948vw; } .tables{ margin-top: 2.604vw; } .tab-buttons ul li{ height: 4.166vw; } .tab-buttons ul li a{ font-size: 1.25vw; } .form{ padding: 3.125vw 3.385vw; } form p,form input,form .subBtn button{ font-size: 0.9375vw; } .form2 .tab4 .btnFile img{ height: 0.9375vw; } form .tab1,form .tab2,form .tab4{ height: 3.125vw; margin-bottom: 1.5625vw; } form .tab3{ height: 7.8125vw; } form .tab3 textarea{ margin-top: -.2604vw; font-size: 0.9375vw; } .form2 .tab4 .btnFile{ height: 3.125vw; } form .subBtn button{ height: 3.125vw; line-height: 3.125vw; } form .tab1,form .tab2,form .tab4,.form2 .tab4 .btnFile,form .tab3{ border-radius: 0.31vw; } form p span img{ top: -0.25vw; } } @media only screen and (max-width: 1199px){ /*.con1{ padding-top: 3.906vw; padding-bottom: 6.25vw; } .conTitlt p{ font-size: 30px; } .contactType{ margin-top: 5.209vw; }*/ .types .typeL .imgIcon img{ height: 14px; } form .tab2 input{ width: 76%; } } @media only screen and (max-width: 800px){ form .tab1,.form2 .tab4{ width: 100%; } form .tab1:nth-child(1), form .tab1:nth-child(3){ margin-right: 0; } form .tab1, form .tab2, form .tab4,form .tab3,.form2 .tab4 .btnFile,form .subBtn button{ height: 40px; padding: 0 15px; border-radius: 5px; } form .subBtn{ height: 40px; } form .tab3{ height: 100px; padding: 10px 15px; } form .subBtn button{ height: 40px; line-height: 40px; } form p, form input, form .subBtn button,.form2 .tab4 .btnFile{ font-size: 14px; } .form2 .tab4{ padding-left: 0; } .form2 .tab4 .btnFile img{ height: 14px; } .form2 .tab4 input{ width: calc(100% - 150px); } .form2 .tab4 .btnFile{ left: 120px; width: calc(100% - 120px); } form .tab2 input{ width: auto; } } @media only screen and (max-width: 500px){ .con1{ padding-bottom: 10px; padding-top: 30px; } .conTitlt p{ font-size: 20px; font-family: gilroy-regular; } .contactType{ display: block; margin-top: 30px; } .types .typeL .imgIcon img{ height: 24px; } .types .typeL .imgIcon{ width: 55px; height: 55px; } .types .typeL .imgIcon:before{ width: 70px; height: 70px; top: -8px; left: -8px; } .types .typeL{ margin-right: 15px; } .types .typeR .conInfo{ margin-top: 5px; } .types .typeR .conInfo p{ font-size: 22px; font-family: gilroy-regular; } .types .typeR .conTit{ margin-top: 10px; } .types .typeR .conTit p{ font-size: 14px; } .types{ margin-bottom: 35px; } .con2{ padding-top: 30px; padding-bottom: 30px; } .tables{ margin-top: 25px; } form .tab1, form .tab2, form .tab4, form .tab3, .form2 .tab4 .btnFile, form .subBtn button{ padding: 5px 8px; } form .tab3{ padding: 10px 8px; } form p, form input, form .subBtn button, .form2 .tab4 .btnFile,form .tab3 textarea{ font-size: 12px; } form .tab3 textarea{ margin-top: -3px; font-size: 12px; } .tab-buttons ul li{ height: 40px; } .tab-buttons ul li a{ font-size: 12px; text-align: center; } form .tab2{ height: 60px; } form .tab2 p{ width: 110px; line-height: 1.5; } form .tab2 input{ width: calc(100% - 110px); } form .subBtn button{ line-height: 40px; padding: 0; } .form2 .tab1:nth-child(4) input { width: calc(100% - 110px); } #tel1,#tel2,#tel3,#tel4{width:calc(100% - 110px);} #form1 .tab2 p{width: 120px;} #que2{width:calc(100% - 120px);} }