:root {

  --mainColor: ;

  --mainFontColor: #fff;

  --mainBorder: 1.5px solid var(--mainFontColor);

}



#mainBg {

  background-image: url(img/bg.jpg);

}



.mainCover {

  background-color: rgba(34, 24, 20, 0.6);

}



#home {

  background-image: url(img/home.jpg);

}



.homeCover {

  background-color: rgba(80, 44, 23, 0.4);

}



.item4 {

  width: 20%;

  margin: 0 2% 50px 2%;

}



.item4 img {

  width: 40%;

  margin: auto;

}



article h3 {

  text-align: center;

  margin-bottom: 45px;

  letter-spacing: 8px;

  font-weight: normal;

}







.roomTypeTitle h3,

.newsTitle h3,

h4,

h2 {

  text-align: center;

  letter-spacing: 5px;

  font-size: 20px;

  font-weight: normal;

}



.newsTitle h3 {

  margin-bottom: 10px;

}



p {

  text-align: center;

  letter-spacing: 2px;

}



.newsText p {

  text-align: left;

}



.mainList li a {

  font-weight: normal;

  font-size: 18px;

  letter-spacing: 2px;

}



.menuItem {

  opacity: 85%;

}



.menuItem:hover {

  opacity: 100%;

}



.menuItem p {

  margin-top: 10px;

  font-weight: bold;

  font-size: 20px;

  letter-spacing: 5px;

}





/* message */

.messageFlex {

  display: flex;

  justify-content: center;

}



.messageFlex a {

  width: 40px;

  margin: 0 10px;

}



/* message */





#sns .web {

  background-image: url(img/web.png);

}







.tab-content .item3 {

  float: left;

  width: 30%;

  margin: 0 1.5% 40px;

  /* padding: 0 1%; */

  /* margin: 0 auto 30px; */

}

.tab-content .item3 img {
  width: 100%;
}


.tab-content {

  margin-top: 48px;

}

.nav-pills>li.active>a {

  background-color: var(--darkColor);

  border: 1.5px solid var(--darkColor)
}



.nav-justified>li>a {

  border: var(--mainBorder);

  margin: 0 15px;

  transition: 0.5s;



}

.nav-justified>li>a:hover {

  background-color: var(--darkColor);

  border: 1.5px solid var(--darkColor);

  color: var(--hoverColor)
}


#roomType .clear {
  width: 40%;
  margin: 0 5%;
  clear: both;
}

.categoryArea {
  margin: 150px 0px;
}



@media screen and (max-width:1024px) {



  .menuItem p {

    margin-top: 10px;

    font-weight: normal;

    font-size: 11px;

    letter-spacing: 1px;

  }



  .item4 {

    width: 30%;

    margin: 0 2% 80px 2%;

  }



  .roomTypeTitle h3,

  .newsTitle h3,

  h2,

  h4 {

    font-size: 14px;

  }



}


@media screen and (max-width: 770px) {
  .nav-justified {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
  }

  .nav-justified>li>a {
    margin: 0 5px;
  }

  .nav-justified>li {
    width: 46%;
    margin-bottom: 15px;
  }

  .tab-content .item3 {
    width: 100%;
    margin: 0 1.5% 40px;
  }
}