*{margin: 0;
padding: 0;
box-sizing: border-box;
}
a{text-decoration: none;}
body{font: "微软雅黑";color: black;}
.nav{position: fixed;top: 0;left: 0;height: 60px;width: 100%;z-index: 999;background: white;}
.nav-mian{display: flex; justify-content: space-between;width: 1400px;height: 60px;font-size: 24px;margin: 0 auto;}
.nav-logo {float: left;height: 60px; margin: 0 auto;}
.nav-logo img{height: 60px;}
.topmenu {
  display: flex;
  list-style: none;
}
.topmenu > li {
  position: relative; /* 关键点：二级菜单相对这个一级li定位 */
  margin-right:35px;
  margin-top: 10px;
  font-size:24px;
}
.topmenu > li > a{
  color:#000;
  text-decoration:none;
}
.topmenu > li > a:hover{
  color: darkgrey;
}

/* =====二级菜单样式===== */
.submenu {
  list-style: none;
  /* 默认隐藏 */
  display: none;
  position: absolute;
  left: 0;
  top: 100%; /* 紧贴一级菜单下方 */
  background:white ;
  width: 180px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  padding: 8px 6px;
}
.submenu li a {
  display: block;
  padding: 8px 14px;
  font-size: 20px;
  color:#333;
  text-decoration:none;
}
/* 二级选项hover高亮，和截图灰色效果一致 */
.submenu li a:hover {
  background-color:#FDD5DC;
}
/* 悬浮一级li，显示二级下拉菜单 */
.topmenu > li:hover .submenu{
  display:block;
}
.banner{width: 100%;height: 685px;margin-top: 60px;}
.banner img{width: 100%;height: 685px;}
.section-title{
            text-align:center;
            margin:60px 0 60px;
        }
        .section-title h2{
            font-size:20px;
            font-weight:normal;
            color:#333;
        }
        .section-title p{
            font-size:16px;
            color:#555;
            margin-top:6px;
        }
        /* 大图容器，三张图重叠在同一个位置，绝对定位，默认只显示active的 */
        .big-img-wrap {
            width: 800px;
            height: 450px;
            margin: 0 auto 40px;
            position: relative;
        }
        .big-img-item {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: none;
        }
        .big-img-item.active {
            display: block;
        }
        .big-img-item img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* 下方三个圆形选项 */
        .circle-list {
            display: flex;
            justify-content: center;
            gap: 80px;
        }
        .circle-item {
            cursor: pointer;
        }
        .circle-item img {
            width: 140px;
            height: 140px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid transparent;
        }
        .circle-item.active img {
            border-color: #333;
        }
        .circle-item p {
            margin: 10px 40px;
            font-size: 18px;
        }
        .wrap {
            max-width: 1200px;
            margin: 100px auto;
            position: relative;
        }
        .item-group {
            position: relative;
            height: 720px;
        }
        .item-group img{transition: all 0.3s ease;} 
        .item-group img:hover{transform: scale(1.1,1.1);}
        .item {
            position: absolute;
            transition: transform 0.25s ease;
        }
        .item img {
            display: block;
            width: 360px;
            border-radius: 2px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.06);
        }
        .item .text {
            margin-top: 14px;
            font-size: 17px;
            color: #333;
            line-height: 1.6;
        }
        /* 初始交错定位 */
        .item-drink {
            top: 0;
            left: 120px;
            z-index: 1;
        }
        .item-gift {
            top: 160px;
            left: 420px;
            z-index: 2;
        }
        .item-cake {
            top: 320px;
            left: 720px;
            z-index: 3;
        }
        footer{
            background-color:#fcd9d9;
            text-align:center;
            padding:40px;
            font-size:14px;
            color:#444;
        }