/* common.css */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }
  
  html, body {
    font-family: 'Noto Sans KR', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: 16px;
    color: #333;
    background: #fff;
    line-height: 1.6;
  }
  
  a {
    color: #333;
    text-decoration: none;
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  .container {
    max-width: 1280px;
    min-height: 600px;
    margin: 0 auto;
    padding: 120px 20px;
    box-sizing: border-box;
  }
  
  /* 제목 */
  h1, h2, h3 {
    margin-bottom: 20px;
    font-weight: 600;
    color: #222;
  }
  ul,li{
    text-decoration: none;
    list-style: none;
  }
  /* 기본 폼 */
  form {
    background: #fff;
    border: 1px solid #ddd;
    padding: 30px;
    border-radius: 8px;
  }
  
  form p {
    margin-bottom: 20px;
  }
  
  input[type="text"],
  input[type="file"],
  textarea {
    width: 100%;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 16px;
    background: #fff;
  }
  
  button {
    background-color: #222;
    color: #fff;
    padding: 12px 24px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 16px;
  }
  
  button:hover {
    background-color: #555;
  }
  
  /* 리스트 테이블 */
  .table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 30px;
  }
  
  .table th,
  .table td {
    border: 1px solid #ddd;
    padding: 12px;
    text-align: left;
  }
  
  .table th {
    background-color: #f0f0f0;
    font-weight: bold;
  }

  .fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
    }
    .fade-in.show {
    opacity: 1;
    transform: translateY(0);
    }

.content_wrap{
    width: 100%;
    height: auto;
    overflow: hidden;
    margin-bottom: 120px;
}
.content_banner{
    width: 100%;
    height: 840px;
    background-color: #f7f7f7;
}
.content_inner_wrap{
    width: 1280px;
    margin: 0 auto;
}

