@charset "UTF-8";
/*-------------------------------------------------
title       : 메인 반응형
Author      : ㅈㅁㅈ
Create date : 2020-08-04
-------------------------------------------------*/
@media (max-width: 1024px) { #visual > .desc { top: 8rem; }
  #visual .img { height: 55rem; }
  #visual .link a { padding: 3rem; }
  #visual .link i { width: 8rem; }
  #visual .link span { white-space: nowrap; }
  .section2 { padding-left: calc(50% - 5rem); }
  .section2 .title { height: auto; margin-bottom: 2rem; padding-left: 10rem; line-height: 1.2; }
  .section2 .title span { left: 0; top: -2rem; width: 8rem; }
  .section2 .title h2 { margin-bottom: 1rem; }
  .section2 .img { position: absolute; top: 50%; left: auto; transform: translateY(-50%); left: -10rem; width: 50%; }
  .section2 .list span { padding-right: 3rem; line-height: 1.2; }
  .section3 { position: relative; z-index: 0; }
  .section3 .group1 { width: 50%; border-radius: 9rem 0 0 0; }
  .section3 .group2 { clear: both; float: none; width: 100%; }
  .section3 .group3 { position: absolute; right: 0; top: 0; width: 50%; border-radius: 0 9rem 0 0; } }

