@font-face {
  font-family: 'Pretendard-Regular';
  src: url('https://cdn.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}


*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Pretendard-Regular';
}

html,body{
  height: 100%;
}

a{
  color: #ffffff;
  text-decoration: none;
}

ul,li{
  list-style: none;
}

.clearfix:after { content:""; display:block; clear:both; }/*float버그를 잡아주는 요소(li의 부모요소에게 주어야한다)*/

body{  
  background: #050505;
  font-family: 'Pretendard-Regular';
}

.main-logo img{
  width: 100%;
  height: auto;
}

.wrapper{
  position: fixed;
  top: 0;
  /*left: -100%;*/
  right: -100%;
  height: 100%;
  width: 100%;
  background: #000;
  /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
  /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
  /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%);*/
  transition: all 0.6s ease-in-out;
  z-index: 1;
}
#active:checked ~ .wrapper{
  /*left: 0;*/
  right:0;
}
.menu-btn span,
.menu-btn:before,
.menu-btn:after{
	content: "";
	position: absolute;
	top: calc(50% - 1px);
	left: 30%;
	width: 40%;
	border-bottom: 2px solid #000;
	transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
  border-color: #ffc200;
}
.menu-btn:before{
  transform: translateY(-8px);
}
.menu-btn:after{
  transform: translateY(8px);
}


.close {
	z-index: 1;
	width: 100%;
	height: 100%;
	pointer-events: none;
	transition: background .6s;
}

/* closing animation */
#active:checked + .menu-btn span {
	transform: scaleX(0);
  
}
#active:checked + .menu-btn:before {
	transform: rotate(45deg);
  border-color: #ffc200;
}
#active:checked + .menu-btn:after {
	transform: rotate(-45deg);
  border-color: #ffc200;
}


.wrapper ul{
  position: absolute;
  top: 60%;
  left: 50%;
  height: 90%;
  transform: translate(-50%, -50%);
  list-style: none;
  text-align: center;
}
.wrapper ul li{
  height: 10%;
  margin: 15px 0;
}
.wrapper ul li a{
  text-decoration: none;
  font-size: 30px;
  font-weight: 500;
  padding: 5px 30px;
  color: #fff;
  border-radius: 50px;
  position: absolute;
  line-height: 50px;
  margin: 5px 30px;
  opacity: 0;
  transition: all 0.3s ease;
  transition: transform .6s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.wrapper ul li a:after{
  position: absolute;
  content: "";
  /*background: #fff;*/
   /*background: linear-gradient(#14ffe9, #ffeb3b, #ff00e0);*/
  /*background: linear-gradient(375deg, #1cc7d0, #2ede98);*/
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border-radius: 50px;
  transform: scaleY(0);
  z-index: -1;
  transition: transform 0.3s ease;
}
.wrapper ul li a:hover:after{
  transform: scaleY(1);
}
.wrapper ul li a:hover{
  color: #FFC200;
}
input[type="checkbox"]{
  display: none;
}

#active:checked ~ .wrapper ul li a{
  opacity: 1;
}
.wrapper ul li a{
  transition: opacity 1.2s, transform 1.2s cubic-bezier(0.215, 0.61, 0.355, 1);
  transform: translateX(100px);
}
#active:checked ~ .wrapper ul li a{
	transform: none;
	transition-timing-function: ease, cubic-bezier(.1,1.3,.3,1); /* easeOutBackを緩めた感じ */
  transition-delay: .6s;
  transform: translateX(-100px);
}

.maps{
  margin-top: 200px;
  position: relative;
}

.map-logo img{
  width: 100%;
}


.map-card{
  width: 100%;
  list-style: none;
}

.footer-logo img{
  width: 100%;
  height: auto;
}

.f-list a{
  color: #fffbee;
  text-decoration: none;
}

footer span{
  color: #FFC200;
}

.s-size{
  font-size: 8px;
}

.h-logo{
  width: 100%;
  margin: 30px auto;
  display: block;
  position: relative;
  padding-top: 50px;

}

.icons{
  position: fixed;
  bottom: 50px;
  right: 50px;
}

.icons li{
  width: 50px;
  height: 50px;
  animation: i-cons 1s infinite ease-in-out;
}

.icons img{
  width: 100%;
}

@keyframes i-cons{
  0%{opacity: 1;}
  50%{opacity: 0.3;}
  100%{opacity: 1;}
}


/* ======================================================================================================== */

@media all and (min-width:2000px){
  .inner{
    width: 1400px;
    height: 100%;
    margin: 0 auto;
  }

  header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 99;
  }

  .bg-img1{
    width: 693px;
    height: 500px;
    background-image: url(../img/02.png);
    background-size: cover;
    position: absolute;
    bottom: -200px; left: 0%;
    transform: rotate(0deg);
    overflow: hidden;
  }
  .bg-img2{
    width: 500px;
    height: 693px;
    background-image: url(../img/03.png);
    background-size: cover;
    position: absolute;
    bottom: 0px; right: 0%;
    transform: rotate(0deg);
  }
  .bg-img3{
    width: 200px;
    height: 200px;
    background-image: url(../img/04.png);
    background-size: cover;
    position: absolute;
    top: -100px; left: -100px;
    transform: rotate(0deg);
  }
  .bg-img4{
    width: 200px;
    height: 200px;
    background-image: url(../img/05.png);
    background-size: cover;
    position: absolute;
    bottom: -100px; right: -100px;
    transform: rotate(0deg);
  }
  .bg-img5{
    width: 1209px;
    height: 1420px;
    background-image: url(../img/06.png);
    background-size: cover;
    position: absolute;
    top: -500px; right: -100px;
    transform: rotate(15deg);
    overflow: hidden;
  }
  .bg-img7{
    width: 1033px;
    height: 1057px;
    background-image: url(../img/08.png);
    background-size: cover;
    position: absolute;
    top: -300px; left: -150px;
    transform: rotate(0deg);
  }

  .menu-btn h4{
    width: 110px;
    transform: translateX(-100%);
    color: #FFC200;

  }

  .menu-btn{
    position: absolute;
    z-index: 2;
    right: 100px;
    /*left: 20px; */
    top: 50px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    transition: all 0.3s ease-in-out;
  }

  .main-logo{
    position: absolute;
    /*right: 20px;*/
    left: 100px; 
    top: 50px;
    width: 100px;
  }

  #section1{
    width: 100%;
    height: 500px;
    background: url(../img/information/main.png) no-repeat;
    background-size: cover;
    position: relative;
  }

  .visual-title{
    color: #fffbee;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-80%,20%);
    display: inline-block;
  }

.visual-title span{
  font-size: 100px;
}

.visual-title p{
  text-align: left;
  font-size: 70px;
  color: #fffbee;
  font-style: normal;
  font-weight: 500;
  line-height: 100px;
}

.small-main-text{
  font-size: 22px;
  margin-left: 80px;
  font-weight: 400;
  line-height: 26px;
  text-transform: uppercase;
  color: #fffbee;
  text-align: left;
}

.mini_title {
  margin-left: 43%;
  position: relative;
  margin-bottom: 100px;
  margin-top: 200px;
  display: inline-block;
}

.mini_title p {
  text-align: left;
  font-size: 70px;
  color: #ffffff;
  font-style: normal;
  font-weight: 500;
  line-height: 100px;

}

.mini_title p span{
  font-size: 100px;
}

.pat{
  position: absolute;
  top: -60%; left: -20%;
}

#section2{
  width: 100%;
  height: 2500px;
  padding-top: 100px;
  overflow: hidden;
}