.class_banner{
    width: 100%;
    height: 350px;
    overflow: hidden;
}
.inner_class_banner{
    width: 1280px;
    height: 100%;
    margin: 0 auto;
}
.inner_class_banner_title_box{
    width: 1280px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    animation: fadeIn 0.3s ease-in-out;
    position: relative;
    padding-bottom: 60px;
    box-sizing: border-box;
    bottom: 0;
}
.inner_class_banner_main_title{color: #333; font-weight: 900; font-size: 52px;margin-bottom: 10px;}
.inner_class_banner_main_title span{color: #CC3333; font-size: 26px; font-weight: 400; margin-left: 10px;}
.inner_class_banner_sub_title{color: #848484;}

@keyframes fadeIn {
    from { opacity: 0; bottom: -60px;}
    to { opacity: 1; bottom: 0;}
}
  
.class_wrap{ 
    width: 1280px;
    min-height: 500px;
    margin: 0 auto;
    margin-bottom: 120px;
}

.class_btn_wrap{
    width: 1080px;
    margin: 80px auto;
    display: flex;
    justify-content: space-around;
}
.class_btn{
    color: #d1d1d1;
    cursor: pointer;
    font-size: 18px;
}
.class_btn.pick{color: #333; font-weight: 900;}

.class_list_title_box{
    display: flex;
    align-items: center;
    border-bottom: 1px solid #d1d1d1;
    border-top: 1px solid #d1d1d1;
    height: 50px;
}
.class_list_box{
    height: auto;
    display: flex;
    flex-direction: column;
}
.class_list_content{
    display: flex;
    height: 80px;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #d1d1d1;
    cursor: pointer;
    transition: 0.3s;
}
.inquiries{
    width: 80%;
    box-sizing: border-box;
    padding-left: 20px;
}
.date{width: 12%; text-align: center;}
.sand_btn_box{    
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
}
.sand_btn{
    width: 200px;
    height: 50px;
    background-color: #000;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 10px;
    cursor: pointer;
    border-radius: 5px;
}

.class_list_content:hover{
    background-color: #fbdddd;
}

.quick_wrap{
    width: 1080px;
    height: 140px;
    display: flex;
    background-color: #fff;
    border-radius: 15px;
    margin: 80px auto;
}
.quick_click_btn_box{
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;

}

.quick_click_btn{
    width: 90px;
    height: 90px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    flex-direction: column;
    cursor: pointer;
    box-sizing: border-box;
}
.quick_click_icon{
    width: 60px;
    height: 60px;
    background-size: cover;
    transition: 0.3s;
}
.quick_click_icon_1{background-image: url(/img/index_icon_2.svg);}
.quick_click_icon_2{background-image: url(/img/index_icon_1.svg);}
.quick_click_icon_3{background-image: url(/img/index_icon_3.svg);}
.quick_click_icon_4{background-image: url(/img/index_icon_5.svg);}
.quick_click_icon_5{background-image: url(/img/index_icon_4.svg);}

.quick_click_btn:hover .quick_click_icon_1{background-image: url(/img/index_c_icon_2.svg);}
.quick_click_btn:hover .quick_click_icon_2{background-image: url(/img/index_c_icon_1.svg);}
.quick_click_btn:hover .quick_click_icon_3{background-image: url(/img/index_c_icon_3.svg);}
.quick_click_btn:hover .quick_click_icon_4{background-image: url(/img/index_c_icon_5.svg);}
.quick_click_btn:hover .quick_click_icon_5{background-image: url(/img/index_c_icon_4.svg);}
.quick_click_btn:hover{color: #CC3333;}

.pagination{
    display: flex;
    width: 100%;
    justify-content: center;
    align-items: center;
    height: 40px;
    }

.pagination a{    
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.nocoment{
    text-align: center;
    justify-content: center
}
.class_list_title{
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
    background-color: #f7f7f7;
}
body .mo_header{
    display: none;
}
.mo_br{display: none;}
.mobile-container{display: none;}
.write_btn.pc_write_btn{display: flex;}
.write_btn.mobile_write_btn{display: none;}

.mo_header_menu_wrap{
    display: none;
    position: relative;
}

        /* ---- POINT 섹션 (스코프 최소화) ---- */
        .curriculum_sec_point{
          background-color:#FAF9F7;
      }
.point-sec {
--ymk-accent: #CC3333; /* YMK 톤에 맞춘 포인트 */
--card-bg: #fff;
--card-bd: rgba(0,0,0,.08);
--muted: #6b7280;
flex-direction: column;
align-items: center;
}

.point_title {
font-size: clamp(1.6rem, 2vw, 2rem);
line-height: 1.2;
letter-spacing: -0.02em;
text-align: center;
}
.point_title span{color: #CC3333;}
.point_subtitle {
margin-top: .5rem;
color: var(--muted);
font-size: clamp(.95rem, 1.4vw, 1.05rem);
}

.point_grid {
display: grid;
gap: 16px;
margin-top: 24px;
grid-template-columns: repeat(4, minmax(0,1fr));
}
@media (max-width: 1024px) { .point_grid { grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 560px)  { .point_grid { grid-template-columns: 1fr; } }

.point_item {
background: var(--card-bg);
border: 1px solid var(--card-bd);
border-radius: 16px;
padding: 20px 18px;
transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
will-change: transform;
}
.point_item:hover, .point_item:focus-within {
transform: translateY(-4px);
box-shadow: 0 10px 24px rgba(0,0,0,.06);
border-color: rgba(0,0,0,.12);
}

.point_icon {
width: 36px; height: 36px;
display: inline-grid; place-items: center;
border-radius: 10px;
background: rgba(255,111,97,.12);
margin-bottom: 10px;
}
.point_icon img {
width: 22px; height: 22px;
}

.point_item h3 {
font-size: 1.05rem;
margin: 4px 0 6px;
letter-spacing: -0.01em;
}
.point_item p {
font-size: .95rem;
line-height: 1.6;
color: var(--muted);
}

.point_cta {
margin-top: 20px;
display: flex; gap: 10px; flex-wrap: wrap;
}
.btn {
display: inline-flex; align-items: center; justify-content: center;
padding: 10px 16px; border-radius: 10px;
font-weight: 600; font-size: .95rem; border: 1px solid transparent;
transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
cursor: pointer; width: 200px;
}
.btn:active { transform: translateY(1px); }
.btn-primary:hover { filter: brightness(.96); }
.btn-ghost{ background: var(--ymk-accent); color: #fff; }

.point_note {
margin-top: 10px;
font-size: .85rem;
color: var(--muted);
}

@media screen and (min-width: 768px) and (max-width: 1300px) {
  .mo_header_menu_wrap{display: none;}
  .footer .footer_inner{width: 100%;}
  .curriculum_inner .compare_title{text-align: left; margin-bottom: 30px; align-items: flex-start;}
  .wrap .supplies_banner{width: 100%;}
  .wrap .supplies_item_wrap{width: 100%;}

  .text_list_con.text_list_coment_2,.text_list_con.text_list_title_2{width: 50%;padding: 0 5px;box-sizing: border-box;}
  .text_list_con.text_list_coment_3,.text_list_con.text_list_title_3{width: 23%;}
  .text_list_con.text_list_coment_4,.text_list_con.text_list_title_4{width: 22%;}

  .text_list_content{padding-left: 10px;}
  .mo_br{display: block;}
  .write_btn.pc_write_btn{display: flex;}
.write_btn.mobile_write_btn{display: none;}

.inner_class_banner{width: 100%;}
.inner_class_banner_title_box{width: 100%;padding: 60px;padding-left: 20px;}
.class_banner{
  height: 280px;
}

.curriculum_sec_point {
  padding: 30px 0;
}
    .point_item{    
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .point_item p{
    width: 60%;
    text-align: center;

  }
  .content_wrap .index_1280_frame{
    width: 100%;
  }
  .content_wrap .director_name{font-size: 20px;}
  .content_wrap .director_comment_1,.content_wrap .director_comment_1 span{ font-size: 20px;}
  .content_wrap .curriculum_swiper, .content_wrap .review_swiper{left: 0; padding-left: 20px;}

  .viewer_box{background-repeat: no-repeat;}
  .index_content_wrap{padding-left: 20px;}
  .content_banner .banner_slide .banner_slide_text_box{left: 20px;}
  .content_banner .banner_slide {background-position: -200px;}
  .content_banner .banner_slide_text_line {left: 20px;}
  .content_banner .banner_slide_icon_box{width: 100%;    justify-content: center;position: relative;}
  .content_banner .slide_icon{width: 15%;font-size: 12px; text-align: center;}
  .content_banner .slide_icon img {
    width: 40px;
}

}
@media screen and (max-width: 767px) {
    html, body{overflow-x: hidden;}
    /* 공통 표시 설정 */
    .mo_br { display: block; }
    .mobile-container { display: block; }
    body .pc_header { display: none; }
    body .footer_2 { display: none; }
    body .pc_index { display: none; }
  
    /* 모바일 헤더 */
    body .mo_header {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 10px;
      position: fixed;
      left: 0;
      top: 0;
      z-index: 99;

    }
    .mo_header_menu_wrap{
        display: none;
        position: relative;
    }
  
    .mo_logo {
      width: 100%;
      font-size: 22px;
      font-weight: 900;
      cursor: pointer;
    }
    .mobile_btn {
        width: 32px;
        height: 36px;
        position: relative;
        cursor: pointer;
    }
    
    .mobile_line {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #000;
        transition: all 0.3s ease;
    }
    
    .mobile_line_1 {
        top: 8px;
    }
    
    .mobile_line_2 {
        top: 17px;
    }
    
    .mobile_line_3 {
        top: 26px;
    }
    
    
    .mobile_btn.active .mobile_line_1 {
        transform: rotate(45deg);
        top: 17px;
    }

    .mobile_btn.active .mobile_line_2 {
        opacity: 0;
    }

    .mobile_btn.active .mobile_line_3 {
        transform: rotate(-45deg);
        top: 17px;
    }
    /*
  


    .mo_header_menu_wrap{
        width: 100vw;
        height: 100vh;
        position: fixed;
        transform: translateX(-100%);
        z-index: 999;
        background-color: #fff;
        justify-content: space-between;
        flex-direction: column
    }
    .mo_header_menu_background{
        width: 100%;
        height: 100%;
        color: #fff;
        z-index: 1;
    }
    .mo_header_menu_box{
        width: 100%;
        height: auto;
        background-color: #fff;
        position: relative;
        top: 0;
        right: 0px;
        z-index: 9999;
        display: flex;
        flex-direction: column;
        padding-top: 50px;
        box-sizing: border-box;
    }
    .mo_main_menu{
        width: 100%;
        height: 50px;
        display: flex;
        align-items: center;
        padding-left: 20px;
        box-sizing: border-box;
        cursor: pointer;
    }
    .mo_sub_menu_box {
        display: none;
        background: #f9f9f9;
        height: auto;
    }
    
    .mo_sub_menu {
        padding: 10px 0;
        border-bottom: 1px solid #eee;
        cursor: pointer;
        background-color: #f5f5f5;
        font-size: 12px;
        padding-left: 20px;
    }
    
    .mo_main_menu {
        cursor: pointer;
        border-bottom: 1px solid #ddd;
        background-color: #fff;

        box-sizing: border-box;
        font-size: 14px;
    }
    .mo_main_menu_footer{
        width: 100%;
        height: auto;
        padding: 20px;
        box-sizing: border-box;
        position: absolute;
        bottom: 80px;
    }
    .mo_main_menu_footer h1{font-size: 16px; display: block; width: 100%; word-break: keep-all;}
    .mo_main_menu_footer p{font-size: 14px; display: block; width: 100%; word-break: keep-all;}
   */
    /* 상담 관련 영역 */
    .past_counseling_wrap {
      height: auto;
    }
  
    .past_counseling_box {
      flex-direction: column;
      height: auto;
      gap: 10px;
      padding: 0;
    }
    .past_counseling_open_close.pc_past{display: none;}
    .past_counseling_open_close.mobile_past{
        position: absolute;
        display: flex;
        top: -70px;
        height: 70px;
        width: 100%;
        right: 0;
        border-radius: 10px 10px  0 0;
        background-color: #CC3333;
        color: #fff;
        font-size: 20px;
        font-weight: 700;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 9999;
        box-shadow: none;
        justify-content: space-around;
    }
  
    .past_counseling_wrap .past_counseling_title {
      font-size: 14px;
    }
  
    .past_counseling_wrap .past_counseling_title span {
      font-size: 12px;
    }
  
    .past_counseling_wrap .past_counseling_con {
      padding: 2px 12px;
      font-size: 12px;
    }
  
    .past_counseling_wrap .past_counseling_content_box_left,
    .past_counseling_wrap .past_counseling_content_box_right {
      width: 100%;
    }
  
    .past_counseling_wrap .counseling_text_input {
      height: 35px;
      font-size: 12px;
      width: 80%;
    }
  
    .past_counseling_wrap .past_counseling_checkbox {
      font-size: 13px;
    }
  
    .past_counseling_wrap .past_counseling_post {
      height: 35px;
    }
    .past_counseling_wrap .past_counseling_content_box_right
     .past_counseling_content{
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: space-between;
    }
  
    /* 슬라이드 배너 */
    .content_banner .swiper-slide {
      background-position: center;
    }
  
    .content_banner .swiper-slide .slide_text_box h1 {
      font-size: 26px;
    }
  
    .content_banner .swiper-slide .slide_text_box span {
      font-size: 14px;
    }

    .banner_slide .slide_text_box {
      width: 80%;
      font-size: 14px;
    }
  

    .content_banner .banner_slide_2 .slide_text_box h1 {
      font-size: 32px;
    }
  
    .big_text_box .big_text {
      font-size: 20px;
    }
  
    .content_banner .banner_title {
      font-size: 30px;
    }
  
    .content_banner {
      height: 640px;
      background-position: center;
    }
  
    .content_banner .slide_text_box p{
        width: 80%;
        font-size: 14px;
    }
  
    /* 콘텐츠 영역 */
    .content_inner_wrap {
      width: 100%;
    }
  
    .content_inner_wrap .quick_wrap {
      width: 100%;
      display: none;
    }
  
    .content_wrap .question_answer_wrap {
      width: 100%;
      padding: 5%;
    }
  
    .card_wrap .card_box {
      width: 100%;
      padding: 5%;
      flex-wrap: wrap;
      justify-content: space-between;
      align-content: space-around;
    }
  
    .card_wrap .card {
      width: 45%;
      align-items: center;
      justify-content: flex-start;
    }
  
    .card_wrap .card_icon {
      width: 42px;
      height: 42px;
    }
  
    .card_wrap .card_content h1 {
      font-size: 18px;
    }
  
    .card_wrap .card_content p {
      font-size: 14px;
    }


    /* index_text */

   .content_inner_wrap .q_a_wrap_title{}
   .content_inner_wrap .q_a_wrap_main_title{font-size: 22px;}
   .content_inner_wrap .q_a_wrap_sub_title{font-size: 16px;}

   .content_inner_wrap .card_wrap_title{}
   .content_inner_wrap .card_wrap_main_title{font-size: 22px;}
   .content_inner_wrap .card_wrap_sub_title{font-size: 16px;}
  

   /* director_wrap */
   .content_inner_wrap .director_wrap{
    height: auto;
    flex-direction: column;
}
   .content_inner_wrap .director_img{
    width: 100%;
    height: 300px;
   }
   .content_inner_wrap .director_text{width: 100%;}
   .content_inner_wrap .director_name {font-size: 30px;}
   .content_inner_wrap .director_name span{font-size: 20px;}
   .content_inner_wrap .director_comment{text-align: left;}
   .content_inner_wrap .director_comment_1{font-size: 20px;}
   .content_inner_wrap .director_comment_2 {font-size: 20px;}

   .content_inner_wrap .director_wrap_1 .director_comment_2, 
   .content_inner_wrap .director_wrap_1 .director_comment_1 {
        width: 100%;
        text-align: left;
    }
    .director_comment_box{
        margin-top: 30px;
    }

    .content_inner_wrap .brand_name{font-size: 20px;}
    .content_inner_wrap .brand_main_keyword{font-size: 26px;}
    .content_inner_wrap .brand_main_keyword_en{font-size: 16px;}
    .content_inner_wrap .count_banner_sub_title{font-size: 14px;}

    .content_inner_wrap .count_title{font-size: 16px;}
    .content_inner_wrap .count{font-size: 14px;}
    .content_inner_wrap .count_num{font-size: 14px;}

    .content_inner_wrap .review_wrap_title{}
    .content_inner_wrap .review_wrap_main_title{font-size: 20px;}
    .content_inner_wrap .review_wrap_sub_title{font-size: 16px;}


    

    /* count_banner */

    .content_inner_wrap .count_banner{width: 100%; min-height: 420px; padding: 30px 0;}

   .content_inner_wrap .director_wrap_2 {display: none;}

   .content_wrap .curriculum_wrap {
        width: 90%;
        margin: 0 auto;
    }
    .curriculum_wrap .curriculum_main_title{font-size: 24px;}
    .curriculum_wrap .curriculum_main_title span{font-size: 18px;}
    .curriculum_wrap .curriculum_sub_title{
        font-size: 16px;
        word-break: keep-all;
    }


    .youme_place_box_wrap .youme_place {width: 33.333%;}
    .youme_place_wrap .youme_place_btn_box{display: none;}

    .youme_place_wrap .youme_place_title h1{font-size: 20px;}
    .youme_place_wrap .youme_place_title span{font-size: 14px;}
    .youme_place_wrap {width: 90%; margin: 30px auto;}
    .youme_place_wrap .youme_place_box_wrap{height: auto;}
    .content_wrap .curriculum_content{height: 550px;}
    .content_wrap .curriculum_wrap{
        height: fit-content;
    }

    /* 푸터 */
    .footer .footer_inner {
      width: 100%;
      padding: 30px;
    }
    .footer .footer_1 {
      flex-direction: column;
      height: auto;
    }
    .footer .footer_right {
        width: 75%;
      display: flex;
      flex-direction: column;
      margin-top: 20px;
      gap: 10px;
      margin: 0 auto;
      margin-top: 50px;
    }
    .footer .footer_left {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        word-break: keep-all;
    }
    .footer .footer_2 {
      width: 100%;
      flex-direction: column;
      align-items: center;
      text-align: center;
    }
    .footer .footer_left h1 {
        font-size: 22px;
    }
    .footer .footer_3 {
        height: auto;
    }


    .inner_class_banner{width: 100%;}
    .class_banner{height: 200px;}
    .inner_class_banner_title_box{width: 100%;}
    .inner_class_banner_main_title{font-size: 30px;}
    .inner_class_banner_main_title span{font-size: 22px;}
    .inner_class_banner_sub_title{font-size: 15px; word-break: keep-all;}
    .inner_class_banner_title_box{padding: 20px;box-sizing: border-box;}
    .board_btn_nav{flex-direction: column; gap: 10px;}
    .container{padding: 20px;}
    .text_list_con{font-size: 12px;}
    .text_list_con.text_list_coment_1,.text_list_con.text_list_title_1{display: none;}
    .text_list_con.text_list_coment_2,.text_list_con.text_list_title_2{width: 50%;padding: 0 5px;box-sizing: border-box;}
    .text_list_con.text_list_coment_3,.text_list_con.text_list_title_3{width: 23%;}
    .text_list_con.text_list_coment_4,.text_list_con.text_list_title_4{width: 22%;}
    .text_list_content{padding: 1px;height: auto;max-height: 80px;word-break: keep-all;}
    .write_btn.pc_write_btn{display: none;}
    .write_btn.mobile_write_btn{display: flex;}

    .board_btn_nav_box .board_btn{font-size: 14px;}
    .board_btn_nav .search_check{width: 100%;justify-content: flex-end;}

    .media-text h3{font-size: 16px;}
    .media-text p{font-size: 13px;}

    .media-text{max-width: 65%;}

    body .ingredient_banner{height: 400px;}
    .ingredient_banner .main_title{font-size: 30px;}
    .ingredient_banner .main_title span{font-size: 22px;}
    .ingredient_banner .subtitle{font-size: 15px; word-break: keep-all;}
    .wrap .ingredient_about{width: 100%; flex-direction: column; gap: 20px;}
    .ingredient_about .text_box {width: 100%;text-align: center;}
    .ingredient_about .text_box h3{font-size: 22px;}
    .ingredient_about .text_box p{font-size: 14px;}

    .wrap .supplies_item_wrap{height: auto;}

    .supplies_item_wrap .supplies_item_box{    grid-template-columns: repeat(1, 1fr);}
    .search_check .search_btn{padding: 0 10px;}





    .curriculum_sec_point {
    padding: 30px 0;
    }
    .point_item{    
    display: flex;
    flex-direction: column;
    align-items: center;
    }
    .point_item p{
    width: 80%;
    text-align: center;

    }
    .curriculum_sec_point .curriculum_inner {
      width: 100%;
      flex-direction: column;
      padding: 30px;
      word-break: keep-all;
      text-align: center;
  }

  .past_btn{display: none;}
    }