/* ------ open ------ */

.open__contact__content{
  width: 280px;
  height: 100vh;
  background-color: #F3F0EA;
  position: fixed;
  display: none;
  right: 0;
  top: 0px;
  z-index: 100;
}
.open__contact__content__unit{
  width: 280px;
  height: calc(100vh / 3);
}

.open__contact__content__unit__outer{
  width: 220px;
  height: calc(100vh / 3);
  margin: 0 auto;
  border-bottom: 3px solid #8E7F65;
  display: flex;
  justify-content: center;
  align-items: center;
}
.open__contact__content__unit__outer:last-child{
	border: none;
}
.open__contact__content__unit__inner{
  display: block;
}

.open__contact__content.active{
  display: block;
}

.open__contact__content__unit__outer__icon{
  text-align: center;
  font-size: 80px;
  color: #8E7F65;
  width: 80px;
  height: 80px;
  margin: auto;
}
.open__contact__content__unit__outer__icon::before{
  width: 100%;
  height: 100%;
  display: block;
}
.open__contact__content__unit__outer__title{
  font-size: 18px;
  font-weight: bold;
  color: #8E7F65;
  text-align: center;
  padding-top: 10px;
}
.open__contact__content__unit__outer__description{
  font-size: 11px;
  color: #8E7F65;
  text-align: center;
  padding-top: 5px;
}
.open__contact__content__unit__outer__phone-number{
  font-size: 20px;
  font-weight: bold;
  color: #8E7F65;
  text-align: center;
  padding-top: 5px;
}
.open__contact__content__unit__outer__detail{
  font-size: 10px;
  color: #8E7F65;
  text-align: center;
  padding-top: 5px;
}
.open__contact__content__unit__outer__botton-wrapper{
  width: 180px;
  height: 40px;
  font-size: 13px;
  color: #8E7F65;
  padding-top: 10px;
  margin: auto;
}
.open__contact__content__unit__outer__button{
  width: 180px;
  height: 40px;
  font-size: 13px;
  color: #F3F0EA;
  background-color: #8E7F65;
  cursor: pointer;
}

/* ------ close ------ */

.close__contact__content{
  display: none;
  text-decoration: none;
  width: 80px;
  height: 195px;
  top: calc(100vh / 2 - 80px);
  right: 0;
  position: fixed;
  line-height: 13px;
  text-decoration: none !important;
}

.close__contact__content__unit{
  background-color: #8E7F65;
  width: 80px;
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-bottom: 1px solid white;
}

.close__contact__content__unit__inner{
  width: 55px;
  height: 55px;
  color: white;
  font-weight: bold;
  text-align: center;
  margin: 5px;
}

.close__contact__content__unit__inner__font-top{
  font-size: 11px;
}

.close__contact__content__unit__inner__font-center{
  font-size: 11px;
}

.close__contact__content__unit__inner__font-bottom{
  font-size: 11px;
}

.close__contact__content__unit__inner__icon{
  font-size: 25px;
  width: 25px;
  height: 25px;
  margin: auto;
  padding-top: 2px;
  display: flex;
  justify-content: center;
  align-items: center;
}
@media screen and (max-width:640px){
  .open__contact__content{
    display: none;
  }
  .close__contact__content{
    display: none;
  }
}
@media screen and (max-height:700px){
  .open__contact__content{
    overflow: scroll;
  }
  .open__contact__content__unit__outer{
    min-height: 185px;
  }
  .open__contact__content__unit__outer__icon{
    font-size: 70px;
    width: 70px;
    height: 45px;
  }
  .open__contact__content__unit__outer__icon::before{
    width: 100%;
    height: 100%;
    display: block;
  }
  .open__contact__content__unit__outer__title{
    font-size: 20px;
  }
  .open__contact__content__unit__outer__detail{
    font-size: 9px;
    padding-top: 0;
  }
  .open__contact__content__unit__outer__botton-wrapper{
    width: 160px;
    height: 30px;
    font-size: 12px;
  }
  .open__contact__content__unit__outer__button{
    width: 160px;
    height: 30px;
  }
  .open__contact__content__unit__outer__phone-number{
    font-size: 16px;
  }
}