#section2 .small-main-text{
  font-size: 22px;
  padding-left: 110px;
  font-weight: 400;
  line-height: 26px;
  text-transform: uppercase;
  color: #fffbee;
  text-align: left;
}

.package{
  margin-bottom: 100px;
  position: relative;
}

.basic-pak{
  width: 100%;
  height: 180px;
  background-image: url(../img/information/p01.png) ;
  background-position: center;
  margin-bottom: 30px;
}

.hero-pak{
  width: 100%;
  height: 180px;
  background-image: url(../img/information/p02.png) ;
  background-position: center;
}

.packagebox{
  color: #fffbee;
  z-index: 1;
  margin-left: 50px;
  margin-top: 15px;
}

.textbox{
  width: 714px;
  height: 168px;
  padding: 12px 0;
  margin-left: 50px;
  background-image: url(../img/information/blur01.png);
}

.textbox2{
  width: 714px;
  height: 168px;
  padding: 12px 0;
  margin-right: 50px;
  background-image: url(../img/information/blur02.png);
  float: right;
}

.packagebox h3{
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}

.packagebox h4{
  font-size: 18px;
  font-weight: 400;
}

.packagebox2{
  text-align: right;
  color: #fffbee;
  z-index: 1;
  margin-right: 50px;
  margin-top: 15px;
}


.packagebox2 h3{
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}

.packagebox2 h4{
  font-size: 18px;
  font-weight: 400;
}

.roombox li{
  float: left;
  width: 45%;
}

.roombox li:nth-child(1){
  margin-right: 10%;
}

.roombox img{
  width: 100%;
}

.roomname{
  color: #fffbee;
  font-size: 50px;
  font-weight: 100;
  text-align: center;
  margin-bottom: 30px;
}


.roombox{
  width: 100%;
  height: 500px;
  margin-bottom: 100px;
}

.partylist{
  width: 100%;
  height: 500px;
  text-align: center;
  position: relative;
  display: inline-block;
}
  
.partylist li{
  width: 22.25%;
  margin-right: 30px;
  display: inline-block;
}

.partylist li:nth-child(6){
  margin-right: 0;
}

.pic-box img{
  border: 1px solid #ffec5d;
  width: 100%;
}

.partyname{
  font-size: 32px;
  text-align: center;
  color: #fffbee;
  margin-bottom: 50px;
}

.package-btn{
  width: 250px;
  height: 80px;
  border: 1px solid #ffc200;
  font-size: 32px;
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
  padding-top: 18px;
}

.package-btn a{
  color: #fffbee;
  text-decoration: none;
  padding: 30px;
}


#section3{
  width: 100%;
  height: 100vh;
  color: #fff;
}
  
.maping-over{
  position: absolute;
  top: 6%;
  left: 5%;
  z-index: 99;
  background-color: #000;
  width: 850px;
  height: 585px;
}

.map-img{
  width: 255px;
  height: 585px;
  background-image: url(../img/information/05.png);
  background-size: cover;
  float: left;
  margin-right: 50px;
}

.mation{
  width: 500px;
  float: left;
  list-style: none;
  margin: 0 auto;
}

.mation h6{
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin-bottom: 10px;
  text-indent: 30px;
}

.mation h5{
  font-size: 8px;
  font-weight: 400;
  line-height: 12px;
  text-indent: 30px;
}

.mation h4{
  font-size: 8px;
  font-weight: 700;
  line-height: 8px;
  text-indent: 30px;
}

.mation h3{
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-bottom: 10px;
  text-indent: 30px;
}

.mation h2{
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-indent: 30px;
}

.mation h2 span{
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  text-indent: 30px;
}

.mation h1{
  font-size: 32px;
  font-weight: 400;
  line-height: 38px;
  margin-bottom: 20px;
  text-indent: 30px;
}

.mation ul{
  width: 100%;
  list-style: none;
}

.mation ul li{
  width: 150px;
  float: left;
}


.map-logo{
  width: 500px;
  margin: 30px auto;
}

.map-line{
  width: 445px;
  height: 1px;
  margin: 18px 0;
  margin-left: 30px;
}

.pcmap{
  display: block;
}

.mobilemap{
  display: none;
}

  footer{
    width: 100%;
    color: #fff;

    text-align: center;
    margin-top: 200px;
  }
  
  .footer-logo img{
    width: 100%;
    height: auto;
  }
  
  .f-list{
    display: block;
    margin-bottom: 40px;
  }
  
  .f-list li{
    display: inline-block;
    color: #FFC200;
  }
  
  footer{
    width: 100%;
    color: #fff;

    text-align: center;
    margin-top: 200px;
  }
  
  .footer-logo img{
    width: 100%;
    height: auto;
  }
  
  .f-list{
    display: block;
    margin-bottom: 40px;
  }
  
  .f-list li{
    display: inline-block;
    color: #FFC200;
  }
  
  
  .footer-logo{
    width: 400px;
    display: inline-block;
    margin-bottom: 40px;
  }
  
  .f-list li{
    margin-right: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 18px;
    line-height: 18px;
  }
  
  
  .f-info{
    color: #fff;
    display: block;
    width: 100%;
    height: 50px;
    font-size: 18px;
    margin: 0 auto;
  }
  
  .f-info li{
    display: inline-block;
    width: 20%;
  }
  
  .adress{
    font-size: 18px;
    color: #fff;
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    margin-bottom: 30px;
  }
 
  
  .s-size{
    font-size: 18px ;
  }

  .h-logo{
    width: 100%;
    margin: 30px auto;
    display: block;
    position: relative;
    padding-top: 50px;
    font-size: 18px;
  }

  .m-footer{
    display: none;
  }

}
/*====================================================================================================*/


@media all and (min-width:1441px) and (max-width:1999px) {
  .inner{
    width: 1400px;
    height: 100%;
    margin: 0 auto;
  }

  header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 99;
  }

  .bg-img1{
    width: 693px;
    height: 500px;
    background-image: url(../img/02.png);
    background-size: cover;
    position: absolute;
    bottom: -200px; left: 0%;
    transform: rotate(0deg);
    overflow: hidden;
  }
  .bg-img2{
    width: 500px;
    height: 693px;
    background-image: url(../img/03.png);
    background-size: cover;
    position: absolute;
    bottom: 0px; right: 0%;
    transform: rotate(0deg);
  }
  .bg-img3{
    width: 200px;
    height: 200px;
    background-image: url(../img/04.png);
    background-size: cover;
    position: absolute;
    top: -100px; left: -100px;
    transform: rotate(0deg);
  }
  .bg-img4{
    width: 200px;
    height: 200px;
    background-image: url(../img/05.png);
    background-size: cover;
    position: absolute;
    bottom: -100px; right: -100px;
    transform: rotate(0deg);
  }
  .bg-img5{
    width: 1209px;
    height: 1420px;
    background-image: url(../img/06.png);
    background-size: cover;
    position: absolute;
    top: -500px; right: -100px;
    transform: rotate(15deg);
    overflow: hidden;
  }
  .bg-img7{
    width: 1033px;
    height: 1057px;
    background-image: url(../img/08.png);
    background-size: cover;
    position: absolute;
    top: -300px; left: -150px;
    transform: rotate(0deg);
  }

  .menu-btn h4{
    width: 110px;
    transform: translateX(-100%);
    color: #FFC200;

  }

  .menu-btn{
    position: absolute;
    z-index: 2;
    right: 100px;
    /*left: 20px; */
    top: 50px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #fff;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    transition: all 0.3s ease-in-out;
  }

  .main-logo{
    position: absolute;
    /*right: 20px;*/
    left: 100px; 
    top: 50px;
    width: 100px;
  }

  #section1{
    width: 100%;
    height: 500px;
    background: url(../img/information/main.png) no-repeat;
    background-size: cover;
    position: relative;
  }

  .visual-title{
    color: #fffbee;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-80%,20%);
    display: inline-block;
  }

