/* 공통 레이아웃 */
    body {
        margin: 0;
        padding: 0;
        font-family: Arial, sans-serif;
        background-color: #f9f9f9;
      }
      .container {
        max-width: 800px;
        margin: 0 auto;
        background-color: #fff;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }
      /* 상단 메뉴 */
      nav {
        display: flex;
        width: 100%;
        border-bottom: 1px solid #ddd;
        position: fixed;
        top: 0;
        z-index: 1000;
        max-width: 800px;
        margin: 0 auto;
      }
      nav .nav-item {
        width: 50%;
        position: relative;
        text-align: center;
      }
      nav .nav-item a {
        display: block;
        padding: 15px 0;
        text-decoration: none;
        color: #333;
        font-weight: bold;
      }
      nav .nav-item.image a {
        /* 메뉴 이미지를 배경으로 사용 시 */
        background-size: cover;
        background-position: center;
        color: #333;
      }
      /* 드롭다운 */
      .dropdown:hover .dropdown-content {
        display: block;
      }
      .dropdown-content {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        background-color: #fff;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        z-index: 1000;
      }
      .dropdown-content ul {
        list-style: none;
        margin: 0;
        padding: 0;
      }
      .dropdown-content li {
        border-bottom: 1px solid #eee;
      }
      .dropdown-content li:last-child {
        border-bottom: none;
      }
      .dropdown-content a,
      .dropdown-content span {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #333;
        cursor: pointer;
      }
      /* 메인 콘텐츠 */
      main {
        flex: 1;
        padding: 0;
        margin: 0;
        margin-top: 49px;
      }
      .hero {
        width: 100%;      
        position: relative;
        line-height: 0;
      }
      .hero .con img {width: 100%;}
      /* 팝업 레이어 */
      .popup-overlay { display: none; position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0,0,0,0.6); justify-content: center; align-items: center; z-index: 2000; }
      .popup-content { position: relative; max-width: 90%; max-height: 90%; }
      .popup-content img { width: 100%; display: block; border-radius: 8px; }
      .popup-close, .popup-buy {
        position: absolute; cursor: pointer;
      }
      .popup-close { width: 5%;height: 7%;top: 2%;right: 1%; }
      .popup-buy { width: 83%;height: 14%;top: 77.5%;left: 8.5%; }
      .con02, .con03 {position: relative;}
      .btn {position: absolute;cursor: pointer;}
      .footer img {width: 100%;}
      /*당류*/
      .con02 .btn01 {width: 17%;height: 5.2%;top: 30.9%;left: 27%;}
      .con02 .btn02 {width: 17%;height: 5.2%;top: 30.9%;left: 55.2%;}
      .con02 .btn03 {width: 17%;height: 5.2%;top: 37%;left: 27%;}
      .con02 .btn04 {width: 17%;height: 5.2%;top: 37%;left: 55.2%;}
      .con02 .btn05 {width: 20%;height: 5.2%;top: 43.2%;left: 26%;}
      .con02 .btn06 {width: 17%;height: 5.2%;top: 43.2%;left: 55.2%;}
      .con02 .btn07 {width: 19%;height: 4.2%;top: 49.2%;left: 26%;}
      .con02 .btn08 {width: 19%;height: 4.2%;top: 49.2%;left: 55%;}
      .con02 .btn23 {width: 19%;height: 4.8%;top: 54.2%;left: 26%;}
      .con02 .btn24 {width: 19%;height: 4.8%;top: 54.2%;left: 55%;}
  
      /*지방*/
      .con02 .btn09 {width: 26.9%;height: 5.4%;top: 64.1%;left: 22.2%;}
      .con02 .btn10 {width: 15.9%;height: 5.1%;top: 64.1%;left: 56.2%;}
      .con02 .btn11 {width: 26.9%;height: 5.4%;top: 69.9%;left: 22.2%;}
      .con02 .btn12 {width: 26.9%;height: 5.2%;top: 69.9%;left: 51.2%;}
      .con02 .btn25 {width: 17.9%;height: 4.7%;top: 75.8%;left: 26.2%;}
      .con02 .btn26 {width: 19.9%;height: 4.8%;top: 75.8%;left: 54.2%;}
      .con02 .btn27 {width: 17.9%;height: 5.6%;top: 81.2%;left: 40.2%;}
      
  
      /*기타*/
      .con02 .btn13 {width: 21.9%;height: 5.6%;top: 91.2%;left: 39.2%;}
  
      /*이벤트 참여*/
      .con03 .btn14 {width: 59%;height: 2.6%;top: 18.8%;left: 20.4%;}
      .con03 .btn15 {width: 59%;height: 3.6%;top: 36.5%;left: 20.4%;}

      /*야쿠르트XO 페이지*/
      .con03 .btn16 {width: 78.4%;height: 3.3%;top: 94.0%;left: 10.7%;}
      /*.con03 .btn17 {width: 59.2%;height: 2.1%;top: 94.3%;left: 20.4%;}*/

      /*슈퍼100 페이지*/
      .con01 .btn18 {width: 79%;height: 1.65%;top: 92.6%;left: 10.4%;}
      /*.con02 .btn19 {width: 59%;height: 7.4%;top: 83.4%;left: 20.4%;}*/

      /*윌 페이지*/
      .con01 .btn20 {width: 79%;height: 2.1%;top: 51.8%;left: 10.4%;}
      .con02 .btn21 {width: 79%;height: 5.4%;top: 89.2%;left: 10.5%;}

      /*엠프로 페이지*/
      .con02 .btn28 {width: 79%;height: 3.6%;top: 25.7%;left: 10.4%;}
      .con02 .btn29 {width: 79%;height: 3.5%;top: 58.1%;left: 10.4%;}
      .con02 .btn30 {width: 79%;height: 3.5%;top: 91.5%;left: 10.4%;}
      .con03 .btn31 {width: 59%;height: 9.1%;top: 67.2%;left: 21.4%;}

      /*케어온 페이지*/
      .con02 .btn32 {width: 79%;height: 13.8%;top: 63.7%;left: 10.4%;}
      .con03 .btn33 {width: 59%;height: 10.2%;top: 70.0%;left: 20.4%;}