/* 联系我们页面样式 */

#map-container {
            width: 100%;
            height: 100%;
        }

/* 联系我们Banner */

.contact-banner {

    height: 40vw; /* 使用视窗宽度的百分比 */

    max-height: 565px; /* 保持最大高度限制 */

    min-height: 300px; /* 添加最小高度，避免在小屏幕上太矮 */

    background-image: url('../images/contact-banner.jpg');

    background-size: cover;

    background-position: center;

    position: relative;

    display: flex;

    align-items: center;

}



.contact-banner::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.2);

}



.contact-banner .banner-content {

    position: relative;

    z-index: 2;

    color: #fff;

    padding-left: 50px;

}



.contact-banner h1 {

    font-size: 48px;

    font-weight: 700;

    margin-bottom: 10px;

}



.contact-banner h2 {

    font-size: 36px;

    font-weight: 300;

    margin-bottom: 30px;

    opacity: 0.8;

}



.breadcrumb {

    font-size: 16px;

    color: rgba(255, 255, 255, 0.8);

}



.breadcrumb a {

    color: #fff;

    text-decoration: none;

    transition: color 0.3s ease;

}



.breadcrumb a:hover {

    color: #4CAF50;

}



/* 联系信息部分 */

.contact-info-section {

    padding: 0;

    background-color: #fff;

}



.contact-row {

    display: flex;

    gap: 50px;

}



.contact-map {

    flex: 0 0 55%;

    height: 800px;

    overflow: hidden;

	margin-left:-80px;

}



#map {

    width: 100%;

    height: 100%;

}



.contact-details {

    flex: 0 0 40%;

    padding: 80px 0;

}



.contact-details h1 {

    font-size: 32px;

    color: #0b779c;

    margin-bottom: 20px;

}



.contact-intro {

    font-size: 18px;

    color: #555;

    margin-bottom: 40px;

    line-height: 1.6;

}



.contact-list {

    list-style: none;

    padding: 0;

}



.contact-list li {

    display: flex;

    margin-bottom: 30px;

    align-items: flex-start;

}



.contact-list i {

    font-size: 24px;

    color: #4CAF50;

    margin-right: 20px;

    margin-top: 5px;

}



.contact-list h3 {

    font-size: 18px;

    color: #333;

    margin-bottom: 5px;

}



.contact-list p {

    font-size: 16px;

    color: #555;

    line-height: 1.6;

}



/* 留言反馈部分 */

.contact-form-section {

    padding: 80px 0;

    background-image: url('../images/contact-form-bg.jpg');

    background-size: cover;

    background-position: center;

    position: relative;

}



.contact-form-section::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    background: rgba(0, 0, 0, 0.5);

}



.form-container {

    position: relative;

    z-index: 2;

    max-width: 800px;

    margin-right: 20px; /* 将表单靠右对齐 */

    margin-left: auto; /* 确保左侧自动调整 */

	margin-top:-80px;

}



.form-content {

    background-color: #2384a6; /* 修改背景颜色为指定的颜色 */

    padding: 50px;

    color: #fff;

    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.2); /* 添加阴影增强视觉效果 */

}



.form-content h2 {

    font-size: 32px;

    margin-bottom: 10px;

}



.form-content p {

    font-size: 16px;

    margin-bottom: 30px;

    opacity: 0.9;

}



.form-group {

    margin-bottom: 20px;

}



.form-group input,

.form-group textarea {

    width: 100%;

    padding: 12px 15px;

    border: none;

    border-radius: 5px;

    background-color: rgba(255, 255, 255, 0.9);

    font-size: 16px;

}



.form-group input:focus,

.form-group textarea:focus {

    outline: none;

    background-color: #fff;

}



.captcha-group {

    display: flex;

    gap: 15px;

}



.captcha-group input {

    flex: 1;

}



.captcha-img {

    flex: 0 0 120px;

    height: 44px;

    background-color: #fff;

    border-radius: 5px;

    overflow: hidden;

    position: relative;

}



.captcha-img img {

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.refresh-captcha {

    position: absolute;

    bottom: 0;

    right: 0;

    background-color: rgba(0, 0, 0, 0.5);

    color: #fff;

    font-size: 12px;

    padding: 2px 5px;

    text-decoration: none;

}



.submit-btn {

    display: inline-block;

    padding: 14px 35px;

    border: 2px solid #FFF;

    color: #FFF;

    font-weight: 500;

    border-radius: 4px;

    transition: all 0.3s ease;

    align-self: flex-start;

	background-color: #0b779c;

}



.submit-btn:hover {

    background-color: #4CAF50;

}



/* 响应式调整 */

@media (max-width: 992px) {

    .contact-banner h1 {

        font-size: 36px;

    }

    

    .contact-banner h2 {

        font-size: 28px;

    }

    

    .contact-row {

        flex-direction: column;

    }

    

    .contact-map,

    .contact-details {

        flex: 0 0 100%;

    }

    

    .contact-map {

        height: 400px;

    }

    

    .form-content {

        padding: 30px;

    }

}



@media (max-width: 768px) {

    .contact-banner {

        height: 60vw;

    }

    

    .contact-banner h1 {

        font-size: 30px;

    }

    

    .contact-banner h2 {

        font-size: 24px;

    }

    

    .contact-banner .banner-content {

        padding-left: 30px;
		margin-top:80px;
		text-align:center;

    }

    

    .contact-details h1 {

        font-size: 28px;

    }

    

    .captcha-group {

        flex-direction: column;

    }

    

    .captcha-img {

        width: 120px;

    }

}



@media (max-width: 576px) {

    .contact-banner {

        height: 70vw;

    }

    

    .contact-banner h1 {

        font-size: 26px;

    }

    

    .contact-banner h2 {

        font-size: 20px;

    }

    

    .contact-info-section,

    .contact-form-section {

        padding: 50px 0;

    }

    

    .form-content {

        padding: 25px;

    }

    

    .form-content h2 {

        font-size: 26px;

    }

}