* {
    margin:0;
    padding:0;
    box-sizing: border-box;
}
html, body {
    overflow-x: hidden;
    max-width: 100%;
}
.header {
    width:100%;
    height:100px;
    }
    .header .logo img {
        width:300px;
        height:85px;
        margin-top:8px;
        margin-left:20px;
        float:left;

    }
    .header .menu {
        height:100px;
        float:right;

    }
        .header .menu ul {
            margin-left:50px;

        }
       .header .menu li{
      
	float: right;
	list-style-type: none;
	width: 80px;
	font-family: "微软雅黑";
	color: #7D7D7D;
	font-size: 15px;
	line-height: 100px;
	font-weight: bold;
	text-align: center;
}
        .header .menu li a {
            text-decoration:none;
            color: #7D7D7D;
        }
            .header .menu li a:hover {
                color:red;
            }
.main .pic img {
    width:100%;
    height:600px;
    position:relative;

}
.toplayer {
    background-color:#000000;
    opacity:0.5;
    z-index:1;
    position:absolute;
    top:100px;
    width:100%;
    height:600px;

}
.main .btn {
    z-index:2;
    width:500px;
    height:300px;
    position:absolute;
    top:400px;
    margin-top:-150px;
    right:50%;
    margin-right:-250px;
    text-align:center;

}
    .main .btn p {
        padding-top:100px;
        color:#ffffff;
        font-size:45px;
        font-family:"微软雅黑";
        font-weight:bold;
        

    }
    .main .btn button {
        margin-top:50px;
        background-color:#f5704f;
        width:200px;
        height:60px;
        color:#ffffff;
        font-family:"微软雅黑";
        font-size:14px;
        text-align:center;
        border-radius:8px;

    }
.main .content {
    color:#7c7d7f;
    font-size:20px;
    font-weight:bold;

}
    .main .content .top {
        max-width:1000px;
        width:100%;
        box-sizing:border-box;
        padding:50px 20px 0 20px;
       margin:0 auto;

    }
        .main .content .top .icon {
            float:left;
            width:33.3%;
            text-align:center;


        }
            .main .content .top .icon img {
                width:100px;
                height:100px;

            }
.main .content .top .icon .des{
	padding-top: 20px;
}
        .main .content .top .recept {
            padding-top:50px;
            clear:both;
            font-size:22px;
            text-align:center;
            color:#E19796;
            font-weight: bold;
	        font-style:italic ;

        }
    .main .content .top .picAndDes{
	padding-top: 50px;
}
    .main .content .top .picAndDes .icon2{
	float: left;
	text-align: center;
	padding: 10px;
}
    .main .content .top .picAndDes .icon2 .des1{
	padding-top: 10px;
	font-size: 20px;
	font-weight: bold;
	color: #7c7d7f;
}
.main .content .top .picAndDes .icon2 .des2{
	color: #BDBDBC;
	padding-top: 10px;
}
.main .content .top .picAndDes .icon2 img{
	width: 310px;
	height: 260px;
}



.main .content .bottom {
	width: 100%;
	padding-bottom: 30px;
	background-color: #F9F9F9;
}
.main .content .bottom .bottom-content {
	max-width: 1000px;
	width: 100%;
	box-sizing: border-box;
	padding: 0 20px;
	margin: 0 auto;
	margin-bottom: 50px;
}
.main .content .bottom .bottom-content .title{
	text-align: center;
	padding-top: 50px;
	font-family: "微软雅黑";
	padding-bottom: 40px;
	font-size: 20px;
}
.main .content .bottom .bottom-content .picContent dl{
	width: 470px;
	float: left;
	margin:10px 12px 10px 12px;
}
.main .content .bottom .bottom-content .picContent dl dd{
	padding-top: 20px;
    

    
}
.main .content .bottom .bottom-content .picContent dl dt img{
	width:470px; 
	height:480px;
}



.footer{
	width: 100%;
	min-height:100px;
	box-sizing:border-box;
    background-color: #292C35;
	color: #ffffff;
	text-align: center;
	line-height: 50px;
	font-family: "微软雅黑";
	font-size: 15px;
}
   
    .footer a {
        color: #ffffff;
        text-decoration:none;
    }
    .footer a:hover {
        color: red;
       
    }

/* ==================== 响应式适配（小屏完全展示） ==================== */
@media screen and (max-width: 768px) {
    .main, .main .content {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }
    /* 头部：logo 与菜单改为上下居中堆叠 */
    .header {
        height: auto;
        padding: 12px 15px;
        box-sizing: border-box;
    }
    .header .logo img {
        float: none;
        display: block;
        width: 200px;
        height: auto;
        margin: 0 auto;
    }
    .header .menu {
        float: none;
        height: auto;
        margin-top: 6px;
    }
    .header .menu ul {
        margin: 0;
        display: flex;
        justify-content: center;
        flex-wrap: wrap;
    }
    .header .menu li {
        float: none;
        width: auto;
        padding: 0 14px;
        line-height: 42px;
    }
    /* 关于我容器与名言：收窄顶部留白、适度缩小字号 */
    .main .content .top {
        padding-top: 30px;
    }
    .main .content .top .recept {
        padding-top: 20px;
        font-size: 19px;
    }
    /* 页脚：行高收窄、随内容撑开，避免文字被截断 */
    .footer {
        line-height: 1.9;
        padding: 22px 15px;
    }
}

