* {
    box-sizing: border-box; /* 设置元素的盒子模型 */
    margin: 0; /* 清除默认页面边距 */
    padding: 0; /* 清除默认内边距 */
}

body {
    font-family: Arial, sans-serif; /* 设置字体 */
    height: 100%; /* 设置body为全屏 */
    width: 100%;
    margin: 0;
    padding: 0;
    background-color: #fff;
}

header {
    position: fixed; /* 固定在页面顶部 */
    top: 0;
    left: 0;
    right: 0;
    background-color:#f091a0 ; /* 背景颜色 */
    color: #efc4ce; /* 字体颜色 */
    font-size :15px; /* 字体大小 */;
    padding: 15px;
    text-align: center;
}

.container {
    display: flex; /* 使用弹性布局 */
    margin-top: 50px; /* 留出顶部空间 */
}

.sidebar {
    flex: 0.5; /* 左侧导航宽度 */
    background-color: #e2a2ac; /* 背景颜色 */
    height:auto; /* 高度根据视口计算 */
}

.sidebar ul {
    list-style: none; /* 去掉列表符号 */
}

.sidebar ul li {
    padding: 15px; /* 列表项内边距 */
}

.sidebar ul li a {
    text-decoration: none; /* 去掉链接下划线 */
    color: #333; /* 链接颜色 */
}

.content {
	flex: 4;
	margin: 0 10px;
}

.right{
   height: auto;
	flex: 0.5;
	background:#e4b8d5;
    text-align: center;
}

.t-color{
    width: 100%;
    height: 100px;
    background: #D4E5EF;
#text{
    color: #eff0f1;
    text-align: center;
    }
}

.t-middle{
    font-size: 80px;
    color: #665f4d;
    text-align: center;
    background: #c6beb1;
}

.链接{
    text-decoration: none; /* 去掉链接下划线 */
    color: #333; /* 链接颜色 */
}

.photo1:hover {
    height:540px;
    width:100%;
    background-size:100% 540px;
    background-repeat: no-repeat;
    background-image:url("../img/1.jpg");
    #hidden{
        display: none;
    }
}

.photo2:hover{
    height:540px;
    width:100%;
    background-size:100% 540px;
    background-image:url("../img/2.png"); 
    #hidden{
        display: none;
    }
}
.photo3:hover{
    height:540px;
    width:100%;
    background-size:100% 540px;
    background-image:url("../img/3.jpg");
    #hidden{
        display: none;
    }
}
.photo4:hover{
    height:540px;
    width:100%;
    background-size:100% 540px;
    background-image:url("../img/4.jpg");
    #hidden{
        display: none;
    }
}

@keyframes break1{
    0%{background-color: #faa;}
    50%{background-color: #faa;
        transform: rotate(360deg);
    }
    100%{background-color: #fbb;
        /* transform: rotate(720deg); */
    }
}
@keyframes break2{
    0%{background-color: #fbb;
    transform: rotate(0deg);}
    50%{background-color: #faa;
    transform: rotate(432deg);
}
    100%{background-color: #fcc;
        transform: rotate(0deg);
    }

}
@keyframes break3{
    0%{background-color: #fcc;
        transform: rotate(0deg);
    }
    50%{background-color: #faa;
    transform: rotate(504deg);
}
    100%{background-color: #fdd;
        transform: rotate(0deg);
    }
}
@keyframes break4{
    0%{background-color: #fdd;
    transform: rotate(0deg);}
    50%{background-color: #faa;
    transform: rotate(576deg);
}
    100%{background-color: #fee;
        transform: rotate(0deg);
    }
}
@keyframes break5{
    0%{background-color: #fee;
    transform: rotate(0deg);} 
    50%{background-color: #faa;
    transform: rotate(648deg);
}
    100%{background-color: #fee;
        transform: rotate(0deg);
    }
}

.flower{
    margin: 10px;
    padding: 15px;
    width:160px;
    height:160px;
    border-radius: 100%;
}
.flower div {
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 0 100px;
    transform-origin: 100% 100%;
    position: absolute;
    animation: break1 7s infinite;
}

.flower .flower2 {
    transform: rotate(72deg);
    animation: break2 7s infinite;
}

.flower .flower3 {
    transform: rotate(144deg);
    animation: break3 7s infinite;
}

.flower .flower4 {
    transform: rotate(216deg);
    animation: break4 7s infinite;
}

.flower .flower5 {
    transform: rotate(288deg);
    animation: break5 7s infinite;
}