styles-rieng-1.css

@charset "UTF-8";


body{
  background: url('../img/照片/小綠葉禪.jpg') no-repeat fixed center center;
  background-size: cover;
}

/* block area */
.title1-area {
  padding: 50px; }

.title1 {
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  font-weight: bold;
  padding-left: 0em;
  width: 18em;
  padding: 5px 0 7px 0;
  border-radius: 6px;
  text-align: center;
  letter-spacing: 0.4pc;
  font-family: 標楷體; }

.title1-area {
  height: auto;
  text-align: center;
  padding: 60px 0 0 0;
  overflow: hidden;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, 0.7); }

.title1-area .small-title {
  color: #e7b623;
  margin-bottom: 5px;
  font-weight: 100;
  letter-spacing: .06em;
  font-size: 22px; }

.title1-area .big-title {
  position: relative;
  font-weight: 100;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffa100 !important;
  font-size: 2em;
  margin-bottom: 50px; }

.title1-area .big-title::before,
.title1-area .big-title::after {
  content: '';
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: calc((100% - 300px) / 2);
  height: 2px;
  background: rgba(255, 255, 255, 0.9); 
  }

.title1-area .big-title::before {
  left: 0; }

.title1-area .big-title::after {
  right: 0; }

.title1-area p {
  color: #fff;
  font-size: 1.5em;
  font-family: 標楷體;
  padding: 0 61px;
  text-align: left; }

.block2 {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  min-height: 300px;
  background-color: #fff; }

/* End block area */
/* search */
.form-inline-add {
  position: relative;
  left: -30px;
  top: 4.6em;
  float: right; }

.i-search {
  color: #919191;
  top: 3px !important;
  left: -8px;
  font-size: 16px; }

/* end search */
/* buttons */
.btn1 {
  position: absolute;
  left: 28em;
  top: -14.1em;
  font-size: 1.5em; }

.btn1:hover, .btn1:focus {
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.8); }

.btn2 {
  position: absolute;
  left: -17.5em;
  top: -.5em;
  font-size: 1.5em; }

.btn2:hover, .btn2:focus {
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.8); }

.btn3 {
  position: absolute !important;
  top: 1.3em;
  left: 23em;
  font-size: 1.2em !important; }

.btn3:hover,
.btn3:focus {
  padding: 6px 12px;
  background-color: rgba(0, 0, 0, 0.8); }

/* End buttons */
.img-1 {
  position: relative;
  top: 1em;
  left: -3em;
  border-radius: 2%;
  width: 23em; }

.img-1:hover {
  transform: translateY(-10px);
  -webkit-transform: translateY(-10px); }

.img-2 {
  width: 33em;
  border-radius: 5%;
  margin-bottom: 2em; }

/* End image */

/* block 3 box */
.product-box{
  background: rgba(255, 255, 255, 0.8);
  margin-top: 15px;
  margin-bottom: 25px;
  border:none;
}

.box-content
{
  padding-left: 15px;
  padding-right: 15px;
  padding-bottom: 15px;
}
/* block 3 box */

.no-pb{
  padding: 0;
  border: none;
}

/* box-title */
.box-title{
  position: relative;
  font-weight: 100;
  color: #000;
  text-align: center;
  text-transform: uppercase;
  font-size: 2em;
  margin-bottom: 10px;
  letter-spacing: 0.1em;
}

.box-title::before,
.box-title::after{
  content: '';
  position: absolute;
  width: calc((75% - 300px)/2);
  height: 2px;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.9);
}

.box-title::before{ left: 0;}
.box-title::after{ right: 0;}

.box-small-title, .box-text{
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 5px 0;
  font-size: 1.2em;
}
/* box-title */