.mo_btn {display: none;}

@media screen and (max-width: 1240px){
  header .container {max-width: 100%; padding: 0 20px;}
  header nav {gap: 20px;}
  header nav ul {gap: 20px;}
}

@media screen and (max-width: 1100px) {
  .container {max-width: 100%; padding: 0 20px; box-sizing: border-box;}
  .visual .container {padding: 115px 20px 155px;}
  .banner .container {padding: 69px 20px;}

  header nav {gap: 10px;}
  header nav ul {gap: 10px;}
  header nav ul li a {font-size: 15px;}
}

@media screen and (max-width: 900px) {
  header {position: fixed; height: 65px; z-index: 9999;}
  header.open {background: rgba(0, 0, 0, 0.5);}
  .mo_btn {display: block; width: 30px;}
  header .logo {width: 125px; height: auto;}
  header nav {position: fixed; top: 0; left: -300px; width: 300px; height: 100vh; background: var(--wt); z-index: 9999; transition: all .5s;}
  header nav {
    height: calc(var(--vh, 1vh) * 100);
  }
  header.open nav {left: 0;}
  header nav ul {flex-flow: column; align-items: center; justify-content: center; width: 100%;}
  header nav ul li a {font-size: 17px;}
  header .link_btn {position: fixed; bottom: 20px; right: 20px; flex-flow: column; width: 40px;}
  header .link_btn a {animation: heartbeat 1.5s ease-in-out infinite both; gap: 0; width: 100%; height: auto; aspect-ratio: 1; border-radius: 100%; text-indent: -9999px;}
  @keyframes heartbeat {
  from {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-transform-origin: center center;
            transform-origin: center center;
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  10% {
    -webkit-transform: scale(0.91);
            transform: scale(0.91);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  17% {
    -webkit-transform: scale(0.98);
            transform: scale(0.98);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  33% {
    -webkit-transform: scale(0.87);
            transform: scale(0.87);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  45% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

  .visual {margin-top: 65px;}
  .visual .container {flex-flow: column; align-items: center; gap: 20px; padding: 30px 0; text-align: center;}
  .visual .txt-box .txt_img {width: 200px; margin: 0 auto; margin-bottom: 20px;}
  .visual .txt-box .tit {margin-bottom: 20px; font-size: 34px;}
  .visual .txt-box .txt {font-size: 16px;}
  .visual .img-box {position: relative; right: 0; bottom: -30px;}

  section {padding: 70px 0;}
  .tit-box1 .tit {gap: 20px; font-size: 26px;}

  .sec1_ct .img-box .name {font-size: 18px;}
  .sec1_ct {flex-flow: column; gap: 35px;}
  .sec1_ct .img-box {width: 300px;}
  .sec1_ct .txt-img {width: 100%;}
  .sec1_ct .txt-img .tit {font-size: 26px;}
  .sec1_ct .txt-img .sub {font-size: 18px;}

  .tit-box2 {margin-bottom: 30px;}
  .tit-box2 .tit_img {width: 175px;}
  .tit-box2 .tit {font-size: 28px;}

  .vod_box .iframe-box {max-width: 100%; margin-bottom: 30px;}
  .vod_box .vod_list ul {gap: 10px;}

  .tit-box3 .tit-img {height: 27px; margin-bottom: 5px;}
  .tit-box3 .tit {font-size: 28px;}
  .sec3_ct ul {flex-flow: initial; flex-wrap: wrap; gap: 10px 0; margin: 0 -5px;}
  .sec3_ct ul li {width: calc(100% / 2); padding: 0 5px; box-sizing: border-box;}
  .sec3_ct ul li .child-box {flex-flow: column !important;}
  .sec3_ct ul li .child-box .img-box {width: 100%;}
  .sec3_ct ul li .child-box .txt-box {width: 100%; height: auto; padding: 10px; aspect-ratio: initial; word-break: keep-all;}
  .sec3_ct ul li .child-box .txt-box .num {margin-bottom: 5px; font-size: 14px;}
  .sec3_ct ul li .child-box .txt-box .tit {margin-bottom: 10px; font-size: 16px;}
  .sec3_ct ul li .child-box .txt-box .txt {font-size: 15px;}

  .sec4_ct {max-width: 600px; width: 100%; margin: 0 auto;}
  .sec4_ct ul {flex-wrap: wrap; gap: 30px 0; margin: 0 -10px;}
  .sec4_ct ul li {width: calc(100% / 2); padding: 0 10px; box-sizing: border-box;}
  .sec4_ct ul li .child-box .txt {font-size: 18px;}
  .sec5_ct .slide_area ul .slick-arrow {width: 35px;}
  .sec5_ct .slide_area ul .slick-prev {left: 0;}
  .sec5_ct .slide_area ul .slick-next {right: 0;}
  .description {margin-top: 10px; font-size: 15px;}

  .step_list ul {flex-wrap: wrap; gap: 20px 0; margin: 0 -5px;}
  .step_list ul li {width: calc(100% / 2); padding: 0 5px; box-sizing: border-box;}
  .step_list ul li .child-box .txt-box {height: 110px;}
  .step_list ul li .child-box .txt-box .num {font-size: 16px;}
  .step_list ul li .child-box .txt-box .txt {font-size: 18px;}

  .talk_list {margin-top: 20px;}
  .talk_list .tit img {max-width: 420px;}
  .talk_list .tit {height: 70px; padding: 0 10px; box-sizing: border-box;}
  .talk_list ul {padding: 20px;}
  .talk_list ul li {width: calc(100% / 2);}
  
  .price_list1 ul {flex-wrap: wrap; gap: 20px 0;}
  .price_list1 ul li {width: calc(100% / 2); box-sizing: border-box;}
  .price_list1 ul li .child-box .tit {height: 50px; font-size: 18px;}
  .price_list1 ul li .child-box .img-box {padding: 0;}
  .price_list1 ul li .child-box .price_txt {font-size: 18px; line-height: 2;}
  .price_list1 ul li .child-box .more_btn {width: 100px; height: 40px; font-size: 15px;}
  .price_list1 ul li .child-box {height: auto; padding-bottom: 20px;}

  .price_list2 .sub_tit {font-size: 18px;}
  .price_list2 ul li {width: calc(100% / 2);}
  .price_list2 ul li .child-box .tit {height: 50px; font-size: 18px;}
  .price_list2 ul li .child-box .txt-box {padding-top: 20px;}
  .price_list2 ul li .child-box .txt-box .txt {font-size: 16px;}
  .price_list2 ul li .child-box .txt-box .price {font-size: 18px;}
  .price_list2 ul li .child-box {height: 260px;}

  .banner .container {padding: 30px 20px;}
  .banner .txt-box .tit {font-size: 28px;}
  .banner .txt-box .sub {margin-top: 5px; font-size: 18px;}
  .banner .txt-box .banner_btn {margin-top: 20px;}
  .banner .txt-box .banner_btn a {gap: 5px; width: 190px; font-size: 16px;}
  .banner .txt-box .banner_btn a img {width: 17px;}
  .banner .img-box {position: relative; bottom: -31px; max-width: 380px; margin-top: 20px;}

  .tit-box5 {margin-bottom: 30px;}
  .tit-box5 .tit {font-size: 28px;}
  .tit-box5 .sub {font-size: 18px;}

  .qna_box ul li .child-box .tit {padding: 15px 20px; font-size: 18px;}
  .qna_box ul li .child-box .tit img {width: 13px; right: 20px;}
  .qna_box ul li .child-box .txt {padding: 20px; font-size: 16px;}

  footer {padding: 30px 0; word-break: keep-all;}
  footer .f_logo {width: 130px;}
  footer .container {gap: 20px;}
  footer .address {font-size: 15px;}

  .sec5_ct.slide2sec {margin-top: 50px;}
}

@media screen and (max-width: 440px) {
  .vod_box .vod_list ul {flex-flow: column;}
  /* .step_list ul li {width: calc(100% / 1);} */
  .talk_list ul li {width: calc(100% / 1);}
  .price_list1 ul li {width: calc(100% / 2);}
  .price_list2 ul li {width: calc(100% / 2);}
}

@media screen and (max-width: 380px) {
  .price_list1 ul li .child-box .price_txt {font-size: 16px;}
}

@media screen and (max-width: 320px) {
  header nav {width: 265px;}
}