.visual-title span{
  font-size: 100px;
}

.visual-title p{
  text-align: left;
  font-size: 70px;
  color: #fffbee;
  font-style: normal;
  font-weight: 500;
  line-height: 100px;
}

.small-main-text{
  font-size: 22px;
  margin-left: 80px;
  font-weight: 400;
  line-height: 26px;
  text-transform: uppercase;
  color: #fffbee;
  text-align: left;
}

.mini_title {
  margin-left: 43%;
  position: relative;
  margin-bottom: 100px;
  margin-top: 200px;
  display: inline-block;
}

.mini_title p {
  text-align: left;
  font-size: 70px;
  color: #ffffff;
  font-style: normal;
  font-weight: 500;
  line-height: 100px;

}

.mini_title p span{
  font-size: 100px;
}

.pat{
  position: absolute;
  top: -60%; left: -20%;
}

#section2{
  width: 100%;
  height: 2300px;
  padding-top: 100px;
  overflow: hidden;
}


#section2 .small-main-text{
  font-size: 22px;
  padding-left: 110px;
  font-weight: 400;
  line-height: 26px;
  text-transform: uppercase;
  color: #fffbee;
  text-align: left;
}

.package{
  margin-bottom: 100px;
  position: relative;
}

.basic-pak{
  width: 100%;
  height: 180px;
  background-image: url(../img/information/p01.png) ;
  background-position: center;
  margin-bottom: 30px;
}

.hero-pak{
  width: 100%;
  height: 180px;
  background-image: url(../img/information/p02.png) ;
  background-position: center;
}

.packagebox{
  color: #fffbee;
  z-index: 1;
  margin-left: 50px;
  margin-top: 15px;
}

.textbox{
  width: 714px;
  height: 168px;
  padding: 12px 0;
  margin-left: 50px;
  background-image: url(../img/information/blur01.png);
}

.textbox2{
  width: 714px;
  height: 168px;
  padding: 12px 0;
  margin-right: 50px;
  background-image: url(../img/information/blur02.png);
  float: right;
}

.packagebox h3{
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}

.packagebox h4{
  font-size: 18px;
  font-weight: 400;
}

.packagebox2{
  text-align: right;
  color: #fffbee;
  z-index: 1;
  margin-right: 50px;
  margin-top: 15px;
}


.packagebox2 h3{
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}

.packagebox2 h4{
  font-size: 18px;
  font-weight: 400;
}

.roombox li{
  float: left;
  width: 45%;
}

.roombox li:nth-child(1){
  margin-right: 10%;
}

.roombox img{
  width: 100%;
}

.roomname{
  color: #fffbee;
  font-size: 50px;
  font-weight: 100;
  text-align: center;
  margin-bottom: 30px;
}


.roombox{
  width: 100%;
  height: 500px;
  margin-bottom: 100px;
}

.partylist{
  width: 100%;
  height: 500px;
  text-align: center;
  position: relative;
  display: inline-block;
}
  
.partylist li{
  width: 22.25%;
  margin-right: 30px;
  display: inline-block;
}

.partylist li:nth-child(6){
  margin-right: 0;
}

.pic-box img{
  border: 1px solid #ffec5d;
  width: 100%;
}

.partyname{
  font-size: 32px;
  text-align: center;
  color: #fffbee;
  margin-bottom: 50px;
}

.package-btn{
  width: 250px;
  height: 80px;
  border: 1px solid #ffc200;
  font-size: 32px;
  margin: 0 auto;
  margin-top: 100px;
  text-align: center;
  padding-top: 18px;
}

.package-btn a{
  color: #fffbee;
  text-decoration: none;
  padding: 30px;
}


#section3{
  width: 100%;
  height: 100vh;
  color: #fff;
}
  
.maping-over{
  position: absolute;
  top: 6%;
  left: 5%;
  z-index: 99;
  background-color: #000;
  width: 850px;
  height: 585px;
}

.map-img{
  width: 255px;
  height: 585px;
  background-image: url(../img/information/05.png);
  background-size: cover;
  float: left;
  margin-right: 50px;
}

.mation{
  width: 500px;
  float: left;
  list-style: none;
  margin: 0 auto;
}

.mation h6{
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
  margin-bottom: 10px;
  text-indent: 30px;
}

.mation h5{
  font-size: 8px;
  font-weight: 400;
  line-height: 12px;
  text-indent: 30px;
}

.mation h4{
  font-size: 8px;
  font-weight: 700;
  line-height: 8px;
  text-indent: 30px;
}

.mation h3{
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  margin-bottom: 10px;
  text-indent: 30px;
}

.mation h2{
  font-size: 12px;
  font-weight: 400;
  line-height: 16px;
  text-indent: 30px;
}

.mation h2 span{
  font-size: 12px;
  font-weight: 700;
  line-height: 12px;
  text-indent: 30px;
}

.mation h1{
  font-size: 32px;
  font-weight: 400;
  line-height: 38px;
  margin-bottom: 20px;
  text-indent: 30px;
}

.mation ul{
  width: 100%;
  list-style: none;
}

.mation ul li{
  width: 150px;
  float: left;
}


.map-logo{
  width: 500px;
  margin: 30px auto;
}

.map-line{
  width: 445px;
  height: 1px;
  margin: 18px 0;
  margin-left: 30px;
}

.pcmap{
  display: block;
}

.mobilemap{
  display: none;
}
footer{
  width: 100%;
  color: #fff;

  text-align: center;
  margin-top: 200px;
}

.footer-logo img{
  width: 100%;
  height: auto;
}

.f-list{
  display: block;
  margin-bottom: 40px;
}

.f-list li{
  display: inline-block;
  color: #FFC200;
}


.footer-logo{
  width: 400px;
  display: inline-block;
  margin-bottom: 40px;
}

.f-list li{
  margin-right: 10px;
  font-style: normal;
  font-weight: 500;
  font-size: 18px;
  line-height: 14px;
}


.f-info{
  color: #fff;
  display: block;
  width: 100%;
  height: 50px;
  font-size: 18px;
  margin: 0 auto;
}

.f-info li{
  display: inline-block;
  width: 20%;
}

.adress{
  font-size: 18px;
  color: #fff;
  width: 100%;
  margin: 0 auto;
  display: inline-block;
  margin-bottom: 30px;
}

.s-size{
  font-size: 18px ;
}

.h-logo{
  width: 100%;
  margin: 20px auto;
  display: block;
  position: relative;
  padding-top: 50px;
  font-size: 18px;
}

.m-footer{
  display: none;
}

}
/*====================================================================================================*/

