@media screen and (max-width: 1920px){
  .about-list,.more-area,.banner-area {max-width: 100%;}
}

@media screen and (max-width: 1550px) {
  .container {max-width: 100%; padding: 0 20px;}
  .vod-area {max-width: 100%;}
  .contact-area {max-width: 100%;}
  .contact-area .link-box {gap: 20px; padding: 0 20px; box-sizing: border-box;}

  /* header */
  header {top: 20px;}
  header .logo {width: 100px;}
  header nav ul {gap: 30px;}
  header nav ul li a {font-size: 16px;}

  /* .visual */
  .visual {padding: 100px 0 90px;}
  .sec1 {padding: 50px 0 100px}
  .sec1_txt {margin-bottom: 40px; font-size: 24px; line-height: 1.8;}
  .tit-box .tit {font-size: 36px;}
  .tit-box {margin-bottom: 50px;}
  .about-list ul li .child-box .txt-box {left: 20px;}
  .about-list ul li .child-box .txt-box .tit {margin-bottom: 20px; font-size: 24px;}
  .about-list ul li .child-box .txt-box .sub {font-size: 20px;}
  .more-btn {width: calc(100% - 630px); height: 150px; padding: 0 100px 0 50px; font-size: 30px;}
  .more-btn img {width: 130px;}
  .sec2 {padding-bottom: 124px;}
  section {padding: 100px 0 150px;}
  .tab-btn {gap: 23.6px 0; margin: 84px -10px 0;}
  .tab-btn li button {height: 80px; font-size: 16px;}
  .tab-btn li {padding: 0 10px;}
  .contact-area .link-box a {height: 60px; font-size: 16px;}
  footer {margin-top: 100px;}


  .kv-txt {margin-top: 40px; font-size: 25px; margin-bottom: 0;}
  .kv-txt:after {height: 140px;}
  .tag-btn .tag {font-size: 100px;}
  .tag-btn .btn-more {flex-flow: row; height: 80px; padding: 0 20px; font-size: 24px; white-space: nowrap;}
  .tag-btn .btn-more br {display: none;}
  .tag-btn .btn-more img {width: 100px;}
  .tag-btn .txt {font-size: 25px;}

  .banner-area {display: flex; align-items: center; justify-content: center; height: 100vh; margin: 20px 0 50px;}
  .banner-area .banner-img {width: calc(100% - 600px);}
  .moon_festa {margin-top: 100px;}
  .moon_festa .tit-img {margin-bottom: 180px;}
  .moon_festa .mf-content .tit {margin-bottom: 40px; font-size: 30px;}
  .moon_festa .mf-content ul li a {font-size: 30px;}
  .moon_festa .mf-content ul {gap: 40px;}
  .moon_festa .mf-content {margin-bottom: 140px;}
  .explan-area > .tit {margin-bottom: 30px; font-size: 35px;}
  .explan-area > .txt {margin-bottom: 50px; font-size: 20px;}
  .explan-img img {width: auto; height: 20vw;}
  .explan-img {margin-bottom: 100px;}
  .music_talk_recreation .top ul {gap: 50px;}
  .music_talk_recreation .top ul li {width: 300px; height: 80px; font-size: 20px;}
  .music_talk_recreation .top ul li:before {width: 80px; height: 80px; right: -65px;}
  .music_talk_recreation .top {margin-bottom: 50px;}
  .music_talk_recreation .bottom ul li .child-box .tit {width: 300px; height: 80px; font-size: 20px;}
  .music_talk_recreation .bottom ul {gap: 40px;}
  .music_talk_recreation {max-width: 100%;}

  .steps-list ul {gap: 30px;}
  .steps-list ul li {width: calc(100% - 100px);}
  .steps-list ul li .child-box .txt-box .txt {font-size: 20px;}
  .steps-list ul li .child-box .icon {width: 75px;}
  .steps-list ul li .child-box .txt-box {padding: 20px 30px 20px 20px;}
  .steps-list ul li .child-box .tit {padding-left: 20px; font-size: 26px;}
  .steps-list ul li .child-box .txt-box:before {right: -50px; width: 100px; height: 100px; font-size: 24px; text-indent: -40px;}
  .swiper-arrow {width: 350px; height: 55px; padding: 0 20px; margin: 40px auto 0;}
  .swiper-arrow button {padding-bottom: 0;}
  .swiper-arrow button img {width: 100px;}
  .swiper-arrow .swiper-pagination1 div {padding-bottom: 7px; font-size: 24px;}
  
  .music_talk_recreation .bottom ul li .child-box .txt {font-size: 18px;}

  .table-area table th {font-size: 25px;}
  .table-area table td {font-size: 25px;}
  .table-area table th, td {height: 100px;}

  .content_scription ul {gap: 50px;}
  .content_scription .tit {width: 250px; height: 35px; margin-bottom: 10px; font-size: 20px;}
  .content_scription ul li .child-box .txt-box .txt {font-size: 16px;}
  .content_scription ul li .child-box .txt-box {margin-bottom: 20px;}
  .table-area {margin-top: 50px; margin-bottom: 100px;}
  .table-area2 table td[colspan="3"] {font-size: 25px;}
  .contact-link {width: 900px; height: 120px; padding: 0 50px; font-size: 30px;}
  .contact-link img {width: 135px;}

  .explan-area2 {margin-top: 124px;}

  .contact_list ul li {font-size: 30px;}
  .contact_list ul li a[href="tel:01090043005"] {font-size: 20px;}
  .contact_list ul li a[href="tel:01091020070"] {font-size: 20px;}
  .contact-btn a {height: 75px; font-size: 28px;}

  .form-btn a {width: 500px; height: 70px; font-size: 24px;}
  .form-area .input-box .tit {font-size: 30px;}
  .form-area .input-box input[type="text"], .form-area .input-box input[type="email"] {height: 50px; font-size: 30px;}
  .form-area form {gap: 50px; margin: 50px 0;}
  .form-area .input-box .ckd-box label:nth-of-type(odd):before {margin-left: 0;}
  .form-area .input-box .ckd-box label:before {width: 30px; height: 30px;}
  .form-area .input-box .ckd-box label {gap: 15px; font-size: 30px;}
  .form-btn button {width: 500px; height: 70px; font-size: 24px;}
  
  .top-btn {top: auto; bottom: 20px; right: 20px;}
  .top-btn a {width: 40px;}
}

