<div class="container">
	<h4>
		<span class="que">Q</span> 請問下單管道有哪些？</h4>
	<div class="panel panel-default">
		<div class="panel-body">
			A：網店與無毒農、果物配合作，其他方式包括電話、LINE、臉書等方式唷！</div>
	</div>
	<h4>
		<span class="que">Q</span> 請問下單之後約幾天可以拿到商品？</h4>
	<div class="panel panel-default">
		<div class="panel-body">
			A：如果是盛產季節訂購完 2~3天內就可宅配出貨，當天採收隔天中午前就能宅配到消費者手上。 要宅配出會時前一天會先行通知消費者宅配訊息。</div>
	</div>
	<h4>
		<span class="que">Q</span> 請問芭樂的賞味期限多久？</h4>
	<div class="panel panel-default">
		<div class="panel-body">
			A：消費者收到芭樂後迅速放置到冰箱內冷藏 可保存一星期。</div>
	</div>
	<h4>
		<span class="que">Q</span> 請問合作的物流廠商是哪一家？</h4>
	<div class="panel panel-default">
		<div class="panel-body">
			A：芳林是與黑貓宅急便合作，較能保障運送品質不會出問題唷！</div>
	</div>
	<h4>
		<span class="que">Q</span> 請問芭樂有噴農藥嗎？</h4>
	<div class="panel panel-default">
		<div class="panel-body">
			A：芳林的芭樂都有做農藥篩檢，擁有自己的產銷履歷唷！</div>
	</div>
</div>
<p>
	<style type="text/css">
/****************************標題**************************************/

hr {
    border-top: 1px solid rgba(238, 238, 238, 0.0);
}


h2 {
    font-size: 30px;
    color: white;
}
/****************************內容**************************************/

body{ 
      background: linear-gradient(
                rgba(0,0,0,0.3),
                rgba(0,0,0,0.3)),
            url("/userUpload/images/10512106/%E5%B8%B8%E8%A6%8B%E5%95%8F%E9%A1%8C.jpg");
            background-attachment: fixed;
            background-repeat: no-repeat;
            background-size:cover; 
            position: relative;
            background-color: transparent;
            background-position: center top;
      font-family:cursive ;
      font-size: 14px;
      color: white;
      overflow-x:hidden;
}

footer{
    background-color:brown;
    font-size: 14px;
    color:white
}

/****************************背景**************************************/

.bgw{
    font-family: cursive;
    font-size: 14px;
    background-color:transparent;
    }


  .panel-body{

        background-color:rgba(255, 255, 255, 0.76);
        color:black;
        font-family: cursive;
        font-size:25px;
        font-weight:600;
        letter-spacing:3px;
    }
    h4{
        font-size: 30px;
        font-family:  "微軟正黑體" ;
        color: paleturquoise;
        letter-spacing: 4px;

    }
    
    .que {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    color: #fff;
    background:red;
    width: 4rem;
    height: 4rem;
    line-height: 4rem;
    border-radius: 50%;
    font-size: 30px;
    font-weight: 500;
    font-family:sans-serif;
}

      .navbar-default {

            background: rgba(230, 126, 34, 1.0);
            font-family: cursive;
            border-color: transparent;
            color: white;

        }

        .navbar-nav>li>a {
            padding-top: 0px;
            padding-bottom: 0px;
            line-height: 50px;
            font-size: 20px;
            text-transform: uppercase;
            position: relative;
        }

        .navbar-nav>li>a::before {
            content: '';
            width: 0px;
            height: 3px;
            background: chartreuse;
            position: absolute;
            top: 120%;
            right: 40px;
            transition: .5s;
            mix-blend-mode: multiply;
        }

        .navbar-nav>li>a::after {
            content: '';
            width: 0;
            height: 3px;
            background: #f0f;
            position: absolute;
            top: 120%;
            right: 10px;
            transition: .5s;
            mix-blend-mode: multiply;
        }

        .navbar-nav>li:hover a::before {
            width: 50%;
            transform: translateX(100%);
        }

        .navbar-nav>li:hover a::after {
            width: 50%;
            transform: translateX(-100%);
        }

        .navbar-default .navbar-nav>.active>a,
        .navbar-default .navbar-nav>.active>a:focus,
        .navbar-default .navbar-nav>.active>a:hover {
            color: #fff;
            background-color: transparent;
        }

 .navbar-fixed-top {
            border-radius: 0;
            padding-left: 5rem;
        }
/****************************圖片**************************************/
img{ border-radius:22%;
}	

/****************************rwd***************************************/
@media screen and (max-width: 768px)
{
   
body{      
background-size: cover;
      }

/***************************backtotop************************************/

.back-to-top {
  position: fixed;
  background: #71c55d;
  line-height: 1;
  color: #fff;
  padding: 7px 12px 13px 12px;
  font-size: 16px;
  border-radius: 2px;
  right: 15px;
  bottom: 15px;
  transition: background 0.5s;
}

@media (max-width: 768px) {
  .back-to-top {
    bottom: 15px;
  }
}

.back-to-top:focus {
  background: #71c55d;
  color: #fff;
  outline: none;
}

.back-to-top:hover {
  background: #55b03f;
  color: #fff;
}



/*********************************************************************/	</style>
</p>