@media all and (min-width:1024px) and (max-width:1440px) {
  .inner{
    width: calc(100% - 20%);
    margin: 0 auto;
  }

  header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 99;
  }

  .bg-img1{
    width: 140px;
    height: 172px;
    background-image: url(../img/02.png);
    background-size: cover;
    position: absolute;
    top: -50px; left: 70px;
    transform: rotate(90deg);
    overflow: hidden;
  }
  .bg-img2{
    width: 140px;
    height: 172px;
    background-image: url(../img/03.png);
    background-size: cover;
    position: absolute;
    bottom: -0px; right: 100px;
    transform: rotate(100deg);
  }
  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }
  .bg-img7{
    width: 253px;
    height: 253px;
    background-image: url(../img/08.png);
    background-size: cover;
    position: absolute;
    top: -600px; left: 0px;
    transform: rotate(0deg);
  }

  .menu-btn h4{
    width: 110px;
    transform: translateX(-100%);
    color: #FFC200;

  }


  .menu-btn{
    position: absolute;
    z-index: 2;
    right: 20px;
    /*left: 20px; */
    top: 40px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #ffc200;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    transition: all 0.3s ease-in-out;
  }
  
  .main-logo{
    position: absolute;
    /*right: 20px;*/
    left: 50px; 
    top: 50px;
    width: 100px;
  }


  #section1{
    width: 100%;
    height: 300px;
    background: url(../img/information/m-bg.png) no-repeat;
    background-size: cover;
    position: relative;
  }

  .visual-title{
    color: #fffbee;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-80%,20%);
    display: inline-block;
  }

  .visual-title span{
    font-size: 52px;
  }

  .visual-title p{
    text-align: left;
    font-size: 32px;
    color: #fffbee;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
  }

  .small-main-text{
    font-size: 10px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 22px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: left;
  }

  .mini_title {
    width: 200px;
    margin: 100px auto 50px;
    text-align: center;
    position: relative;
  }
  
  .mini_title p {
    text-align: center;
    font-size: 42px;
    color: #ffffff;
    font-style: normal;
    font-weight: 500;
    line-height: 42px;
  
  }
  
  .mini_title p span{
    font-size: 62px;
  }
  
  .pat{
    position: absolute;
    top: -60%; left: -60%;
  }

  #section2{
    width: 100%;
  }

  #section2 .small-main-text{
    font-size: 14px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 22px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: center;
  }

  .pat{
    position: absolute;
    top: -70%; left: -10%;
    width: 77px;
  }

  .pat img{
    width: 100%;
    transform: rotate(15deg);
  }

  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }

  .bg-img5{
    width: 200px;
    height: 235px;
    background-image: url(../img/06.png);
    background-size: cover;
    position: absolute;
    top: -150px; right: 0px;
    transform: rotate(0deg);
    overflow: hidden;
  }

  .bg-img7{
    display: none;
  }

  .package{
    margin-bottom: 50px;
    position: relative;
  }
  
  .basic-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p01.png) ;
    background-position: center;
    margin-bottom: 30px;
  }
  
  .hero-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p02.png) ;
    background-position: center;
  }
  
  .packagebox{
    color: #fffbee;
    z-index: 1;
    margin-left: 30px;
    margin-top: 10px;
  }
  
  .textbox{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-left: 0px;
    background-size: cover;
  }

  .textbox2{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-right: 0px;
    background-size: cover;
    float: right;
  }

  .packagebox h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox h4{
    font-size: 10px;
    font-weight: 400;
  }
  
  .packagebox2{
    text-align: right;
    color: #fffbee;
    z-index: 1;
    margin-right: 30px;
    margin-top: 10px;
  }
  
  
  .packagebox2 h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox2 h4{
    font-size: 10px;
    font-weight: 400;
  }

  .roombox li{
    float: left;
    width: 45%;
  }
  
  .roombox li:nth-child(1){
    margin-right: 10%;
  }
  
  .roombox img{
    width: 100%;
    padding-bottom: 50px;
  }
  
  .roomname{
    color: #fffbee;
    font-size: 22px;
    font-weight: 100;
    text-align: center;
    margin-bottom: 30px;
  }

  .roombox{
    width: 100%;
    height: 300px;
    margin-bottom: 50px;

  }

  .partylist{
    width: 100%;
    height:250px;
    text-align: center;
    position: relative;
    margin-top: 100px;
    display: inline-block;
    margin: 0 auto;
  }

  .partylist li{
    display: inline-block;
    width: 22%;
    margin-bottom: 50px;
    margin-right: 20px;
  }

  .pic-box img{
    border: 1px solid #ffec5d;
    width: 100%;
  }


  .partyname{
    font-size: 12px;
    text-align: center;
    color: #fffbee;
    margin-bottom: 20px;
  }
  
  .package-btn{
    width: 150px;
    height: 50px;
    font-size: 22px;
    margin: 0 auto;
    margin-top: 0px;
    text-align: center;
    padding-top: 12px;
  }
  
  .package-btn a{
    color: #fffbee;
    text-decoration: none;
    padding: 30px;
  }
  

  #section3{
    width: 100%;
    margin-bottom: 100px;
    color: #fff;
    text-align: center;
  }
    
  .maping-over{
    width: 341px;
    left: 2%;
    z-index: 0;
    background-color: #333;
    height: 450px;
    margin: 0 auto;
    display: inline-block;
    margin-right: 10px;
  }

  .map-img{
    display: none;
  }

  .mation{
    width: calc(100%-20px);
    list-style: none;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    padding-top: 2px;
  }

  .mation h6{
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h5{
    font-size: 8px;
    font-weight: 400;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h4{
    font-size: 8px;
    font-weight: 700;
    line-height: 8px;
    text-indent: 10px;
  }
  
  .mation h3{
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h2{
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 10px;
  }
  
  .mation h2 span{
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h1{
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
    text-indent: 10px;
  }
  
  .mation ul{
    width: 100%;
    height: 50px;
    list-style: none;
    text-align: center;
    margin: 0 auto;

  }
  
  .mation ul li{
    width: 150px;
    display: inline-block;
  }
  

  .map-logo{
    width: 295px;
    margin: 30px auto;
  }

  .map-line{
    width: 260px;
    height: 1px;
    border-bottom: 1px solid #fff;
    margin: 15px auto;
    margin-left: 10px;
    text-align: center;
    display: inline-block;
  }

  .pcmap{
    display: none;
  }

  .mobilemap{
    margin: 0 auto;
    margin-top: 50px;
    display: inline-block;
    text-align: center;
  }
  footer{
    width: 100%;
    color: #fff;
    text-align: center;
    margin-top: 200px;
  }
  
  .footer-logo img{
    width: 100%;
    height: auto;
  }
  
  .f-list{
    display: block;
    margin-bottom: 40px;
  }
  
  .f-list li{
    display: inline-block;
    color: #FFC200;
  }
  
  
  .footer-logo{
    width: 400px;
    display: inline-block;
    margin-bottom: 40px;
  }
  
  .f-list li{
    margin-right: 10px;
    font-style: normal;
    font-weight: 500;
    font-size: 14px;
    line-height: 14px;
  }
  
  
  .f-info{
    color: #fff;
    display: block;
    width: 100%;
    height: 50px;
    font-size: 14px;
    margin: 0 auto;
  }
  
  .f-info li{
    float: left;
    width: 25%;
  }

  .s-size{
    font-size: 14px;
  }
  

  .adress{
    font-size: 14px;
    color: #fff;
    width: 100%;
    margin: 0 auto;
    display: inline-block;
    margin-bottom: 30px;
  }

  .h-logo{
    padding-top: 0;
  }
  
  .m-footer{
    display: none;
  }

}



/* ===================================================================================================================== */






/*====================================================================================================*/



@media all and (min-width:626px) and (max-width:1023px) {
  .inner{
    width: calc(100% - 20%);
    margin: 0 auto;
  }

  header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 99;
  }

  .bg-img1{
    width: 140px;
    height: 172px;
    background-image: url(../img/02.png);
    background-size: cover;
    position: absolute;
    top: -50px; left: 70px;
    transform: rotate(90deg);
    overflow: hidden;
  }
  .bg-img2{
    width: 140px;
    height: 172px;
    background-image: url(../img/03.png);
    background-size: cover;
    position: absolute;
    bottom: -0px; right: 100px;
    transform: rotate(100deg);
  }
  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }
  .bg-img7{
    width: 253px;
    height: 253px;
    background-image: url(../img/08.png);
    background-size: cover;
    position: absolute;
    top: -600px; left: 0px;
    transform: rotate(0deg);
  }

  .menu-btn h4{
    width: 110px;
    transform: translateX(-100%);
    color: #FFC200;

  }


  .menu-btn{
    position: absolute;
    z-index: 2;
    right: 20px;
    /*left: 20px; */
    top: 40px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #ffc200;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    transition: all 0.3s ease-in-out;
  }
  
  .main-logo{
    position: absolute;
    /*right: 20px;*/
    left: 50px; 
    top: 50px;
    width: 100px;
  }


  #section1{
    width: 100%;
    height: 300px;
    background: url(../img/information/m-bg.png) no-repeat;
    background-size: cover;
    position: relative;
  }

  .visual-title{
    color: #fffbee;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-80%,20%);
    display: inline-block;
  }

  .visual-title span{
    font-size: 52px;
  }

  .visual-title p{
    text-align: left;
    font-size: 32px;
    color: #fffbee;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
  }

  .small-main-text{
    font-size: 10px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 22px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: left;
  }

  .mini_title {
    width: 200px;
    margin: 100px auto 50px;
    text-align: center;
    position: relative;
  }
  
  .mini_title p {
    text-align: center;
    font-size: 42px;
    color: #ffffff;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
  
  }
  
  .mini_title p span{
    font-size: 62px;
  }
  
  .pat{
    position: absolute;
    top: -60%; left: -60%;
  }

  #section2{
    width: 100%;
  }

  #section2 .small-main-text{
    font-size: 14px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 22px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: center;
  }

  .pat{
    position: absolute;
    top: -100%; left: 10%;
    width: 77px;
  }

  .pat img{
    width: 100%;
    transform: rotate(15deg);
  }

  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }

  .bg-img5{
    width: 200px;
    height: 235px;
    background-image: url(../img/06.png);
    background-size: cover;
    position: absolute;
    top: -150px; right: 0px;
    transform: rotate(0deg);
    overflow: hidden;
  }

  .bg-img7{
    display: none;
  }

  .package{
    margin-bottom: 50px;
    position: relative;
  }
  
  .basic-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p01.png) ;
    background-position: center;
    margin-bottom: 30px;
  }
  
  .hero-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p02.png) ;
    background-position: center;
  }
  
  .packagebox{
    color: #fffbee;
    z-index: 1;
    margin-left: 30px;
    margin-top: 10px;
  }
  
  .textbox{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-left: 0px;
    background-size: cover;
  }

  .textbox2{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-right: 0px;
    background-size: cover;
    float: right;
  }

  .packagebox h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox h4{
    font-size: 10px;
    font-weight: 400;
  }
  
  .packagebox2{
    text-align: right;
    color: #fffbee;
    z-index: 1;
    margin-right: 30px;
    margin-top: 10px;
  }
  
  
  .packagebox2 h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox2 h4{
    font-size: 10px;
    font-weight: 400;
  }

  .roombox li{
    float: left;
    width: 45%;
  }
  
  .roombox li:nth-child(1){
    margin-right: 10%;
  }
  
  .roombox img{
    width: 100%;
  }
  
  .roomname{
    color: #fffbee;
    font-size: 22px;
    font-weight: 100;
    text-align: center;
    margin-bottom: 30px;
  }

  .roombox{
    width: 100%;
    height: 300px;
    margin-bottom: 50px;

  }

  .partylist{
    width: 100%;
    height:250px;
    text-align: center;
    position: relative;
    margin-top: 100px;
    display: inline-block;
    margin: 0 auto;
  }

  .partylist li{
    display: inline-block;
    width: 190px;
    margin-bottom: 50px;
    margin-right: 20px;
  }

  .pic-box img{
    border: 1px solid #ffec5d;
    width: 100%;
  }


  .partyname{
    font-size: 12px;
    text-align: center;
    color: #fffbee;
    margin-bottom: 20px;
  }
  
  .package-btn{
    width: 150px;
    height: 50px;
    font-size: 22px;
    margin: 0 auto;
    margin-top: 0px;
    text-align: center;
    padding-top: 12px;
  }
  
  .package-btn a{
    color: #fffbee;
    text-decoration: none;
    padding: 30px;
  }
  

  #section3{
    width: 100%;
    margin-bottom: 100px;
    color: #fff;
    text-align: center;
  }
    
  .maping-over{
    width: 341px;
    left: 2%;
    z-index: 0;
    background-color: #333;
    height: 450px;
    margin: 0 auto;
    display: inline-block;
    margin-right: 10px;
  }

  .map-img{
    display: none;
  }

  .mation{
    width: calc(100%-20px);
    list-style: none;
    margin: 0 auto;
    color: #fff;
    text-align: center;
    padding-top: 2px;
  }

  .mation h6{
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h5{
    font-size: 8px;
    font-weight: 400;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h4{
    font-size: 8px;
    font-weight: 700;
    line-height: 8px;
    text-indent: 10px;
  }
  
  .mation h3{
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h2{
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 10px;
  }
  
  .mation h2 span{
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h1{
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
    text-indent: 10px;
  }
  
  .mation ul{
    width: 100%;
    height: 50px;
    list-style: none;
    text-align: center;
    margin: 0 auto;

  }
  
  .mation ul li{
    width: 150px;
    display: inline-block;
  }
  

  .map-logo{
    width: 295px;
    margin: 30px auto;
  }

  .map-line{
    width: 260px;
    height: 1px;
    border-bottom: 1px solid #fff;
    margin: 15px auto;
    margin-left: 10px;
    text-align: center;
    display: inline-block;
  }

  .pcmap{
    display: none;
  }

  .mobilemap{
    margin: 0 auto;
    margin-top: 50px;
    display: inline-block;
    text-align: center;
  }

  footer{
    width: 100%;
    color: #fff;
    margin-top: 100px;
  }

  footer img{
    width: 100%;
  }

  .pc-footer{
    display: none;
  }

  .m-f-logo{
    width: 100px;
    height: 38px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .m-list{
    font-size: 10px;
    text-align: center;
    color: #ffec5d;
  }

  .m-list li{
    display: inline-block;
    margin-right: 10px;
  }

  .m-list li:last-child{
    margin-right: 0;
  }

  .m-info{
    font-size: 10px;
    margin-top: 30px;
    text-align: center;
    padding:0 80px
  }

  .m-info li{
    display: inline-block;
    width: 45%;
  }

  .m-last{
    margin-top: 20px;
    text-align: center;
    margin-bottom: 50px;
  }

}


/* ===================================================================================================================== */

/* ===================================================================================================================== */

@media all and (min-width:586px) and (max-width:625px) {
  .inner{
    width: calc(100% - 20%);
    margin: 0 auto;
  }

  header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 100px;
    z-index: 99;
  }

  .bg-img1{
    width: 140px;
    height: 172px;
    background-image: url(../img/02.png);
    background-size: cover;
    position: absolute;
    top: -50px; left: 70px;
    transform: rotate(90deg);
    overflow: hidden;
  }
  .bg-img2{
    width: 140px;
    height: 172px;
    background-image: url(../img/03.png);
    background-size: cover;
    position: absolute;
    bottom: -0px; right: 100px;
    transform: rotate(100deg);
  }
  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }
  .bg-img7{
    width: 253px;
    height: 253px;
    background-image: url(../img/08.png);
    background-size: cover;
    position: absolute;
    top: -600px; left: 0px;
    transform: rotate(0deg);
  }

  .menu-btn h4{
    width: 110px;
    transform: translateX(-100%);
    color: #FFC200;
    font-size: 16px;
    display: none;
  }


  .menu-btn{
    position: absolute;
    z-index: 2;
    right: 20px;
    /*left: 20px; */
    top: 40px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #ffc200;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    transition: all 0.3s ease-in-out;
  }
  
  .main-logo{
    position: absolute;
    /*right: 20px;*/
    left: 50px; 
    top: 50px;
    width: 100px;
  }


  #section1{
    width: 100%;
    height: 300px;
    background: url(../img/information/m-bg.png) no-repeat;
    background-size: cover;
    position: relative;
  }

  .visual-title{
    color: #fffbee;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-80%,20%);
    display: inline-block;
  }

  .visual-title span{
    font-size: 32px;
  }

  .visual-title p{
    text-align: left;
    font-size: 22px;
    color: #fffbee;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
  }

  .small-main-text{
    font-size: 10px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 12px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: center;
  }

  #section1 .small-main-text{
    text-align: left;
  }

  .mini_title {
    width: 200px;
    margin: 100px auto 50px;
    text-align: center;
    position: relative;
  }
  
  .mini_title p {
    text-align: center;
    font-size: 22px;
    color: #ffffff;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
  
  }
  
  .mini_title p span{
    font-size: 32px;
  }
  
  .pat{
    position: absolute;
    top: -60%; left: -20%;
  }

  #section2{
    width: 100%;
    padding-bottom: 100px;
  }

  #section2 .small-main-text{
    font-size: 10px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 12px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: center;
  }

  .pat{
    position: absolute;
    top: -100%; left: 10%;
    width: 77px;
  }

  .pat img{
    width: 100%;
    transform: rotate(15deg);
  }

  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }

  .bg-img5{
    width: 200px;
    height: 235px;
    background-image: url(../img/06.png);
    background-size: cover;
    position: absolute;
    top: -150px; right: 0px;
    transform: rotate(0deg);
    overflow: hidden;
  }

  .package{
    margin-bottom: 50px;
    position: relative;
  }
  
  .basic-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p01.png) ;
    background-position: center;
    margin-bottom: 30px;
  }
  
  .hero-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p02.png) ;
    background-position: center;
  }
  
  .packagebox{
    color: #fffbee;
    z-index: 1;
    margin-left: 30px;
    margin-top: 10px;

  }
  
  .textbox{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-left: 0px;
    background-size: cover;
  }

  .textbox2{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-right: 0px;
    background-size: cover;
    float: right;
  }

  .packagebox h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox h4{
    font-size: 10px;
    font-weight: 400;
  }
  
  .packagebox2{
    text-align: right;
    color: #fffbee;
    z-index: 1;
    margin-right: 30px;
    margin-top: 10px;

  }
  
  
  .packagebox2 h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox2 h4{
    font-size: 10px;
    font-weight: 400;
  }

  .roombox li{
    float: left;
    width: 45%;
  }
  
  .roombox li:nth-child(1){
    margin-right: 10%;
  }
  
  .roombox img{
    width: 100%;
  }
  
  .roomname{
    color: #fffbee;
    font-size: 22px;
    font-weight: 100;
    text-align: center;

    margin-bottom: 30px;
  }

  .roombox{
    width: 100%;
    height: 150px;
    margin-bottom: 50px;
  }

  .partylist{
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
  }

  .partylist li{
    width: 40%;
    margin-right: 30px;
    margin-bottom: 50px;
    display: inline-block;
  }

  .partylist li:nth-child(2n){
    margin-right: 0;
  }

  .pic-box img{
    width: 100%;
    border: 1px solid #ffec5d;

  }

  .partyname{
    font-size: 12px;
    text-align: center;
    color: #fffbee;

    margin-bottom: 20px;
  }
  
  .partylist>.package-btn{
    width: 150px;
    height: 50px;
    font-size: 22px;
    margin: 0 auto;
    margin-top: 0px;
    text-align: center;
    padding-top: 12px;
    display: block;
  }
  
  .partylist>.package-btn a{
    color: #fffbee;
    text-decoration: none;
    padding: 30px;
  }
  

  #section3{
    width: 100%;
    margin-bottom: 100px;
    color: #fff;
  }
    
  .maping-over{
    position: absolute;
    top: -190%;
    left: 20%;
    z-index: 0;
    background-color: #333;
    width: calc(100%-10%);
    height: 450px;
  }

  .map-img{
    display: none;
  }

  .mation{
    width: calc(100%-20px);
    list-style: none;
    margin: 0 auto;
    color: #fff;
  }

  .mation h6{
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h5{
    font-size: 8px;
    font-weight: 400;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h4{
    font-size: 8px;
    font-weight: 700;
    line-height: 8px;
    text-indent: 10px;
  }
  
  .mation h3{
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h2{
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 10px;
  }
  
  .mation h2 span{
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h1{
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
    text-indent: 10px;
  }
  
  .mation ul{
    width: 100%;
    list-style: none;
  }
  
  .mation ul li{
    width: 150px;
    float: left;
  }
  

  .map-logo{
    width: 295px;
    margin: 30px auto;
  }

  .map-line{
    width: 260px;
    height: 1px;
    border-bottom: 1px solid #fff;
    margin: 15px 0;
    margin-left: 10px;
  }

  .pcmap{
    display: none;
  }

  .mobilemap{
    margin-top: 550px;
    display: block;
    margin: 550px auto 0;
  }

  footer{
    width: 100%;
    color: #fff;
    margin-top: 100px;
  }

  footer img{
    width: 100%;
  }

  .pc-footer{
    display: none;
  }

  .m-f-logo{
    width: 100px;
    height: 38px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .m-list{
    font-size: 10px;
    text-align: center;
    color: #ffec5d;
  }

  .m-list li{
    display: inline-block;
    margin-right: 10px;
  }

  .m-list li:last-child{
    margin-right: 0;
  }

  .m-info{
    font-size: 10px;
    margin-top: 30px;
    text-align: center;
    padding:0 50px
  }

  .m-info li{
    display: inline-block;
    width: 45%;
  }

  .m-last{
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
  }

  .icons{
    position: fixed;
    bottom: 10px;
    right: 20px;
  }
  
  .icons li{
    width: 30px;
    height: 30px;
    animation: i-cons 1s infinite ease-in-out;
  }
  
  .icons img{
    width: 100%;
  }

}

@media all and (min-width:426px) and (max-width:585px) {
  .inner{
    width: 95%;
    margin: 0 auto;
  }

  header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    z-index: 99;
  }

  .bg-img1{
    width: 140px;
    height: 172px;
    background-image: url(../img/02.png);
    background-size: cover;
    position: absolute;
    top: -50px; left: 70px;
    transform: rotate(90deg);
    overflow: hidden;
  }
  .bg-img2{
    width: 140px;
    height: 172px;
    background-image: url(../img/03.png);
    background-size: cover;
    position: absolute;
    bottom: -0px; right: 100px;
    transform: rotate(100deg);
  }
  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }
  .bg-img7{
    width: 253px;
    height: 253px;
    background-image: url(../img/08.png);
    background-size: cover;
    position: absolute;
    top: -600px; left: 0px;
    transform: rotate(0deg);
  }

  .menu-btn h4{
    width: 110px;
    transform: translateX(-100%);
    color: #FFC200;
    font-size: 16px;
    display: none;
  }


  .menu-btn{
    position: absolute;
    z-index: 2;
    right: 20px;
    /*left: 20px; */
    top: 40px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #ffc200;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    transition: all 0.3s ease-in-out;
  }
  
  .main-logo{
    position: absolute;
    /*right: 20px;*/
    left: 50px; 
    top: 50px;
    width: 100px;
  }


  #section1{
    width: 100%;
    height: 300px;
    background: url(../img/information/m-bg.png) no-repeat;
    background-size: cover;
    position: relative;
  }

  .visual-title{
    color: #fffbee;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-80%,20%);
    display: inline-block;
  }

  .visual-title span{
    font-size: 32px;
  }

  .visual-title p{
    text-align: left;
    font-size: 22px;
    color: #fffbee;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
  }

  .small-main-text{
    font-size: 10px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 12px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: center;
  }

  #section1 .small-main-text{
    text-align: left;
  }

  .mini_title {
    width: 200px;
    margin: 100px auto 50px;
    text-align: center;
    position: relative;
  }
  
  .mini_title p {
    text-align: center;
    font-size: 22px;
    color: #ffffff;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
  
  }
  
  .mini_title p span{
    font-size: 32px;
  }
  
  .pat{
    position: absolute;
    top: -60%; left: -20%;
  }

  #section2{
    width: 100%;
    padding-bottom: 100px;
  }

  #section2 .small-main-text{
    font-size: 10px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 12px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: center;
  }

  .pat{
    position: absolute;
    top: -100%; left: 10%;
    width: 77px;
  }

  .pat img{
    width: 100%;
    transform: rotate(15deg);
  }

  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }

  .bg-img5{
    width: 200px;
    height: 235px;
    background-image: url(../img/06.png);
    background-size: cover;
    position: absolute;
    top: -150px; right: 0px;
    transform: rotate(0deg);
    overflow: hidden;
  }

  .package{
    margin-bottom: 50px;
    position: relative;
  }
  
  .basic-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p01.png) ;
    background-position: center;
    margin-bottom: 30px;
  }
  
  .hero-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p02.png) ;
    background-position: center;
  }
  
  .packagebox{
    color: #fffbee;
    z-index: 1;
    margin-left: 30px;
    margin-top: 10px;

  }
  
  .textbox{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-left: 0px;
    background-size: cover;
  }

  .textbox2{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-right: 0px;
    background-size: cover;
    float: right;
  }

  .packagebox h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox h4{
    font-size: 10px;
    font-weight: 400;
  }
  
  .packagebox2{
    text-align: right;
    color: #fffbee;
    z-index: 1;
    margin-right: 30px;
    margin-top: 10px;

  }
  
  
  .packagebox2 h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox2 h4{
    font-size: 10px;
    font-weight: 400;
  }

  .roombox li{
    float: left;
    width: 45%;
  }
  
  .roombox li:nth-child(1){
    margin-right: 10%;
  }
  
  .roombox img{
    width: 100%;
  }
  
  .roomname{
    color: #fffbee;
    font-size: 22px;
    font-weight: 100;
    text-align: center;

    margin-bottom: 30px;
  }

  .roombox{
    width: 100%;
    height: 150px;
    margin-bottom: 50px;
  }

  .partylist{
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
  }

  .partylist li{
    width: 40%;
    margin-right: 30px;
    margin-bottom: 50px;
    display: inline-block;
  }

  .partylist li:nth-child(2n){
    margin-right: 0;
  }

  .pic-box img{
    width: 100%;
    border: 1px solid #ffec5d;

  }

  .partyname{
    font-size: 12px;
    text-align: center;
    color: #fffbee;

    margin-bottom: 20px;
  }
  
  .partylist>.package-btn{
    width: 150px;
    height: 50px;
    font-size: 22px;
    margin: 0 auto;
    margin-top: 0px;
    text-align: center;
    padding-top: 12px;
    display: block;
  }
  
  .partylist>.package-btn a{
    color: #fffbee;
    text-decoration: none;
    padding: 30px;

  }
  

  #section3{
    width: 100%;
    margin-bottom: 100px;
    color: #fff;
  }

  .maps{
    margin-top: 100px;
  }
    
  .maping-over{
    margin: 0 auto;
    z-index: 0;
    background-color: #333;
    width: calc(100%-10%);
    width: 300px;
    height: 450px;
  }

  .map-img{
    display: none;
  }

  .mation{
    width: calc(100%-20px);
    list-style: none;
    margin: 0 auto;
    color: #fff;
  }

  .mation h6{
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h5{
    font-size: 8px;
    font-weight: 400;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h4{
    font-size: 8px;
    font-weight: 700;
    line-height: 8px;
    text-indent: 10px;
  }
  
  .mation h3{
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h2{
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 10px;
  }
  
  .mation h2 span{
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h1{
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
    text-indent: 10px;
  }
  
  .mation ul{
    width: 100%;
    list-style: none;
  }
  
  .mation ul li{
    width: 150px;
    float: left;
  }
  

  .map-logo{
    width: 295px;
    margin: 30px auto;
  }

  .map-line{
    width: 260px;
    height: 1px;
    border-bottom: 1px solid #fff;
    margin: 15px 0;
    margin-left: 10px;
  }

  .pcmap{
    display: none;
  }

  .mobilemap{
    margin-top: 550px;
    display: block;
    margin: 50px auto 0;
  }

  footer{
    width: 100%;
    color: #fff;
    margin-top: 100px;
  }

  footer img{
    width: 100%;
  }

  .pc-footer{
    display: none;
  }

  .m-f-logo{
    width: 100px;
    height: 38px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .m-list{
    font-size: 10px;
    text-align: center;
    color: #ffec5d;
  }

  .m-list li{
    display: inline-block;
    margin-right: 10px;
  }

  .m-list li:last-child{
    margin-right: 0;
  }

  .m-info{
    font-size: 10px;
    margin-top: 30px;
    text-align: center;
    padding:0 30px
  }

  .m-info li{
    display: inline-block;
    width: 45%;
  }

  .m-last{
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
  }

  .icons{
    position: fixed;
    bottom: 10px;
    right: 20px;
  }
  
  .icons li{
    width: 30px;
    height: 30px;
    animation: i-cons 1s infinite ease-in-out;
  }
  
  .icons img{
    width: 100%;
  }

}

/*////////////////////////////////////////////////////////////////////////*/

@media all and (min-width:320px) and (max-width:425px) {
  .inner{
    width: 100%;
    margin: 0 auto;
  }

  header{
    width: 100%;
    position: fixed;
    top: 0;
    left: 0;
    height: 50px;
    z-index: 99;
  }

  .bg-img1{
    width: 140px;
    height: 172px;
    background-image: url(../img/02.png);
    background-size: cover;
    position: absolute;
    top: -50px; left: 70px;
    transform: rotate(90deg);
    overflow: hidden;
  }
  .bg-img2{
    width: 140px;
    height: 172px;
    background-image: url(../img/03.png);
    background-size: cover;
    position: absolute;
    bottom: -0px; right: 100px;
    transform: rotate(100deg);
  }
  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }
  .bg-img7{
    width: 253px;
    height: 253px;
    background-image: url(../img/08.png);
    background-size: cover;
    position: absolute;
    top: -600px; left: 0px;
    transform: rotate(0deg);
  }

  .menu-btn h4{
    width: 110px;
    transform: translateX(-100%);
    color: #FFC200;
    font-size: 16px;
    display: none;
  }


  .menu-btn{
    position: absolute;
    z-index: 2;
    right: 20px;
    /*left: 20px; */
    top: 40px;
    height: 50px;
    width: 50px;
    text-align: center;
    line-height: 50px;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    color: #ffc200;
    /*background: linear-gradient(90deg, #f92c78, #4114a1);*/
    /* background: linear-gradient(375deg, #1cc7d0, #2ede98); */
   /* background: linear-gradient(-45deg, #e3eefe 0%, #efddfb 100%); */
    transition: all 0.3s ease-in-out;
  }
  
  .main-logo{
    position: absolute;
    /*right: 20px;*/
    left: 50px; 
    top: 50px;
    width: 100px;
  }


  #section1{
    width: 100%;
    height: 300px;
    background: url(../img/information/m-bg.png) no-repeat;
    background-size: cover;
    position: relative;
  }

  .visual-title{
    color: #fffbee;
    position: absolute;
    width: 50%;
    top: 50%;
    left: 50%;
    transform: translate(-80%,20%);
    display: inline-block;
  }

  .visual-title span{
    font-size: 32px;
  }

  .visual-title p{
    text-align: left;
    font-size: 22px;
    color: #fffbee;
    font-style: normal;
    font-weight: 500;
    line-height: 26px;
  }

  .small-main-text{
    font-size: 10px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 12px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: center;
  }

  #section1 .small-main-text{
    text-align: left;
  }

  .mini_title {
    width: 200px;
    margin: 100px auto 50px;
    text-align: center;
    position: relative;
  }
  
  .mini_title p {
    text-align: center;
    font-size: 22px;
    color: #ffffff;
    font-style: normal;
    font-weight: 500;
    line-height: 28px;
  
  }
  
  .mini_title p span{
    font-size: 32px;
  }
  
  .pat{
    position: absolute;
    top: -60%; left: -20%;
  }

  #section2{
    width: 100%;
    padding-bottom: 100px;
  }

  #section2 .small-main-text{
    font-size: 10px;
    margin-left: 10px;
    font-weight: 400;
    line-height: 12px;
    text-transform: uppercase;
    color: #fffbee;
    text-align: center;
  }

  .pat{
    position: absolute;
    top: -100%; left: 10%;
    width: 77px;
  }

  .pat img{
    width: 100%;
    transform: rotate(15deg);
  }

  .bg-img3{
    display: none;
  }
  .bg-img4{
    display: none;
  }

  .bg-img5{
    width: 200px;
    height: 235px;
    background-image: url(../img/06.png);
    background-size: cover;
    position: absolute;
    top: -150px; right: 0px;
    transform: rotate(0deg);
    overflow: hidden;
  }

  .package{
    margin-bottom: 50px;
    position: relative;
  }
  
  .basic-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p01.png) ;
    background-position: center;
    margin-bottom: 30px;
  }
  
  .hero-pak{
    width: 100%;
    height: 100px;
    background-image: url(../img/information/p02.png) ;
    background-position: center;
  }
  
  .packagebox{
    color: #fffbee;
    z-index: 1;
    margin-left: 30px;
    margin-top: 10px;

  }
  
  .textbox{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-left: 0px;
    background-size: cover;
  }

  .textbox2{
    width: 100%;
    height: 100px;
    padding: 12px 0;
    margin-right: 0px;
    background-size: cover;
    float: right;
  }

  .packagebox h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox h4{
    font-size: 10px;
    font-weight: 400;
  }
  
  .packagebox2{
    text-align: right;
    color: #fffbee;
    z-index: 1;
    margin-right: 30px;
    margin-top: 10px;

  }
  
  
  .packagebox2 h3{
    font-size: 14px;
    font-weight: bold;
    margin-bottom: 16px;
  }
  
  .packagebox2 h4{
    font-size: 10px;
    font-weight: 400;
  }

  .roombox li{
    float: left;
    width: 45%;
  }
  
  .roombox li:nth-child(1){
    margin-right: 10%;
  }
  
  .roombox img{
    width: 100%;
  }
  
  .roomname{
    color: #fffbee;
    font-size: 22px;
    font-weight: 100;
    text-align: center;

    margin-bottom: 30px;
  }

  .roombox{
    width: 100%;
    height: 150px;
    margin-bottom: 50px;
  }

  .partylist{
    width: 100%;
    height: 100%;
    text-align: center;
    position: relative;
  }

  .partylist li{
    width: 40%;
    margin-right: 30px;
    margin-bottom: 50px;
    display: inline-block;
  }

  .partylist li:nth-child(2n){
    margin-right: 0;
  }

  .pic-box img{
    border: 1px solid #ffec5d;

    width: 100%;
  }

  .partyname{
    font-size: 12px;
    text-align: center;
    color: #fffbee;
    margin-bottom: 20px;
  }
  
  .partylist>.package-btn{
    width: 150px;
    height: 50px;
    font-size: 22px;
    margin: 0 auto;
    margin-top: 0px;
    text-align: center;
    padding-top: 12px;
    display: block;
  }
  
  .partylist>.package-btn a{
    color: #fffbee;
    text-decoration: none;
    padding: 30px;

  }
  

  #section3{
    width: 100%;
    margin-bottom: 100px;
    color: #fff;
  }

  .maps{
    margin-top: 100px;
  }
    
  .maping-over{
    margin: 0 auto;
    z-index: 0;
    background-color: #333;
    width: calc(100%-10%);
    width: 300px;
    height: 450px;
  }

  .map-img{
    display: none;
  }

  .mation{
    width: calc(100%-20px);
    list-style: none;
    margin: 0 auto;
    color: #fff;
  }

  .mation h6{
    font-size: 12px;
    font-weight: 400;
    line-height: 14px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h5{
    font-size: 8px;
    font-weight: 400;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h4{
    font-size: 8px;
    font-weight: 700;
    line-height: 8px;
    text-indent: 10px;
  }
  
  .mation h3{
    font-size: 10px;
    font-weight: 400;
    line-height: 16px;
    margin-bottom: 10px;
    text-indent: 10px;
  }
  
  .mation h2{
    font-size: 12px;
    font-weight: 400;
    line-height: 16px;
    text-indent: 10px;
  }
  
  .mation h2 span{
    font-size: 12px;
    font-weight: 700;
    line-height: 12px;
    text-indent: 10px;
  }
  
  .mation h1{
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    margin-bottom: 20px;
    text-indent: 10px;
  }
  
  .mation ul{
    width: 100%;
    list-style: none;
  }
  
  .mation ul li{
    width: 150px;
    float: left;
  }
  

  .map-logo{
    width: 295px;
    margin: 30px auto;
  }

  .map-line{
    width: 260px;
    height: 1px;
    border-bottom: 1px solid #fff;
    margin: 15px 0;
    margin-left: 10px;
  }

  .pcmap{
    display: none;
  }

  .mobilemap{
    margin-top: 550px;
    display: block;
    margin: 50px auto 0;
  }

  footer{
    width: 100%;
    color: #fff;
    margin-top: 100px;
  }

  footer>.inner{
    min-width: 463px;
  }

  footer img{
    width: 100%;
  }

  .pc-footer{
    display: none;
  }

  .m-f-logo{
    width: 100px;
    height: 38px;
    margin: 0 auto;
    margin-bottom: 20px;
  }

  .m-list{
    font-size: 10px;
    text-align: center;
    color: #ffec5d;
  }

  .m-list li{
    display: inline-block;
    margin-right: 10px;
  }

  .m-list li:last-child{
    margin-right: 0;
  }

  .m-info{
    font-size: 10px;
    margin-top: 30px;
    text-align: center;
    padding:0;
    min-width: 320px;
  }

  .m-info li{
    display: inline-block;
    width: 48%;
    min-width: 137px;
  }

  .m-last{
    margin-top: 20px;
    text-align: center;
    margin-bottom: 20px;
    min-width: 320px;
  }


  .icons{
    position: fixed;
    bottom: 10px;
    right: 20px;
  }
  
  .icons li{
    width: 30px;
    height: 30px;
    animation: i-cons 1s infinite ease-in-out;
  }
  
  .icons img{
    width: 100%;
  }

}