@media screen and (max-width: 1130px) {
  .sec1_txt {font-size: 18px;}
  .tab-btn li button {font-size: 14px;}
  .tab-btn li button img {width: 80px;}
  .more-btn {padding: 0 50px 0 20px; font-size: 20px;}
  .more-btn img {width: 80px;}
}

@media screen and (max-width: 900px) {
  .sec-img ul li .child-box:before {top: -50px; width: 100px; height: 100px;}
  .sec-img ul li .child-box:after {height: 5px;}
  .sec-img ul {gap: 20px;}

  .about-list ul li .child-box .txt-box {top: 20px;}
  .about-list ul li .child-box .txt-box .tit {font-size: 16px;}
  .about-list ul li .child-box .txt-box .sub {font-size: 14px;}

  .more-btn {width: calc(100% - 100px); height: 90px;}
  .more-area .more-btn:before {left: -20px; width: 40px; height: 40px;}
  .more-area .more-btn:after {width: 3px;}
  .more-area.pr .more-btn:before {left: -20px; width: 40px; height: 40px;}
  .more-area.pr .more-btn:after {width: 3px;}
  section {padding: 50px 0;}
  .tit-box .tit {font-size: 30px;}

  .sec2 .more-area {margin: 180px auto 0;}
  .tab-btn {gap: 10px 0; margin: 40px -10px 0;}
  .tab-btn li button {height: 60px; padding: 0 20px;}

  footer {margin-top: 50px; padding: 50px 0 80px;}
  footer ul li {padding-right: 0;}
  footer ul {flex-flow: column; align-items: flex-start; justify-content: flex-start; gap: 50px;}
  footer ul li .tit {margin-bottom: 20px; font-size: 16px;}
  footer ul li .address {margin-bottom: 25px; font-size: 14px;}
  footer ul li .link-box a {font-size: 14px;}
  footer ul li .copyright {margin-top: 20px;}

  .slide-area {height: 350px;}
  .steps-list ul li .child-box .tit {font-size: 18px;}
  .steps-list ul li .child-box .txt-box .txt {font-size: 14px;}
  .steps-list ul li .child-box .icon {width: 50px;}
  .steps-list ul li .child-box .txt-box:before {width: 70px; height: 70px; font-size: 16px; text-indent: -25px; right: -25px;}
  .swiper-arrow {width: 250px; height: 45px; margin: 0 auto;}
  .swiper-arrow button img {width: 50px;}
  .swiper-arrow .swiper-pagination1 div {padding-bottom: 15px; font-size: 16px;}

  .tag-btn .tag {font-size: 50px;}
  .tag-btn .btn-more {height: 40px; font-size: 16px;}
  .tag-btn .btn-more img {width: 50px;}
  .tag-btn .txt {font-size: 16px;}

  .banner-area {height: 50vh;}
  .banner-area .banner-img {width: 50%;}
  .moon_festa {margin-top: 50px;}
  .moon_festa .tit-img {margin-bottom: 50px;}

  .moon_festa .mf-content .tit {font-size: 20px; margin-bottom: 20px;;}
  .moon_festa .mf-content ul li a {font-size: 20px;}
  .moon_festa .mf-content ul {gap: 20px;}

  .explan-area > .tit {margin-bottom: 20px; font-size: 25px;}
  .explan-area > .txt {margin-bottom: 25px; font-size: 16px;}
  .explan-img {margin-bottom: 50px;}
  .music_talk_recreation .top ul {flex-flow: column;}
  .music_talk_recreation .top ul li {width: 100%; height: 50px; font-size: 16px;}
  .music_talk_recreation .top ul li:before {right: auto; top: 40px; left: 50%; transform: translateX(-50%); width: 70px; height: 70px;}
  .music_talk_recreation .bottom ul li .child-box {flex-flow: column;}
  .music_talk_recreation .bottom ul li .child-box .border {width: 1px; height: 30px; margin: 0 auto;}
  .music_talk_recreation .bottom ul li .child-box .tit {width: 100%; height: 50px; font-size: 16px;}
  .music_talk_recreation .bottom ul li .child-box .txt {font-size: 14px;}

  .table-area table th, td {height: 50px;}
  .table-area table th,.table-area2 table td[colspan="3"] {font-size: 16px;}
  .table-area table td {font-size: 14px;}
  .table-area {margin-bottom: 50px;}
  .explan-area > .tit {font-size: 22px;}
  .explan-area > .txt {font-size: 14px;}
  .content_scription .tit {width: 150px; height: 30px; font-size: 16px;}
  .content_scription ul li .child-box .txt-box .txt {font-size: 14px;}

  .contact-link {width: 100%; height: 50px; padding: 0 20px; font-size: 18px;}
  .contact-link img {width: 70px;}

  .explan-area2 {margin-top: 70px;}

  .contact_list ul {flex-flow: column;}
  .contact_list ul li {font-size: 26px;}
  .contact_list ul li a[href="tel:01090043005"] {font-size: 18px;}
  .contact_list ul li a[href="tel:01091020070"] {font-size: 18px;}
  .contact-btn {gap: 20px; margin-top: 50px;}
  .contact-btn a {height: 50px; font-size: 18px;}

  .tit-box {margin-bottom: 25px;}
  .form-btn a,.form-btn button {width: 300px; height: 50px; font-size: 18px;}

  .form-area .input-box .tit {font-size: 20px;}
  .form-area .input-box input[type="text"], .form-area .input-box input[type="email"] {height: 40px; font-size: 18px;}
  .form-area .input-box .ckd-box {gap: 20px 0; margin-top: 20px;}
  .form-area .input-box .ckd-box label:before {width: 20px; height: 20px;}
  .form-area .input-box .ckd-box label {gap: 5px; font-size: 24px;}

  .content_scription ul li .child-box .img-box .time {top: 5px; right: 5px; font-size: 14px;}
}

