/* 1400px 이하: 서서히 크기 축소 시작 */

@media (max-width: 1400px) {

  .main_btn {

    width: 350px;

    padding: 15px 35px;

  }

  .main_btn .t1 {

    font-size: 18px;

    white-space: nowrap;

  }

  .main_btn .t2 {

    font-size: 22px;

    white-space: nowrap;

  }

}



/* 1024px 이하: 태블릿 사이즈 */

@media (max-width: 1024px) {

  .btn_container {

    bottom: 4vw;

  }

  .main_btn {

    width: 320px;

    padding: 13px 30px;

  }

  .main_btn .t1 {

    font-size: 14px;

  }

  .main_btn .t2 {

    font-size: 18px;

  }

  .main_btn .t2 img {

    width: 22px;

    height: 14px;

  }

}



/*  */



/* --- 반응형 구간 (1400px 이하) --- */

@media (max-width: 1400px) {

  .button_container {

    gap: 3vw;

  }

  .img_hover_btn {

    width: 32vw; /* 화면 너비에 따라 버튼 크기 축소 */

  }

  .bubble_img {

    width: 28vw; /* 말풍선도 함께 축소 */

  }

}



@media (min-width: 768px) {

  .pc_version {

    display: block;

  } /* PC 섹션 숨김 */

  .mo_version {

    display: none;

  }

}



/* --- 모바일 구간 (768px 이하) --- */

@media (max-width: 768px) {

  .section_video {

    background-color: #fff;

  }

  p.t3 {

    font-size: 16px;

    color: #799aa3;

    margin-bottom: 12px;

  }

  .section_title {

    font-size: 24px;

    margin-bottom: 32px;

  }

  .button_container {

    flex-direction: column; /* 모바일에서는 세로로 배치 */

    align-items: center;

    gap: 0px;

  }

  .img_hover_btn {

    width: 85vw; /* 모바일에서 가로 꽉 차게 */

  }

  .bubble_img {

    width: 70vw;

  }



  .pc_version {

    display: none;

  } /* PC 섹션 숨김 */

  .mo_version {

    display: block;

  } /* 모바일 섹션 표시 */

  .main_btn {

    padding: 0;

    width: 250px;

    height: 73px;

    align-content: center;

  }

  .main_btn .t1 {

    font-size: 12px;

    margin-bottom: 2px;

  }

  .main_btn .t2 {

    font-size: 21px;

  }

  .main_btn .t2 img {

    width: 18px;

    height: 12px;

  }

  .btn_container {

    bottom: unset;

    top: 85vw;

  }

  .img_hover_btn .btn_on {

    display: none;

  }

  .img_hover_btn:hover .btn_default {

    opacity: 1;

  }

  .sec6,

  .sec7 {

    padding: 0;

  }

  .sec11 {

    aspect-ratio: unset;

    background-image: url(./images/section11_3_mo.png);

    margin-bottom: 0;

  }

  .sec11-right.pc_version {

    display: none;

  }

  .sec11-flex {

    padding: 60px 4% 0 4%;

    flex-direction: column;

  }

  .sec11-btnwrapper {

    flex-direction: column;

    width: 54%;

    margin: 38px auto 60px auto;

    gap: 10px;

  }

  .sec11-btnwrapper .sec11-btnwrapper-left,

  .sec11-btnwrapper .sec11-btnwrapper-right {

    width: 100%;

  }

  .sec11-btnwrapper .sec11-btnwrapper-left img,

  .sec11-btnwrapper .sec11-btnwrapper-right img {

    width: 100%;

  }



  .sec11-left {

    width: 100%;

  }

  section {

    margin-bottom: 32px;

  }

  .sec1,

  .sec2,

  .sec3,

  .sec4,

  .sec5,

  .sec6,

  .sec7 {

    margin-bottom: 32px;

  }

  .section_button_wrap {

    margin-bottom: 0;

  }

  .review_section {

    margin-top: 0;

    margin-bottom: 0;

  }

  .review_header {

    padding: 40px;

    margin-bottom: 0;

  }

  .review_container {

    padding-left: 40px;

  }

  .nav_btn {

    width: 16px;

    height: 16px;

  }

  .review_wrapper {

    padding-bottom: 30px;

  }

  .review_title {

    font-size: 16px;

  }

  .review_card {

    flex: 0 0 76vw;

    padding: 26px 16px 16px 26px;

  }

  .review_card .content {

    font-size: 14px;

  }

  .review_card .author {

    display: none;

  }

  .main_footer {

    background: #091b1f;

  }

  .footer_info {

    padding: 48px 7%;

  }

  .footer_info p {

    font-size: 14px;

    text-align: center;

  }

  .cs_info {

    margin-top: 14px;

  }

}