/* 모바일: 셀렉트 박스처럼 보이기 */
@media (max-width: 768px) {
  /* 전체적인 overflow 방지 */
  html, body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  body {
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .container {
    width: 100% !important;
    max-width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    padding-top:55px;
  }

  .m_auto {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .sub_visual_wrap {
    margin-bottom: 0;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .container .sub_content {
    width: 100% !important;
    max-width: 100%;
    padding: 0;
    margin: 0;
    box-sizing: border-box;
  }

  .container .sub_content .content {
    flex-direction: column;
    padding: 5px 10px;
    width: calc(100% - 0rem);
    max-width: var(--container-max);
    box-sizing: border-box;
  }

  .container .sub_content .snb {
    flex: none;
    order: 1;
    width: 100%;
    max-width: 100%;
    margin-bottom: 20px;
    box-sizing: border-box;
  }


  /* 모바일 SNB - 가로 분할 레이아웃 */
  @media (max-width: 1024px) {
      .sub_content {
          display: block !important;
          width: 100% !important;
          padding: 0 !important;
          margin: 0 !important;
      }

      .sub_content .snb {
          width: 100% !important;
          margin: 0 !important;
          float: none !important;
          padding: 0 !important;
          box-sizing: border-box;
      }

      .sub_content .snb .snb_group {
          width: 100% !important;
          display: flex;
          flex-wrap: nowrap !important;
          align-items: stretch;
          border: none !important;
          border-radius: 0 !important;
          border-bottom: 1px solid #d4d4d4 !important;
          overflow: hidden;
          transition: all 0.3s ease;
          min-height: 48px;  /* 닫혔을 때만 */
          position: relative;
      }

      /* 열렸을 때 - 높이 자동 */
      .sub_content .snb .snb_group.open {
          min-height: auto;  /* 자동 높이 */
      }

      /* 왼쪽 메인 메뉴 - 25% */
      .sub_content .snb .snb_group h3 {
          width: 25%;
          flex-shrink: 0;
          font-size: 17px;
          padding: 14px 0;  /* 상하 여백 */
          margin: 0;
          text-align: center;
          background: #384978;
          color: #fff;
          letter-spacing: -0.05em;
          display: flex;
          align-items: center;
          justify-content: center;
          word-break: keep-all;
          line-height: 1.4;
          cursor: pointer;
          user-select: none;
          border-right: 1px solid #2d3a5f;
          min-height: 48px;
      }

      /* 오른쪽 영역 - 현재 메뉴 표시 */
      .sub_content .snb .snb_group .current-menu-display {
          width: 75%;
          flex-shrink: 0;
          background: #fff;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          cursor: pointer;
          transition: all 0.3s ease;
          min-height: 48px;
          position: relative;
      }

      .sub_content .snb .snb_group .current-menu-display .current-text {
          font-size: 16px;
          color: #333;
      }

      .sub_content .snb .snb_group .current-menu-display .arrow-icon {
          font-size: 14px;
          color: #999;
      }

      /* 열렸을 때 현재 메뉴 표시 숨김 */
      .sub_content .snb .snb_group.open .current-menu-display {
          display: none;
      }

      /* 세부 메뉴 - 닫혔을 때 숨김 */
      .sub_content .snb .snb_group ul {
          width: 75% !important;
          flex-shrink: 0;
          display: none !important;
          flex-direction: column;
          border: none !important;
          background: #fff;
          padding: 0;
          margin: 0;
          /* min-height 제거 - 자동 높이 */
      }

      /* 열렸을 때 세부 메뉴 표시 */
      .sub_content .snb .snb_group.open ul {
          display: flex !important;
      }

      .sub_content .snb .snb_group ul li {
          border-bottom: 1px solid #e5e5e5;
          display: block;
          flex-shrink: 0;  /* 높이 유지 */
      }

      .sub_content .snb .snb_group ul li:last-child {
          border-bottom: none;
      }

      .sub_content .snb .snb_group ul li a {
          height: 50px;
          line-height: 50px;
          font-size: 15px;
          padding-left: 20px;
          border: none !important;
          background: #fff;
          color: #333;
          display: block;
          transition: all 0.2s;
          white-space: nowrap;
      }

      .sub_content .snb .snb_group ul li a span.sub_txt {
          background: none !important;
          width: auto;
          display: inline;
      }

      /* 선택된 메뉴 */
      .sub_content .snb .snb_group ul li.on a {
          background: #f5f5f5 !important;
          color: #384978 !important;
          font-weight: 600;
          border: none !important;
          border-left: 4px solid #384978 !important;
          padding-left: 16px;
          position: relative;
      }

      .sub_content .snb .snb_group ul li.on a::after {
          content: '\25B6';
          position: absolute;
          right: 20px;
          color: #384978;
          font-size: 12px;
      }

      .sub_content .snb .snb_group ul li a:hover {
          background: #f5f5f5 !important;
          color: #384978 !important;
      }

      /* inside, teltime_info 숨김 */
      .sub_content .snb .inside,
      .sub_content .snb .teltime_info {
          display: none !important;
      }

      /* 컨텐츠 영역 */
      .sub_content .content {
          width: 100% !important;
          float: none !important;
          padding: 20px 15px;
          margin: 0;
          box-sizing: border-box;
      }
  }

  @media (max-width: 768px) {
      .sub_content .snb {
          padding: 0 !important;
          margin: 0 !important;
      }

      .sub_content .snb .snb_group h3 {
          font-size: 16px;
          padding: 12px 0;
      }

      .sub_content .snb .snb_group .current-menu-display {
          padding: 0 15px;
      }

      .sub_content .snb .snb_group .current-menu-display .current-text {
          font-size: 15px;
      }

      .sub_content .snb .snb_group .current-menu-display .arrow-icon {
          font-size: 13px;
      }

      .sub_content .snb .snb_group ul li a {
          height: 48px;
          line-height: 48px;
          font-size: 14px;
          padding-left: 15px;
      }

      .sub_content .snb .snb_group ul li.on a {
          padding-left: 11px;
      }

      .sub_content .content {
          padding: 15px 10px;
      }
  }

  @media (max-width: 480px) {
      .sub_content .snb {
          padding: 0 !important;
          margin: 0 !important;
      }

      .sub_content .snb .snb_group h3 {
          width: 30%;
          font-size: 15px;
          padding: 12px 0;
      }

      .sub_content .snb .snb_group .current-menu-display {
          width: 70%;
          padding: 0 12px;
      }

      .sub_content .snb .snb_group .current-menu-display .current-text {
          font-size: 14px;
      }

      .sub_content .snb .snb_group .current-menu-display .arrow-icon {
          font-size: 12px;
      }

      .sub_content .snb .snb_group.open ul {
          width: 70% !important;
      }

      .sub_content .snb .snb_group ul li a {
          height: 45px;
          line-height: 45px;
          font-size: 13px;
          padding-left: 12px;
      }

      .sub_content .snb .snb_group ul li.on a {
          padding-left: 8px;
      }

      .sub_content .snb .snb_group ul li.on a::after {
          right: 12px;
          font-size: 11px;
      }

      .sub_content .content {
          padding: 10px;
      }
  }


  .feat_box {width:81% !important;}
  .feat_img {
    background: #f6f6f6;
    width: 100%;
    max-width:500px;
  }
  .feat_img img {width: 100%;
    height: auto;
    display: block;}

}


/*sub page*/
/* CSS */


        /* 태블릿 */
        @media (max-width: 968px) {

            .featurecontent {
            }

            .feat_tit {
                font-size: 28px;
            }

            .share li:last-child {
                font-size: 15px;
            }

        }

        /* 모바일 */
        @media (max-width: 768px) {
            .featureset {
                display: inline-block;
            }

            .feature {
                margin-bottom: 0;
            }

            /* 모바일에서는 모두 세로 정렬 (이미지 위, 텍스트 아래) */
            .feature:nth-child(odd) .featurecontent,
            .feature:nth-child(even) .featurecontent {
                flex-direction: column;
                gap: 10px;
            }

            .feat_tit {
                font-size: 24px;
            }

            .share li:last-child {
                font-size: 14px;
            }


        }

        /* 작은 모바일 */
        @media (max-width: 480px) {
            .feat_tit {
                font-size: 22px;
            }

            .share li:first-child {
                font-size: 12px;
            }
        }


        /* 태블릿 가로 (1024px 이하) */
        @media (max-width: 1024px) {
            .lesson-section {
                padding: 70px 20px;
            }

            .lesson-container {
                max-width: 900px;
                gap: 25px;
            }

            .lesson-card {
                max-width: 320px;
                padding: 40px 25px 25px;
            }

            .card-number {
                width: 65px;
                height: 65px;
                font-size: 30px;
                top: -32px;
            }

            .card-title {
                font-size: 24px;
            }

            .card-text {
                font-size: 15px;
                min-height: 70px;
            }

            .curriculum-title h2 {
                font-size: 32px;
            }
        }

        /* 태블릿 세로 (768px 이하) */
        @media (max-width: 768px) {
            .lesson-section {
                padding: 60px 15px;
                min-height: auto;
            }

            .lesson-container {
                flex-direction: column;
                gap: 60px;
                max-width: 500px;
                padding: 0;
            }

            .lesson-card {
                max-width: 100%;
                width: 100%;
                padding: 45px 30px 30px;
            }

            .card-number {
                width: 70px;
                height: 70px;
                font-size: 32px;
                top: -35px;
            }

            .card-title {
                font-size: 24px;
            }

            .card-text {
                font-size: 15px;
                min-height: auto;
                margin-bottom: 25px;
            }

            .card-icon {
                font-size: 65px;
            }

            .curriculum-title {
                margin-bottom: 50px;
            }

            .curriculum-title h2 {
                font-size: 28px;
            }

            .curriculum-title .subtitle {
                font-size: 16px;
            }
            span.span {
              display: block !important
            }
        }

        /* 모바일 (480px 이하) */
        @media (max-width: 480px) {
            .lesson-section {
                padding: 40px 10px;
                margin-bottom: 30px;
            }

            .lesson-container {
                gap: 50px;
                max-width: 100%;
            }

            .lesson-card {
                padding: 40px 20px 25px;
                border-radius: 12px;
            }

            .card-number {
                width: 60px;
                height: 60px;
                font-size: 28px;
                top: -30px;
            }

            .card-title {
                font-size: 22px;
                margin-bottom: 12px;
            }

            .title-underline {
                width: 50px;
                height: 3px;
                margin-bottom: 20px;
            }

            .card-text {
                font-size: 14px;
                line-height: 1.6;
                margin-bottom: 20px;
            }

            .card-icon {
                font-size: 55px;
            }

            .curriculum-title {
                margin-bottom: 40px;
            }

            .curriculum-title h2 {
                font-size: 24px;
            }

            .curriculum-title .subtitle {
                font-size: 14px;
            }
        }

        /* 아주 작은 모바일 (360px 이하) */
        @media (max-width: 360px) {
            .lesson-section {
                padding: 30px 10px;
            }

            .lesson-container {
                gap: 45px;
            }

            .lesson-card {
                padding: 35px 15px 20px;
            }

            .card-number {
                width: 55px;
                height: 55px;
                font-size: 26px;
                top: -27px;
            }

            .card-title {
                font-size: 20px;
            }

            .title-underline {
                width: 45px;
            }

            .card-text {
                font-size: 13px;
            }

            .card-icon {
                font-size: 50px;
            }

            .curriculum-title h2 {
                font-size: 22px;
            }
        }


                /* 태블릿 */
                       @media (max-width: 968px) {
                           .violin-section {
                               min-height: 700px;
                               padding: 60px 0;
                           }

                           .violin-container {
                               gap: 25px;
                               max-width: 800px;
                           }

                           .violin-card {
                               padding: 45px 25px 30px;
                           }

                           .card-title2 {
                               font-size: 22px;
                           }
                       }

                       /* 모바일 */
                       @media (max-width: 768px) {
                           .violin-section {
                               min-height: auto;
                               padding: 50px 0;
                           }

                           .violin-container {
                               grid-template-columns: 1fr;
                               gap: 70px;
                               max-width: 500px;
                           }

                           .violin-card {
                               padding: 40px 25px 30px;
                           }

                           .bg-images {
                               opacity: 0.25;
                           }
                       }

                       /* 작은 모바일 */
                       @media (max-width: 480px) {
                           .violin-section {
                               padding: 40px 0;
                           }

                           .violin-container {
                               padding: 0 15px;
                               gap: 60px;
                           }

                           .violin-card {
                               padding: 35px 20px 25px;
                           }

                           .card-number {
                               width: 50px;
                               height: 50px;
                               font-size: 24px;
                               top: -25px;
                           }

                           .card-title2 {
                               font-size: 20px;
                               margin: 20px 0 8px;
                           }

                           .title-underline {
                               width: 35px;
                               margin: 12px auto 20px;
                           }
                       }


                       /* 태블릿 (1024px 이하) */
                       @media (max-width: 1024px) {
                           .sub_visual_wrap {
                               height: 250px;
                           }

                           .sub_visual_wrap.sub_visual02 {
                               background-position: center center;
                           }

                           .sub_visual_wrap h2 {
                               font-size: 36px;
                           }

                           .sub_visual_wrap p {
                               font-size: 18px;
                           }
                           .s02_con3 li, .s02_con3 li:last-child {
                             padding:0 10px;
                           }
                       }

                       /* 태블릿 세로 (768px 이하) */
                       @media (max-width: 768px) {
                         
                           .sub_visual_wrap {
                               height: 220px;
                           }

                           .sub_visual_wrap.sub_visual02 {
                               background-position: center center;
                               background-size: cover;
                           }

                           .sub_visual_wrap h2 {
                               font-size: 28px;
                               margin-bottom: 10px;
                           }

                           .sub_visual_wrap p {
                               font-size: 16px;
                           }
                       }

                       /* 모바일 (480px 이하) */
                       @media (max-width: 480px) {
                           .sub_visual_wrap {
                               height: 180px;
                           }

                           .sub_visual_wrap.sub_visual02 {
                               background-position: center 30%; /* 피아노 위쪽을 더 보이게 */
                               background-size: cover;
                           }

                           .sub_visual_wrap .visual-text {
                               padding: 0 15px;
                           }

                           .sub_visual_wrap h2 {
                               font-size: 22px;
                               margin-bottom: 8px;
                               line-height: 1.3;
                           }

                           .sub_visual_wrap p {
                               font-size: 14px;
                               line-height: 1.4;
                           }
                       }

                       /* 아주 작은 모바일 (360px 이하) */
                       @media (max-width: 360px) {
                           .sub_visual_wrap {
                               height: 160px;
                           }

                           .sub_visual_wrap h2 {
                               font-size: 20px;
                           }

                           .sub_visual_wrap p {
                               font-size: 13px;
                           }
                       }

                       /* 로고 위치 조정 (모바일 메뉴 토글과 겹치지 않게) */
                       @media (max-width: 1024px) and (orientation: portrait) {
                           h1.logo {
                               position: relative;
                               left: 50%;
                               transform: translateX(-50%);
                               top: 10px;
                               text-align: center;
                           }

                           h1.logo img {
                               max-width: 150px;
                               height: auto;
                           }
                       }

                       @media (max-width: 480px) {
                           h1.logo {
                               left: 50%;
                               transform: translateX(-50%);
                           }

                           h1.logo img {
                               max-width: 130px;
                           }
                       }
                       .sub_visual_wrap.sub_visual01 {
                           background: url(../image/sub/bg_subvisual_01.jpg) no-repeat center center;
                           background-size: cover;
                       }

                       /* 서브 비주얼 02 (교육과정) */
                       .sub_visual_wrap.sub_visual02 {
                           background: url(../image/sub/bg_subvisual_02.jpg) no-repeat center center;
                           background-size: cover;
                       }

                       /* 서브 비주얼 03 */
                       .sub_visual_wrap.sub_visual03 {
                           background: url(../image/sub/bg_subvisual_03.jpg) no-repeat center center;
                           background-size: cover;
                       }

                       /* 모바일에서 각 페이지별 이미지 위치 조정 */
                       @media (max-width: 480px) {
                           .sub_visual_wrap.sub_visual01 {
                               background-position: center 40%;
                           }

                           .sub_visual_wrap.sub_visual02 {
                               background-position: center 30%; /* 피아노 상단 보이게 */
                           }

                           .sub_visual_wrap.sub_visual03 {
                               background-position: center center;
                           }
                       }