@media screen and (max-width: 600px) {
  /* header .container */
  header .container {flex-flow: column;}
  header nav ul {gap: 10px;}
  header nav ul li a {font-size: 14px;}

  .visual {padding: 150px 0 90px;}
  .sec1_txt {font-size: 14px;}
  .sec1_txt br {display: none;}
  .sec-img ul {flex-flow: column;}
  .sec-img ul li {width: 100%;}
  .sec-img ul li:nth-child(even) .child-box,.sec-img ul li:nth-child(3) .child-box {top: 0 !important;}
  .sec-img {padding: 50px 0 0;}
  .about-list ul {padding: 0 20px; box-sizing: border-box;}
  .about-list ul li {width: 100%;}
  .about-list ul li:nth-child(even) .child-box {top: 0 !important;}
  .sec2 .more-area {margin-top: 50px;}
  .tab-btn li {width: 100%;}
  .more-area {margin-top: 50px;}
  .contact-img {margin-bottom: 30px;}
  .contact-area .link-box {flex-flow: column; gap: 5px;}
  .contact-area .link-box a {height: 40px; font-size: 14px;}

  .steps-list ul li {width: calc(100% - 50px);}
  .slide-area {height: 250px;}
  
  .table-area2 {overflow: hidden; overflow-x: scroll;}
  .table-area2 table {width: 560px;}
  .table-area table thead th:first-child {position: sticky; left: 0; z-index: 1;}
  .table-area table tbody th {position: sticky; left: 0; z-index: 1;}

  .contact_list ul li {font-size: 20px;}
  .contact_list ul li a[href="tel:01090043005"] {font-size: 16px;}
  .contact_list ul li a[href="tel:01091020070"] {font-size: 16px;}
  .contact-btn a {height: 40px; font-size: 16px;}
  .contact-btn {gap: 10px;}

  .form-btn a, .form-btn button {height: 45px; font-size: 16px;}
  .form-area .input-box .tit {font-size: 16px;}
  .form-area .input-box input[type="text"], .form-area .input-box input[type="email"] {font-size: 14px;}
  .form-area form {gap: 30px;}
  .form-area .input-box .ckd-box label:before {width: 10px; height: 10px;}
  .form-area .input-box .ckd-box label {gap: 5px; font-size: 16px;}
  .form-area .input-box .ckd-box {gap: 5px 0; margin-top: 10px;}

  .sec {position: relative;}
  .vod-area iframe {height: 56.25vw;}
}

