.tousu-container { padding: 100px 0; } .contact-container { height: 650px; background: url(../images/zoujin/ditu.jpg) no-repeat center right / auto 790px, #f7f7f7; display: flex; align-items: center; } .contact-container .contact-text { width: 710px; height: 550px; background: #ffffff; padding: 40px 40px 0; box-sizing: border-box; } .contact-text .title { font-size: 34px; font-weight: 400; color: #333333; position: relative; border-bottom: 1px solid #f2f2f2; padding-bottom: 25px; margin-bottom: 20px; } .contact-text .title::after { content: ''; width: 70px; height: 3px; background: #f08200; position: absolute; bottom: -2px; left: 0; } .contact-text .contact-box { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #f2f2f2; padding: 20px 0; } .contact-text .contact-box:last-child { border-bottom: none; } .contact-text .contact-box p { font-size: 16px; font-weight: 400; color: #666666; margin-bottom: 10px; } .contact-text .contact-box span { font-size: 20px; font-weight: 400; color: #333333; } .contact-text .contact-box img { height: 40px; } .contact-form { padding: 60px 0; } .contact-form .title { font-size: 34px; font-weight: 400; color: #333333; text-align: center; margin-bottom: 45px; } .form-container { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 30px; grid-row-gap: 30px; } .contact-form input, .contact-form textarea { border: 1px solid rgba(102, 102, 102, 0.1); width: 100%; height: 70px; resize: none; padding: 10px 22px; box-sizing: border-box; font-size: 15px; font-weight: 400; color: #999999; box-sizing: border-box; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #999; } .contact-form textarea { height: 130px; } .contact-form .form-item.area { grid-column: span 2; } .contact-form .form-item { position: relative; } .contact-form .form-item.code-img input { padding-right: 150px; } .contact-form .form-item.code-img .code { width: 88px; height: 30px; background: #ffecd6; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; } .contact-form .submit-btn { height: 60px; background: #f08200; text-align: center; line-height: 60px; font-size: 16px; font-weight: bold; color: #f7f7f7; margin-top: 40px; cursor: pointer; } .breachBlock { overflow-x: auto; padding: 60px 0; } .breachBlock table tr{ border-bottom: 1px solid #d4cfcf; border-left: 1px solid #d4cfcf; } .breachBlock table td { line-height: 1.6; padding: 15px 10px; border-right: 1px solid #d4cfcf; } .breachBlock table td:first-child{ width: 200px; } .breachBlock table td:nth-child(2){ width: 80px; } .breachBlock table td:nth-child(3){ width: 240px; } .breachBlock table td:nth-child(4){ width: 150px; } .breachBlock table td:nth-child(5){ width: 100px; } .breachBlock table td:nth-child(6){ width: 180px; } .breachBlock table td:nth-child(7){ width: 200px; } .breachBlock table td:nth-child(8){ width: 200px; } .contactBlock { display: flex; justify-content: flex-end; position: relative; height: 680px; background: #f7f7f7; } .contactBlock .img{ display: flex; justify-content: flex-end; height: 100%; font-size: 0; } .contactBlock .img img{ height: 100%; width: auto; object-fit: cover; } .contactBlock .w1280{ position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); } .contactBlock .w1280 .contact-text{ width: 60%; max-width: 710px; height: 550px; background: #ffffff; padding: 40px 40px 0; box-sizing: border-box; } @media (max-width: 1600px) { .contactBlock .img{ width: 60%; } } @media (max-width: 1080px) { .contactBlock{ flex-direction: column; height: auto; padding-bottom: 40px; } .contactBlock .img{ width: 100%; } .contactBlock .w1280{ position: initial; transform: none; margin-top: -60px; } .contactBlock .w1280 .contact-text{ width: 100%; max-width: 100%; height: auto; padding-bottom: 40px; } } @media (max-width: 768px) { .contact-container { background: #f7f7f7; height: auto; padding: 40px 0; } .contact-container .contact-text { width: auto; height: auto; padding: 20px; } .contact-text .title { font-size: 20px; padding-bottom: 20px; font-weight: bold; } .contact-text .title::before { height: 2px; } .contact-text .contact-box p { font-size: 14px; } .contact-text .contact-box span { font-size: 16px; } .contact-text .contact-box img { height: 30px; } .contact-text .contact-box { padding: 20px 0; } .contact-form { padding: 40px 0; } .contact-form .title { font-size: 20px; font-weight: bold; margin-bottom: 25px; } .form-container { grid-template-columns: repeat(1, 1fr); grid-row-gap: 20px; } .contact-form .form-item.area { grid-column: span 1; } .contact-form input, .contact-form textarea { height: 40px; padding: 10px 15px; font-size: 14px; } .contact-form .form-item.code-img .code { right: 10px; } .contact-form textarea { height: 80px; } .contact-form .submit-btn { height: 40px; line-height: 40px; font-size: 14px; margin-top: 25px; } .tousu-container { padding: 40px 0; } }