/*239971340-徐梦槿*/
.container{
	width: 1200px;
	height: 627px;
	margin: 0px auto;
	background-image: url('../爱家居/图片素材/bg.png');
	background-repeat: no-repeat;
	position: relative;/* 父元素设置为相对定位 */
	/* border: 2px solid #000; */
}
.container1{
	position: relative;/* 设置相对定位便于后续放三种图片 */
	width: 1200px;
	height: 500px;
	margin: 0px auto;
}
/* 夏日生活div的径向渐变色背景 */
.summer-life-container {
	background: radial-gradient(circle, #dae7ef,#e1ebf2); 
}
/* 爱家居logo */
.picture{
	position: absolute;/* 子元素绝对定位 */
	left:70px;
	top:5px;
}
/* 导航的div */
.daohang{
	position: absolute;
	left:200px;
	top:5px;
}
/* 一级菜单设置menu*/
.menu{
	list-style-type: none;/* 去掉默认的无序符号 */
}
/* 让一级菜单浮动,使之横向排列 */
.menu li{
	position: relative;
	float:left;/* 使用浮动,横向排列 */
	width: 150px;
	padding: 10px;
}
/* 二级菜单“床和床垫”设置 */
.submenu{
	list-style-type: none;/* 去掉默认的无序序号 */
	display: none;/* 默认隐藏二级菜单 */
	position: absolute;/* 相对于menu li */
	left:-16px;
	padding: 0;
	margin: 0;
}
.submenu li{
	width: 100px;
	text-align: center;二级菜单居中显示
}
/* 二级菜单“床和床垫”设置 */
.submenu{
	list-style-type: none;/* 去掉默认的无序序号 */
	display: none;/* 默认隐藏二级菜单 */
	position: absolute;/* 相对于menu li */
	left:-16px;
	padding: 0;
	margin: 0;
}
.submenu li{
	width: 100px;
	text-align: center;二级菜单居中显示
	margin-top: -5px; /* 上间距 */
	margin-bottom: -5px; /* 下间距 */
}
/* 二级菜单“卧室纺织品”设置 */
.submenu1{
	list-style-type: none;/* 去掉默认的无序序号 */
	display: none;/* 默认隐藏二级菜单 */
	position: absolute;/* 相对于menu li */
	left:-10px;
	padding: 0;
	margin: 0;
}
.submenu1 li{
	width: 100px;
	text-align: center;二级菜单居中显示
	margin-top: -5px; /* 上间距 */
	margin-bottom: -5px; /* 下间距 */
}
/* 二级菜单“灯具照明”设置 */
.submenu2{
	list-style-type: none;/* 去掉默认的无序序号 */
	display: none;/* 默认隐藏二级菜单 */
	position: absolute;/* 相对于menu li */
	left:-18px;
	padding: 0;
	margin: 0;
}
.submenu2 li{
	width: 100px;
	text-align: center;二级菜单居中显示
	margin-top: -5px; /* 上间距 */
	margin-bottom: -5px; /* 下间距 */
}


/* 鼠标悬浮在父菜单项上时显示子菜单 */
.menu > li:hover .submenu {
	display: block;
}
.menu > li:hover .submenu1 {
	display: block;
}
.menu > li:hover .submenu2 {
	display: block;
}
/* 鼠标在二级菜单项“床和床垫”悬浮时改变背景色 */
.submenu li:hover {
	background-color: gold;
}
/* 鼠标在二级菜单项“卧室纺织品”悬浮时改变背景色 */
.submenu1 li:hover {
	background-color: gold;
}
/* 鼠标在二级菜单项“灯具照明”悬浮时改变背景色 */
.submenu2 li:hover {
	background-color: gold;
}
/* 搜索设置div */
.search_container{
	position: relative;
}
/* 搜索框设置 */
.search{
	position: absolute;
	left:880px;
	top:30px;
	width: 230px;
	height: 30px;
	padding-left: 35px; /* 为图片留出空间 */
	border-radius: 115px; /* 圆角稍小一些 */
	border: 1px  #fff; /* 添加边框 */
	background: url('../爱家居/图片素材/f.png') no-repeat;
	background-position: 10px 7px;
	background-color: #fff;
}

/* 热门推荐logo */
.picture2{
	display: block;/* 独占一行 */
	margin: 0 auto;
	width: 636px; /* 保持宽度不变 */
}
/* 热门推荐的三张照片设置 */
.picture2_1,
.picture2_2,
.picture2_3{
	float:left;/* 浮动设置,使得三张照片在一行 */
	/* border: 2px solid red; */
}
/* 热门推荐图片样式 */
.picture2_1 img,
.picture2_2 img,
.picture2_3 img {
	width: 300px;
	height: 300px;
	margin: 0 auto; /* 设置左右间隔（*/
	display: block;
	/* border: 2px solid blue; /* 添加边框 */ */
}

/* 夏日生活logo */
.picture3 {
	position: relative;
	display: block;
	margin: 0 auto;
	width: 242px; /* 保持宽度不变 */
}
/* 夏日生活的三种照片设置 */
.picture3_1{
	position: absolute;
	width: 100%;
	text-align: center;
	/* border: 2px solid #000; */
	z-index: 0;
}
/* 夏日生活三张照片的位置设置 */
.picture3_1 img{
	margin:0 30px;/* 设置左右间隔 */
	/* border: 2px solid #000; */
	transition: all 2s ease;/* 当鼠标悬停在图片上过渡延迟时间设置 */
}
/* 换行设置 */
.br{
	margin-bottom: 20px;
}
/* 版权设置 */
.banquan{
	position: relative;/* 便于文字在背景上显示位置的控制 */
	width: 1200px;
	text-align: center;
	height: 70px;
	margin: 0px auto;
	background-image: url('../爱家居/图片素材/footer_bg.jpg');
	background-repeat: repeat-x;
}
/* 版权文字设置 */
.font{
	position: absolute;
	font-size: 20px;
	top:5px;
	color: aliceblue;
	width: 1200px;

}
/* 给热门推荐三张照片分别设置一个容器 */
.picture-container {
	position: relative; /* 在透明容器上放文字 */
	width: 300px;
	height: 300px;
	margin: 0 45px; /* 设置左右间隔*/
	transition: height 1s ease; /* 添加过渡效果 */
	overflow: hidden;/*不会溢出*/
}
/* 热门推荐相关文字设置 */
.text {
	position: absolute;
	top: -100%; /* 初始位置在图片上方一定距离,得到透明度从图片的上方延展下来的效果*/
	bottom: 2px;/* 透明度最后停止的位置 */
	height: 100%; /* 覆盖整个图片的高度 */
	background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
	color: white;/* 文字颜色 */
	transition: top 2s ease, opacity 2s ease; /* 添加过渡效果，同时过渡top和opacity */
	opacity: 0; /* 初始透明度为0——不可见 ，当鼠标悬停在图片上才显示透明度*/
}
/* 设置热门推荐三个照片的鼠标浮动样式 */
.picture-container:hover .text {
	top: 0; /* 鼠标悬停时，让透明度的最上方与图片的最上方对齐*/
	opacity: 1; /* 设置透明度为1，使文字内容可见 */
}

 
/* 夏日生活的三个照片鼠标悬停设置 */
.picture3_1 img:hover{
	transform: scale(1.1);/* 变大 */
	filter: drop-shadow(0px 5px 5px rgba(0,0,0,.5));/* 阴影色 */
	opacity: 0.8;/* 透明度设置 */
}

/* 旋转动画设置 */
.donghua{
	position: fixed;/* 在夏日生活div的上面 */
	right: 10%;
	bottom: 10%;
	/* 设置动画 */
	animation: swing 2s infinite ease-in-out;
}
/* 定义swing动画 */
@keyframes swing {
	0%, 100% {
		transform: rotateZ(0deg);/* 初始和末尾状态绕Z轴0度 */
	}
	50% {
		transform: rotateZ(30deg);/* 中间过程30度 */
	}
}
/* 第二根水平线的粗细宽高 */
.xian{
	height: 7px; 
	background-color: white; /* 设置水平线的颜色 */
	margin: 0 4px;
}
/* 文字部分设置左右外边距 */
.right-left-margin{
	margin: 0 7px;
}