@media screen and (max-width: 599px) {
  .slide-area {height: auto;}
  .slide-area .swiper-wrapper .swiper-slide.swiper-slide-active img {transform: scale(1);}
  .slide-area .swiper-wrapper .swiper-slide {height: 100%;}
  .swiper-arrow {height: 35px; margin-top: 20px;;}

  .steps-list ul li {width: 100%;}
  .steps-list ul li .child-box .txt-box {flex-flow: column-reverse; gap: 10px; width: 100%; text-align: center;}
  .steps-list ul li .child-box .txt-box:before {display: none;}

  .explan-img {flex-flow: column;}
  .explan-img img {width: 100%; height: auto;}
}

@media screen and (max-width: 427px) {
  .steps-list ul li .child-box .txt-box .txt {font-size: 12px; word-break: keep-all;}

  .table-area:not(.table-area2) {overflow: hidden; overflow-x: scroll;}
  .table-area:not(.table-area2) table {width: 384px;}
  .table-area table thead th:first-child {position: sticky; left: 0; z-index: 1;}
  .table-area table tbody th {position: sticky; left: 0; z-index: 1;}

  .tag-btn .btn-more {height: 35px; font-size: 12px;}
  .tag-btn .btn-more img {width: 35px;}
  .tag-btn .tag {font-size: 40px;}
}

@media screen and (max-width: 342px) {
  header nav ul li a {font-size: 12px;}
  .kv-txt {font-size: 20px;}

  footer ul li .link-box a,footer ul li .address,footer ul li dl,footer ul li .copyright {font-size: 12px;}

  .explan-area > .txt {word-break: keep-all;}

  .form-btn a, .form-btn button {width: 100%;}
}