@media(max-width:1400px){
	.otherList{min-width:100%}
	#room .slide{height:100vh;}
	#room .slide .swiper {height:120vh;}
	#room .room-reserve {width:65%;}
	#room .room-info .ul-wrapper{width:90%;}
	#room .room-info .ul-wrapper>div{width:100%}
	#room .room-info .ul-wrapper>div.room_info{flex-direction:column;}
	#room .room-info ul{margin-bottom:20px}
}

@media(max-width:1024px){
	.roomType_text > h3{font-size:45px}
	.roomType_text > p{font-size:25px}
	#room .room-info .ul-wrapper>div:nth-of-type(1) h4{font-size:35px}
}
@media(max-width:1023px){
	.visual_text{bottom:75px;}
	
}

/* monbile */
@media screen and (max-width:768px) {
  body { font-size: 14px; }
	
  header { background-color:#21302B } 
  header .gnb { display: none; }
  header .btn-open { display: block; }
  header .on .btn-open i { color: #000;}
  header .logo .white {margin-top: 0px;width: 130px;}
  header .logo .black {margin-top: 5px;width: 160px;}
  header .logo {margin-left: 15px;}footer .contacts {margin-top: 100px; width: 100%; height: 820px;}
  header .logo.insta{visibility: hidden;}
  header .btn-open {margin-top: 15px;}
  header .btn-open i {font-size: 40px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);}

  header .reserve-btn-new { left: auto; right: 70px; background: #9b8f7b; color: #fff; border-radius: 36px; padding: 10px; margin-top: 15px; font-size: 12px; } 


	
  /* footer { margin-top:70px; } */
  footer .contacts h1 {width: 100%;text-align: center;font-size: 35px;color: #e4ca9c;}
  footer .contacts h2 {width: 100%;text-align: center;font-size: 16px;color: #e4ca9c;margin-top: 50px;}
  footer .thumb {position: absolute;width: 300px; height: auto; left: 50%; margin-left: -140px;top: 500px;}
  footer .inner .logo { width: 150px; }
  footer .inner .addr { font-size: 16px; }
  footer .inner .tel { font-size: 12px; line-height: 25px; margin-bottom: 40px; }
  footer .inner .infos { flex-wrap: wrap; gap: 0; }
  footer .inner .infos div{ width: 100%; margin-bottom: 10px; margin-left: 0%; justify-content: center; display: block;} 
  footer .inner .infos div:nth-child(2){width: 100%;}
  footer .inner .infos div p{margin: 0 2%; line-height: 20px;}
  footer .inner .infos div:last-child{ width: 100%; flex-direction: row; justify-content: center;}
  footer .inner .infos div:first-child{ width: 100%; flex-direction: column; margin-bottom: 5px;}
  /* footer .inner .infos div:first-child p{line-height: 23px;} */
  footer .inner .infos div:last-child p{margin: 2% 5%;}
	
  /* index ----------------------------------------- */
  #index .about .overlay { background: rgba(0, 0, 0, 0);}
  #index .about .heading {left: 5%; width: 95%; margin-top: 90%; } 
  #index .about .heading h1 { font-size: 42px; color: #000; line-height: 1.6;}
  #index .about .heading span { paddin-top: 40px; font-size: 18px; line-height: 1.6; margin-top: 35px;} 
  #index .about .heading p { font-size: 12px; margin-top:10px; margin-bottom: 50px; line-height: 2; color: #000;}
  #index .about .iframe-wrapper2{display: none;}
  #index .about .volume{display: none;}
  #index .about .heading {display: block; left: 50%; top: 15%; transform: translate(-50%, 0); width: 70vw; }
  #index .about .iframe-wrapper {display: block; width: 180%; height: 45vh; left: -40%; top: 5%; transform: none; }
  #index .about .iframe-wrapper iframe { width: 100%;}
	
  #index .vertical-line { display: none; }
  #index .slide .overlay { background: rgba(0, 0, 0, 0);}
  #index .slide .heading {top: 80%; left: 84%; text-align: center;} 
  #index .slide .heading h1 { font-size: 24px; color: #000; margin-bottom: 30px;}
  #index .slide .heading h1 span { font-size: 20px; color: #000;}
  #index .slide .heading p { font-size: 17px;color: #000; }	
  #index .slide .swiper .swiper-slide { height: 55%; } 
  #index .slide .heading .btn-wrap  {visibility: hidden;}
  #index .slide .swiper .swiper-slide img { height: 100%; object-fit: cover; object-position: center center; } 
  #index .swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:55%;left:0;width:100%}


  #index .room {background: #80725d;}
  #index .room .swiper .swiper-slide img { height: 50%; margin-top: 0%;}
  #index .room .heading { width: 90%; left: 3%; bottom: 18%; flex-direction: column-reverse; }
  #index .room .heading h1 { font-size: 35px; }
  #index .room .heading h1 span { display: block; margin-top: 20px; margin-bottom: 30px; }
  #index .room .heading p { font-size: 12px; }
  #index .room .btn-more { width: 100px; height: 100px; top: 290px; } 
  #index .room .overlay { background: rgba(128, 114, 93, 0); } 
	
  #index .special .content { width: 80vw; }
  #index .special .heading { flex-direction:row; gap: 0px; margin-top: -150px; margin-bottom: 30px; }
  #index .special .heading h1 { font-size: 35px; }
  #index .special .heading h1 span { display: block; margin-left: 0; margin-top: 10px; }
  #index .special .heading p { font-size: 12px; }
  #index .special .swiper {top:320px; } 
  #index .special .swiper .swiper-slide h1 { font-size: 15px;} 
  #index .special .swiper .swiper-slide span {bottom: -18px;  font-size: 55px;} 

	
#scroll_txt {visibility: hidden;}
#scroll_line {visibility: hidden;}
		
.visual_text {position:absolute; bottom:70px; left:50%; transform:translateX(-50%); color:#fff; }
.visual_text > section{padding:0 2rem 2rem}
.visual_text > section > article.titleTxt > p{font-size:21px; font-weight:200; margin-bottom:1.5rem;}
.visual_text > section > article.titleTxt > h2{font-size:35px; letter-spacing:0px;}
.visual_text > section > article.infoTxt{display:flex; justify-content:left;align-items:end}
.visual_text > section > article.infoTxt > p{font-size:11px; line-height:21px}
.slide_bottom{margin-top:50px; }
	
.otherList .swiper-slide p{margin:15px 0; font-size: 12px; }
.otherList .swiper-slide h4{font-size:16px}

  /* about ----------------------------------------- */
  #about {  }
  #about .visual { height: 80vh; background: url('http://gonylab10.speedgabia.com/stayhayon/m/banner/3.jpg') no-repeat center center / cover;}
  #about .visual .content { gap: 20px; }
  #about .visual .content .title { margin-left: 0; font-size: 40px;}
  #about .visual .content .title h1 { font-size: 16px;}
  #about .visual .content .title h2 { margin-left: 80px; font-size: 22px; }
  #about .visual .content .desc {font-size: 12px; line-height: 20px; margin-top:20px; color: #fff;}
  #about .visual .content .title2 h1 { font-size: 12px; }
  #about .visual .content .title2 h2 { font-size: 32px; margin-left: 80px; } 
	
  #about .visual2 { height: 80vh; }
  #about .visual2 .content { flex-direction: column; gap: 0px; transform: translateY(450px); align-items: flex-start}
  #about .visual2 .content .title { margin-left: 1%; font-size: 40px;}
  #about .visual2 .content .title h1 { font-size: 16px; margin-bottom: 18px;  }
  #about .visual2 .content .title h2 { font-size: 24px; }
  #about .visual2 .content .desc {font-size: 12px; line-height: 20px; margin-top:20px; color: #fff;}
	
  #about .visual3 { height: 80vh; }
  #about .visual3 .content { flex-direction: column; gap: 20px; transform: translateY(440px); }
  #about .visual3 .content .title { margin-left: 1%; font-size: 40px;}
  #about .visual3 .content .title h1 { font-size: 16px; margin-bottom: 18px;  }
  #about .visual3 .content .title h2 { font-size: 24px; }
  #about .visual3 .content .desc {font-size: 12px; line-height: 20px; margin-top:20px; color: #fff;}
	
  #about .visual4 { height: 80vh; }
  #about .visual4 .content { flex-direction: column; gap: 20px; transform: translateY(470px); align-items:flex-start}
  #about .visual4 .content .title { margin-left: 1%; font-size: 40px;}
  #about .visual4 .content .title h1 { font-size: 16px; margin-bottom: 18px;  }
  #about .visual4 .content .title h2 { font-size: 24px; }
  #about .visual4 .content .desc {font-size: 12px; line-height: 20px; margin-top:0; color: #fff;}
	
  #about .slide .swiper { transform: translateY(45px); }
  #about .location { margin-top: 500px; margin-bottom: 30px; }
  #about .location .text { flex-direction: column; gap: 20px; }
  #about .location .text .title { font-size: 25px; }
  #about .location #map { margin-left: 0; }
  #about .location #map>div { width: 90vw !important; margin: 0 auto; }
  #about .location #map>div>.wrap_map { height: 300px !important; }
  #about .swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:5%;left:0;width:100%}
  
  .visual2 .title02.active{ animation-duration: 1.5s; animation-name: slidein2; opacity:1}
	.visual2 .title02-2.active{ animation-duration: 1.5s; animation-name: slideinLtoR; opacity:1}
	.visual3 .content.active{ animation-duration: 1.5s; animation-name: slidein440; opacity:1}
	.visual4 .content.active{ animation-duration: 1.5s; animation-name: slidein470; opacity:1}
	/* visual ¿Þ>¿À */
	@keyframes slidein {
	  from {
		transform:translate(-100%, 300px);
		opacity:0;
	  }
	  to {
		transform:translateX(0, 300px);
		opacity:1;
	  }
	}
	/* 390 */
	@keyframes slidein390 {
	  from {
		transform:translate(-100%, 390px);
		opacity:0;
	  }
	  to {
		transform:translateX(0, 390px);
		opacity:1;
	  }
	}

	@keyframes slidein440 {
	  from {
		transform:translate(-100%, 440px);
		opacity:0;
	  }
	  to {
		transform:translateX(0, 440px);
		opacity:1;
	  }
	}

	@keyframes slidein470 {
	  from {
		transform:translate(-100%, 470px);
		opacity:0;
	  }
	  to {
		transform:translateX(0, 470px);
		opacity:1;
	  }
	}
	#about .slide{padding-bottom:10vh}
	#about .slide .swiper-button-prev{left:5%; right:auto; top:45%; z-index:10; margin-top:0}
	#about .slide .swiper-button-next{right:5%; left:auto; top:45%; z-index:10;margin-top:0}

  /* room ----------------------------------------- */
  #room .visual { height: 70vh; background: url('http://gonylab10.speedgabia.com/stayhayon/m/banner/1.jpg') no-repeat center center / cover;}
  #room .visual .content { flex-direction: column; gap: 20px; margin-left: 30px; align-items: normal; transform: translateY(160px); }
  #room .visual .content .title h1 { margin:0; font-size: 12px; }
  #room .visual .content .title h2 { margin-left: 0; font-size: 15px; }
  .visual_text > section{display:flex; flex-direction:column;}
  .visual_text > section > article.titleTxt > p{font-size:15px; margin-bottom:10px;}
  .visual_text > section > article.titleTxt > h2{font-size:21px}
  .visual_text > section > article.infoTxt{margin-top:10px}
  #room .visual .content .tabs { width: 95vw;   justify-content: space-around;  }
  #room .slide{height:50vh}
  #room .slide .swiper { transform: translateY(-50px);  height:50vh; position:static;}
  #room .room-info { margin-top: 15px; padding-bottom: 50px; }
  #room .room-info .ul-wrapper { flex-direction: column; width: 90vw; padding-left: 5vw; transform: none; overflow: hidden; }
  #room .room-info .ul-wrapper>div:nth-of-type(1) ul:last-child { margin-bottom: 0; }
  #room .room-info ul.amenity li { width: 100%; }
  #room .visual .content .tab {font-size: 12px; padding: 0; }
  #room .visual .content .tab:nth-child(13),
  #room .visual .content .tab:nth-child(15),
  #room .visual .content .tab:nth-child(14),
  #room .visual .content .tab:nth-child(16){width: 25%;}
  #room .room-reserve {font-size: 14px;}
  /* #room .room-reserve{font-size: 16px;} */
  #room .swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:5%;left:0;width:100%}
  #room .room-info .ul-wrapper{gap:0}
  #room .room-info .ul-wrapper>div.room_info {display:block;}
  #room .room-info ul {margin-bottom:40px;}
  #room .room-info .ul-wrapper {width:100%; padding:0 10% 10%;}
  #room .room-info .ul-wrapper>div:nth-of-type(1){margin-bottom:40px}
  .visual_wrap{height:50vh}
  .roomType_text{bottom:auto; top:45%; width:auto}
  .roomType_text > p{font-size:17px; display: none;}
  .roomType_text > h3{font-size:35px; display: none;}
  #room .slide .swiper-button-prev{left:5%; right:auto; top:60%; z-index:10; margin-top:0}
  #room .slide .swiper-button-next{right:5%; left:auto; top:60%; z-index:10;margin-top:0}
  
	
  /* facility ----------------------------------------- */
  #facility .visual { height: 75vh; background: url('http://gonylab10.speedgabia.com/stayhayon/m/banner/2.jpg') no-repeat center center / cover;}
  #facility .visual .content { flex-direction: column; gap: 20px; align-items: center; transform: translateY(160px); }
  #facility .visual .content .title h1 { font-size: 14px; margin-bottom: 18px;  }
  #facility .visual .content .title h2 { margin-left: 80px; font-size: 30px; }
  #facility .visual .content .tabs { flex-wrap: wrap; width: 90vw; }
  #facility .visual .content .tab { padding: 10px 0; width: 50%; text-align: center; }
  #facility .visual .content .tab::after { display: none; }
  #facility .visual .desc { display: none; }
  #facility .photo { transform: translateY(0); }
  #facility .photo img:nth-child(even) { transform: translateX(0); }
  #facility .m-desc { display: block; width: 90%; margin: 0 auto; line-height: 1.6; transform: translateY(-50px); }
  #facility .photo .swiper{transform:translateY(-75px)}
  #facility .swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:5%;left:0;width:100%}
	
	
  /* special ----------------------------------------- */
  #special .visual { height: 55vh;}
  .special_1 .visual {background: url('http://gonylab10.speedgabia.com/stayhayon/m/special/1/1.jpg') no-repeat center center / cover; } 
  .special_2 .visual {background: url('http://gonylab10.speedgabia.com/stayhayon/m/special/2/1.jpg') no-repeat center center / cover; } 
  .special_3 .visual {background: url('http://gonylab10.speedgabia.com/stayhayon/m/special/3/1.jpg') no-repeat center center / cover; } 
  .special_4 .visual {background: url('http://gonylab10.speedgabia.com/stayhayon/m/special/4/1.jpg') no-repeat center center / cover; } 
  #special .visual .content { flex-direction: column; gap: 20px; align-items: center; transform: translateY(160px); }
  #special .visual .content .title h1 { font-size: 14px; margin-bottom: 18px;  }
  #special .visual .content .title h2 {  margin-left: 80px; font-size: 30px; }
  #special .visual .content .tabs { flex-wrap: wrap; width: 90vw; }
  #special .visual .content .tab { padding: 10px 0; width: 50%; text-align: center; }
  #special .visual .content .tab::after { display: none; }
  #special .visual .desc { display: none; }
  #special .photo { transform: translateY(0); }
  #special .photo img:nth-child(even) { transform: translateX(0); }
  #special .m-desc { display: block; width: 90%; margin: 0 auto; line-height: 1.6; transform: translateY(-50px); }
  #special .photo .swiper{transform:translateY(-75px)}
  #special .swiper-pagination-bullets,.swiper-pagination-bullets.swiper-pagination-horizontal,.swiper-pagination-custom,.swiper-pagination-fraction{bottom:5%;left:0;width:100%}
	
  /* Location ----------------------------------------- */
  #location .visual { height: 75vh; background: url('http://gonylab10.speedgabia.com/stayhayon/m/banner/6.jpg') no-repeat center center / cover; }
  #location .visual .content { display: flow-root; transform: translateY(170px);} 
  #location .visual .content .title { font-size: 35px; }
  #location .visual .content .desc { font-size:12px; } 
  #location .location .text .title { font-size: 36px; } 
  #location .location #map { margin-top: 70px; margin-left: 2%;  } 
  #location .location #map>div { max-width: 100% !important; width: 98% !important; height: 60vh; }   
	
  /* reserve ----------------------------------------- */
  #reserve .visual { height: 55vh; background: url('http://gonylab10.speedgabia.com/stayhayon/m/banner/4.jpg') no-repeat center center / cover;}
  #reserve .visual .content { transform: translateY(250px); }
  #reserve .visual .content .title h1 { font-size: 14px; margin-bottom: 18px; }
  #reserve .visual .content .title h2 { width: auto; margin-left: 50px; font-size: 26px; }
  #reserve .contents { width: 100%;  }
  #reserve .frame_02 .r_info_01 .table-wrap { overflow-x: scroll; }
  #reserve .frame_02 .r_info_01 .table-wrap table#ROOM_CODE { width: 1000px; }
  #reserve .frame_02 .r_info_04 .table-wrap { overflow-x: scroll; }
  #reserve .frame_02 .r_info_04 .table-wrap table#REFU_PRCE { width: 1000px; }
  

  /* community ----------------------------------------- */
  #community .visual { height: 70vh; background: url('http://gonylab10.speedgabia.com/stayhayon/m/banner/5.jpg') no-repeat center center / cover;}
  #community .visual .content { transform: translateY(250px); }
  #community .visual .content .title h1 { font-size: 16px; margin-bottom: 18px; }
  #community .visual .content .title h2 { font-size: 32px; }
  #community .contents { width: 90vw; margin: 0 auto; }
  .contents .tabs .board_tabs{margin-top:50px}
  .contents .tabs .board_tabs > li a{font-size:13px; padding:5px 0;}
  .contents  ul.snb > li {margin-bottom: 80px; } 
  .contents  ul.snb > li a {font-size: 13px; padding-bottom: 15px;} 
	
  /* travel ----------------------------------------- */
  #travel .visual { height: 70vh; background: url('http://gonylab10.speedgabia.com/stayhayon/m/banner/5.jpg') no-repeat center center / cover;}
  #travel .visual .content { flex-direction: column; gap: 20px; transform: translateY(190px); }
  #travel .visual .content .title h1 { font-size: 16px; margin-bottom: 18px;  }
  #travel .visual .content .title h2 { font-size: 24px; }
  #travel .travel-items { flex-direction: column; }
  #travel .travel-item { width: 90%; margin: 0 auto; margin-bottom: 40px; }
  #travel .travel-item .photo { height: 50vw; }


.offer_cont1 article h1{font-size:1.5rem; line-height:2rem}
	.offer_cont1{width:100%; margin:0 auto;}
	.offer_cont1 article{width:100%; text-align:center; }
	.offer_cont1 article:first-child{margin-bottom:1rem}
	.offer_cont1 article p{font-size:1rem; line-height:1.5rem;}
	.offer_cont1 article p:first-child{margin-bottom:1rem}
	.offer_cont1 article.img{margin-top:3rem}
	.offer_cont1 article.img img{width:100%}
	.tabnav{padding:1rem; top:80%}
	.tabnav li{padding:0.3rem}
	.offer_cont1 article.img .tabnav li a > div.active > img{width:50%}
	.page_title{font-size:20px; margin-top:3rem}
    .event {padding:0px;}
}

@media(max-width:767px){
	#about .visual .content .effect01{flex-direction:column; gap:0; align-items:center}
	#about .visual .content .title{text-align:center;}
	#about .visual .content .title h1{margin-top:0;}
	#about .visual .content .desc{margin-top:10px}
	#location .location .text {flex-direction:column; text-align: center; gap:24px;}
	#location .location {margin-top: 100px;}
}