@media screen and (max-width: 768px) {
    .header .menu li {
        font-size: 14px;
    }
    .main .content .bottom .bottom-content .title {
        font-size: 18px;
        padding-bottom: 24px;
        padding-top: 36px;
    }
}

@media screen and (max-width: 480px) {
    .header .logo img {
        width: 170px;
    }
    .header .menu li {
        padding: 0 10px;
        font-size: 14px;
        line-height: 40px;
    }
    .main .content .top .recept {
        font-size: 17px;
    }
}

/* ==================== 顶部横幅响应式（覆盖内联样式） ==================== */
@media screen and (max-width: 768px) {
    .main > div:first-of-type {
        min-height: auto !important;
        padding: 50px 16px 40px 16px !important;
    }
    .main > div:first-of-type > div {
        padding: 40px 16px 36px 16px !important;
    }
    .main > div:first-of-type > div > p:first-child {
        letter-spacing: 2px !important;
        font-size: 13px !important;
        margin-bottom: 12px !important;
    }
    .main > div:first-of-type > div > h1 {
        font-size: clamp(28px, 12vw, 40px) !important;
        margin-bottom: 14px !important;
    }
    .main > div:first-of-type > div > p:nth-child(3),
    .main > div:first-of-type > div > p:nth-child(4) {
        font-size: clamp(14px, 4vw, 16px) !important;
        line-height: 1.8 !important;
    }
    .main > div:first-of-type > div > button {
        width: 180px !important;
        height: 48px !important;
        font-size: 14px !important;
        margin-top: 24px !important;
    }
}

/* ==================== "我能做些什么" 区块响应式 ==================== */
@media screen and (max-width: 768px) {
    .main > div:nth-of-type(3) > div:first-child {
        font-size: 22px !important;
    }
    .main > div:nth-of-type(3) > div:nth-child(2) {
        font-size: 13px !important;
        padding-bottom: 28px !important;
    }
    .main > div:nth-of-type(3) > div:nth-child(3) {
        gap: 16px !important;
    }
    .main > div:nth-of-type(3) > div:nth-child(3) > div {
        padding: 22px 18px !important;
        flex: 1 1 100% !important;
    }
    .main > div:nth-of-type(3) > div:nth-child(3) > div > div:first-child {
        font-size: 17px !important;
    }
    .main > div:nth-of-type(3) > div:nth-child(3) > div > p {
        font-size: 14px !important;
        line-height: 26px !important;
    }
}

/* ==================== "一起把想法变成现实" 区块响应式 ==================== */
@media screen and (max-width: 768px) {
    .main .content .bottom .bottom-content > div:first-child {
        font-size: 20px !important;
        padding-top: 20px !important;
    }
    .main .content .bottom .bottom-content > div:nth-child(2) {
        font-size: 14px !important;
        line-height: 28px !important;
    }
    .main .content .bottom .bottom-content button {
        width: 180px !important;
        height: 48px !important;
        font-size: 14px !important;
        margin-top: 20px !important;
    }
}

/* ==================== 关于我段落响应式 ==================== */
@media screen and (max-width: 768px) {
    .main .content .top > p {
        font-size: 14px !important;
        line-height: 28px !important;
        margin-top: 18px !important;
    }
}

/* ==================== 弹窗响应式 ==================== */
@media screen and (max-width: 768px) {
    #gbModal > div:first-child {
        padding: 14px 16px !important;
    }
    #gbModal > div:first-child > div:first-child {
        font-size: 18px !important;
    }
    #gbModal > div:first-child > div:last-child {
        font-size: 26px !important;
    }
    #gbModal > div:nth-child(2) {
        padding: 20px 16px 40px 16px !important;
    }
    #gbModal > div:nth-child(2) input,
    #gbModal > div:nth-child(2) textarea {
        height: 40px !important;
        font-size: 15px !important;
    }
    #gbModal > div:nth-child(2) textarea {
        height: 100px !important;
    }
    #gbModal > div:nth-child(2) button {
        height: 44px !important;
    }
}

/* ==================== 页脚响应式 ==================== */
@media screen and (max-width: 768px) {
    .footer {
        font-size: 13px;
        line-height: 1.8;
        padding: 20px 15px;
    }
    .footer p {
        margin-bottom: 6px;
    }
}