@media (max-width: 580px) { #visual { padding-bottom: 3rem; }
  #visual > .desc { font-size: 1.6rem; top: 4rem; }
  #visual > .desc strong img { width: 25rem; }
  #visual > .desc span { width: 20rem; }
  #visual .img { height: 33rem; margin-bottom: -3.5rem; }
  #visual .img .img1 { left: -4rem; }
  #visual .img .img2 { right: -4.5rem; }
  #visual .link { margin-bottom: 2rem; border-radius: 2rem; }
  #visual .link > li { display: block; }
  #visual .link a { height: auto; padding: 2rem 7rem 2rem 10rem; }
  #visual .link i { position: absolute; top: 50%; left: auto; transform: translateY(-50%); left: 2rem; bottom: auto; width: 6rem; }
  #visual .link span { display: none; }
  #visual .link strong { font-size: 2rem; margin-top: 0; }
  #visual .link strong::after { position: absolute; top: 50%; right: 3rem; margin: -1.75rem 0 0; }
  .notice { padding: 2rem; }
  .notice h2 { font-size: 2rem; left: auto; top: 2rem; z-index: 1; padding-bottom: 0.5rem; border: 0 none; background-color: #fff; }
  .notice .control { display: none; }
  .notice .list a { height: auto; padding-right: 0; padding-top: 4rem; line-height: 1; }
  .notice .list a::after { right: 0; top: 0; width: 2rem; height: 2rem; padding: 0; border: 0 none; background: none; font-family: "xeicon"; color: #000; content: ''; line-height: 2rem; transform: translateY(0); }
  .notice .list a .title { padding: 0; }
  .notice .list a .date { position: relative; top: auto; left: auto; right: auto; bottom: auto; transform: translate(0, 0); font-size: 1.6rem; display: block; margin-top: -0.5rem; font-weight: 300; }
  .section1 { margin: 5rem 0; padding-left: 0; }
  .section1 .title { position: static; width: auto; margin: 0 0 3rem; }
  .section1 .title h2 { font-size: 3.5rem; width: 25rem; margin-bottom: 0; }
  .section1 .title p { display: none; }
  .section1 .list li { padding: 0 0 0.5rem; }
  .section1 .list a { top: 0 !important; }
  .section1 .list strong { margin-bottom: 0.5rem; }
  .section1 .bx-controls-direction { left: auto; top: -8rem; right: 0; }
  .section1 .bx-controls-direction a { width: 5rem; height: 5rem; margin: 0 0 0 0.5rem; line-height: 5rem; }
  .section2 { padding-left: 0; padding-bottom: 15rem; }
  .section2::before { left: -3rem; width: calc(100% + 6rem); margin: 0; background-size: 250%; background-position-x: left -6rem; background-position-y: bottom -9rem; }
  .section2 .title { padding-left: 0; text-align: center; }
  .section2 .title h2 { font-size: 3.5rem; }
  .section2 .title span { top: -9rem; }
  .section2 .title p { display: none; }
  .section2 .img { left: 22.5%; top: calc(100% - 4rem); z-index: 1; width: 25rem; }
  .section2 .list strong { font-size: 1.5rem; left: 2rem; width: 5.5rem; height: 5.5rem; }
  .section2 .list span { font-size: 1.8rem; height: 8rem; }
  .section2 .list a { padding-left: 9rem; }
  .section3 { border-radius: 2rem; }
  .section3 [class*="group"] { position: relative !important; float: none !important; width: 100% !important; height: auto !important; border-radius: 0 !important; }
  .section3 .group1 { padding: 4rem 4rem 10rem; }
  .section3 .group1 h2 { height: auto; margin-bottom: 2rem; }
  .section3 .group2 .link a { padding: 2rem; }
  .section3 .group2 .board { overflow: hidden; padding: 4rem 2rem 3rem; }
  .section3 .group2 .board h2 { font-size: 2.3rem; }
  .section3 .group2 .board .list { width: calc(100% - 11rem); }
  .section3 .group2 .board .list li + li { margin-top: 1rem; padding-top: 1rem; }
  .section3 .group2 .board .more { font-size: 1.5rem; left: 2rem; }
  .section3 .group2 .board .more::after { font-size: 1.2rem; }
  .section3 .group2 .sns { padding: 2rem; }
  .section3 .group3 { padding: 4rem 4rem 10rem; background-size: auto 90%; }
  .section3 .group3 h2 { font-size: 3rem; width: 22rem; margin-bottom: 1rem; }
  .section3 .group3 p { width: 18rem; } }
  
  /* 230718 메인 개편 */
@media (max-width:1280px) {
	#section03 .reservation-button {padding-left:9%;}
	#section03 .reservation-button button {max-width:45rem;}
	#section03 .reservation-button button span {font-size:3rem;}
	#section03 .reservation-button button i {font-size:4.5rem;}
   	#section04 .sns-info ul li {width: 19rem;}
}

@media (max-width:1024px) {
	#section02 .new-contents-title {margin-bottom:6rem; flex-direction: column; align-items:flex-start;}
	#section02 .new-contents-line span:first-of-type {display:none;}
	#section02 .new-contents-list > li {width:50%;}
	/*#section02 .new-contents-list > li:nth-of-type(n + 1):nth-of-type(-n + 9) {display:block;}*/
	#section02 .new-contents-list > li:nth-of-type(odd) {padding-top:0;}
	#section02 .new-contents-list > li:nth-of-type(3n - 1) {padding-top:4rem;}
	#section02 .new-contents-more {margin-top:8rem;}
	
	#section03 .reservation {padding: 8.5rem 0 6rem 0}
	#section03 .reservation-title::before {transform: translate(-25%, -100%); z-index:-1; }
	#section03 .reservation-info {flex-direction:column; align-items:flex-start;}
	#section03 .reservation-button {padding-left: 4.5rem; width:100%;margin-top:9rem;}
	#section03 .reservation-button button {max-width:100%;}
	
	#section04 .sns { flex-direction:column;}
	#section04 .sns-title {transform:translateX(-3%);}
}

@media (max-width:768px) {
	#section04 .sns-info ul li {width:auto; flex:1;}
}

@media (max-width:587px) {
	#section02 {padding-bottom:7rem;}
	#section02 .new-contents-title .topic {max-width:100%; padding-right:2rem;}
	#section02 .new-contents-list {gap : 2rem 0;}
	#section02 .new-contents-list > li {width:50%;}
	#section02 .new-contents-list > li:nth-of-type(3n - 1) {padding-top:0;}
 	#section02 .new-contents-list > li:nth-of-type(odd) {padding-top:6rem;}
 	
	/*#section02 .new-contents-list > li:nth-of-type(n + 1):nth-of-type(-n + 9) {display:none;}
	#section02 .new-contents-list > li:nth-of-type(n + 1):nth-of-type(-n + 6) {display:block;}*/
	#section02 .new-contents-detail {gap : 2rem}
	#section02 .new-contents-detail-image {border-radius:3rem 0 3rem 0;}
	
	#section03 .reservation-date {font-size:1.8rem;}
	#section03 .reservation-date-item {align-items:flex-start;}
	#section03 .reservation-date-item-title {width:15.5rem;}
	#section03 .reservation-date-item-title i {font-size:2rem;}
	#section03 .reservation-date-item-info {padding-top:.2rem;}
	#section03 .reservation-date-item-info br {display:block;}
}

@media (max-width:487px) {
	#section03 .reservation-character {width:13rem; left:-2rem;}
	#section03 .reservation-button {padding-left:3.5rem; margin-top:6rem;}
	#section03 .reservation-button button {height:12rem;}
	#section03 .reservation-button button i {font-size:4rem;}
	#section03 .reservation-button button span {font-size:2.7rem;}
	#section03 .reservation-button > img {widtH:10.6rem;}
}

@media (max-width:420px) {
	#section02 .new-contents-title .tabs {flex-wrap:wrap; gap:1rem 2rem; width:100%;}
	#section02 .new-contents-title .tabs a {width:calc(50% - 1rem);}
}