/* 基础样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    margin: 0 auto;
    min-height: 100vh;
    color: #fff;
    font-family: 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
    /* background: linear-gradient(180deg, #4fd1c5 0%, #38b2ac 100%); */
    background-image: url('/static/imgs/home/bg.png');
    background-repeat: no-repeat;
    background-size:cover;
    overflow-x: hidden;
    position: relative;
}

.container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    padding: 35px 20px 0 20px;
    background-image: url('/static/imgs/home/bottom.png') ;
    background-repeat: no-repeat;
    background-size:contain;
    background-position: bottom;
}

/* 头部样式 */
.header {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.header .logo {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}
.header .logo img{width: 72%;}

.header .subtitle {
    padding-left:24px;
}
.header .subtitle img{
    width: 62%;
}

main{
     position: relative;
   
}
/* 气泡容器 */
.bubble-container {
    width: 100%;
    height: 445px;
}


.bubble-container:after {
    content: "";
    display: table; /* 或者 display: block; */
    clear: both; /* 这里通常不这样用，只是为了完整性展示 */
}



.bubble{
    display: inline-block;
    vertical-align: top; /* 确保对齐 */
    position: absolute;
}

.bubble img {
    display: block;
    width: 100%;
    height: auto;
}

.bubble a{
   display: block;
}

/*气泡位置 */
#party-course{
    width: 42%;
    height: 42%;
    top: -38px;
    right: -10px;
}

#governance{
    width: 42%;
    height: 42%;
    top: 15px;
    left: 35px;
}

#activities{
    width: 36%;
    height: 36%;
    top: 188px;
    left: -10px;
}

#services{
    width: 36%;
    height: 36%;
    top: 138px;
    right: 30px;
}

#partners{
    width: 42%;
    height: 42%;
    top: 275px;
    left: 120px;
}

/* 底部样式 */
.footer {
    height: 180px;
    text-align: right;
    /*position: absolute;*/
    /*bottom:0;*/
}

.footer img{
    width: 38%;
}