* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  font-family:"Helvetica", "微軟正黑體", serif;
}
body {
  /* margin: 0px; */
  background: rgb(207,235,251);
  background: linear-gradient(0deg, rgba(207,235,251,1) 0%, rgba(239,247,251,1) 10%);
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.container {
  padding: 0 14px; /* 添加左右內邊距 */
  width: 100%;
  max-width: 1200px;
  margin: auto;
}

.kv {
  background-image: url(./images/tesla.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  height: 600px;
}
@media (max-width: 1024px) {
  .kv {max-height: 360px;
  }
}
@media (max-width: 540px) {
  .kv {max-height: 260px;
background-position: 43% center;
  }
}
.logo {
  height: 44px;
  position: absolute;
  top: 8px;
  left: 10px;
  height: auto;
}

.logo img {
  margin: 10px 20px;
  max-width: 200px;
  min-width: 150px;
}
@media (max-width: 992px) {
  .logo {
    display: flex;
    height: 44px;
    justify-items: center;
    height: auto;
  }

  .logo img {
    margin-top: 0px;
  }
}
@media (max-width: 440px) {
  .logo img {
    width: 150px;
    text-align: center;
    justify-items: center;
  }
}

.annotation {
  display: flex;
  justify-content: center;
}
.advantage {
  width: 100%;
  padding: 0px 20px 20px;
  background-image: url(images/bk_1.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
  display: flex;
  flex-direction: column;
 align-items: center;
}
.advantage::before {
  content: "";
  width: 100%;
  height: 120px;
  position: absolute;
  bottom: -1px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(239,247,251,1) 95%);
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  z-index: 1;
}
.advantage .headline{
  margin: 20px 0px;
}
.headline img{
width: 100%;
height: auto;
}
.heading , .award{
  display: flex;
  justify-content: center;
  padding:36px 16px;
}
@media (max-width:991px) {
.headline img{
max-width:460px;
height: auto;
}
.heading , .award{
  display: flex;
  justify-content: center;
  padding:2%;
}
}
.title {
  text-align: center;
  margin: 40px 0px 20px;
}
.title span {
  position: relative;
  padding: 6px 38px;
  font-size: 24px;
  letter-spacing: 4px;
  color: #283c6c;
  font-weight: bolder;
  z-index: 1;
}
.title span::before {
  content: attr(data-storke);
}
.title span::before {
  content: "租賃服務";
  position: absolute;
  z-index: -1;
  -webkit-text-stroke: 4px #ffffff;
}
@media (max-width: 768px) {
  .title span::before {
    display: none;
  }
  .title span {
    color: #fff;
  }
}
.list {
  position: relative;
  background: rgb(255,255,255);
  background: radial-gradient(circle, rgba(255,255,255,1) 54%, rgba(255,255,255,0.80015756302521) 100%);
 margin:32px 10px;
 padding: 10px;
 border-radius: 14px;
 border: #fff solid 2px;
}
.list h5{
  background-color: #2d4275;
  font-size: 16px;
  color: #fff;
  padding: 2px 14px;
  border-radius: 8px;
}
.list span {
  font-size: 18px;
  color: #123e62;
  font-weight: 700;
}
.list h4{
  color: #334c72;
  font-weight: 700;

}
.list .price span{
  font-size: 24px;
}
.list .price strong{
  font-size: 36px;
  font-weight: bolder;
}
.list h6 {
  color: #123e62;
  font-weight: 500;
  line-height: normal;
  font-size: 14px;
}
.list img {
  max-width: 100px;
}
.list div {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.step1 , .step2 {
  border-right: 1px solid #e3e5e5;
}
.step3 .word{
  display: flex;
  flex-direction: column;
}
.list .price{
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.step3 .irent{
  flex-direction: column;
}
.list .gift{
  position: relative;
}
.list .gift::after {
  content: ""; /*沒用到仍然要寫，雙引號內容留空*/
  width:36px; /*設定長方形寬度*/
  height: 128px; /*設定長方形高度*/
background-image:url(images/gift.png);
background-repeat: no-repeat;
  position: absolute; /*設定與<div>區塊的相對位置*/
  left: -14px;
  top: -12px;
  z-index: 1;
}
.discount {
  width: 100%;
  height: auto;
}

.car{
  margin-bottom: 40px;
}
.car div {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  font-size: 16px;
  font-weight: 500;
  color: #123e62;
}
.car div div{
  background: rgb(255,255,255);
background: radial-gradient(circle, rgba(255,255,255,1) 54%, rgba(255,255,255,0.80015756302521) 100%);
  padding: 30px;
  border-radius: 24px;
  box-shadow:
  0.5px 1px 1.9px rgba(99, 201, 241, 0.022),
  1.2px 2.5px 4.8px rgba(99, 201, 241, 0.031),
  2.5px 5.1px 9.7px rgba(99, 201, 241, 0.039),
  5.1px 10.6px 20.1px rgba(99, 201, 241, 0.048),
  14px 29px 55px rgba(99, 201, 241, 0.07)
;
  border: #fff solid 2px;
}
.car h5{
  font-weight: bolder;
}
.car img {
  max-width: 160px;
}
.car p.card-text{
  display: flex;
  flex-wrap: wrap;
  text-align: center;
  align-content: center;
  height: 48px;
}
 .step1 .word{
    display: flex;
    flex-direction:column;
    padding-right: 12px;
  } 
  .step1 .word .irent{
    padding: 0px;
  }
@media screen and (min-width: 559px) and (max-width: 991px) {
  /* col間的間距 */
  .car div {
    margin-bottom: 20px;
  }
  .list .gift{
    margin-top:28px;
    flex-wrap: wrap;
  }
  .list .price{
    flex-direction: row;
    align-items: center;
  }
  .list .price span {
    font-size: 20px;
}
  .list img {
    max-width: 90px;
}
  .list h4, .list h5 , .list .price span {
    margin: 0px 8px;
  }
  .gift div{
    padding: 16px 0px;
  }
  .step2 {
    border-right: 0px;
}
  .step3{
    border-top: 1px solid #e3e5e5;
  }
  .step3 h6{
    padding:0px 16px;
  }
 
 
  .step3 .word{
    display: flex;
    flex-direction: row;
  }
  .list .gift::after {
    content: ""; /*沒用到仍然要寫，雙引號內容留空*/
    width:128px; /*設定長方形寬度*/
    height:36px; /*設定長方形高度*/
  background-image:url(images/gift_sm.png);
  background-repeat: no-repeat;
    position: absolute; /*設定與<div>區塊的相對位置*/
    left: -14px;
    top: -20px;
    z-index: 1;
  }
}

@media (max-width: 559px) {
  .list .gift{
    padding-top: 36px;
    display: inline-block;
  }
  .list .gift div{
  justify-content: flex-start;
  padding-left: calc((100% - 280px) / 2);}
  .list div {
    padding: 10px;
  }
  .title span {
    font-size: 24px;
    padding: 6px 12px;
  }
  .list {
    padding: 10px;
  }
  .step1, .step2 {
    border-right: 0px;
}
.step3{
  border-top: 0px;
}
  .list .word {
    display: flex;
    flex-direction: column;
    margin: 0px;
    width: 200px;
  }
  .list .word h6{
    margin-bottom: 0px;
  }
  .list img {
    max-width: 80px;
  }
  .list span {
    font-size: 16px;
  }
  .list .gift::after {
    content: ""; /*沒用到仍然要寫，雙引號內容留空*/
    width:128px; /*設定長方形寬度*/
    height:36px; /*設定長方形高度*/
  background-image:url(images/gift_sm.png);
  background-repeat: no-repeat;
    position: absolute; /*設定與<div>區塊的相對位置*/
    left: -14px;
    top: 0px;
    z-index: 1;
  }

  /* 專案優勢 */
  .car div {
    align-items: center;
    font-size: 15px;
    padding: 14px;
  }
}
/* 下列為footer */

.footer {
  margin: 50px 0px 40px;
}

@media screen and (min-width: 721px) and (max-width: 991px) {
  .footer {
    margin: 10px 0px 20px;
  }
}

@media (max-width: 720px) {
  .footer {
    margin: 10px 0px 25%;
  }
}

.comment span {
  padding-left: 20px;
}
ol {
  text-align: left;
  font-size: 14px;
}
.cup {
  min-height: 60px;
  max-height: 132px;
  width: 100%;
  padding: 5px 15px;
  margin-top: 10px;
  margin-bottom: 25px !important;
  font-size: 15px;
  background: #f7f9f9;
  border: solid 1px #c4d0e3;
  border-radius: 8px;
  margin-left: 10px;
  margin-right: 10px;
  display: flex;
  align-items: center;
}

.yushan {
  float: left;
  position: relative;
  width: auto;
  max-height: 170px;
  display: flex;
  align-items: center;
  vertical-align: middle;
  margin-right: 10px;
}

.awardtext {
  display: flex;
  flex-direction: column;
}

.awardtext span {
  font-size: 20px;
  color: #4e6689;
  font-weight: bolder;
  display: inline-block;
  position: relative;
}

.display span::before,
.display span::after {
  content: "";
  width: 11px;
  height: 28px;
  display: block;
  position: absolute;
  top: -1px;
  background-image: url(images/tassel.svg);
  background-size: contain;
}

.display span::before {
  left: -14px;
}

.display span::after {
  right: -14px;
  -moz-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  transform: scaleX(-1);
}
.display span {
  letter-spacing: 0px;
}
.awardtext p {
  font-size: 15px;
  padding-top: 4px;
  margin-bottom: 0px;
}
.awardtext h5 {
  text-align: center;
}
.award {
  display: flex;
  justify-content: center;
  align-items: center;
}

@media (max-width: 832px) {
  .col-6 {
    width: 100%;
  }
}
@media (max-width: 425px) {
  .awardtext span {
    font-size: 18px;
    letter-spacing: normal;
  }

  .awardtext p {
    font-size: 14px;
  }
}
@media (max-width: 375px) {
  .cup {
    max-height: none;
    margin: 0px;
    padding: 8px 20px;
  }
}
/* 桂冠葉的位置 */
@media (max-width: 352px) {
  .display span::before,
  .display span::after {
    top: 5px;
  }
}

/* 右側選單 */
.pc-rbt {
  width: 60px;
  position: fixed;
  top: 10%;
  right: 10px;
  z-index: 2;
}

.mb-dbt {
  width: 100%;
  position: fixed;
  bottom: 0px;
  z-index: 99;
  background-color: rgba(210, 224, 232, 1);
  text-align: center;
}

@media screen and (min-width: 721px) {
  .mb-dbt {
    width: 100%;
    position: fixed;
    bottom: 0px;
    z-index: 99;
    display: none;
  }
}

@media screen and (max-width: 720px) {
  .pc-rbt {
    display: none;
    width: 9%;
    top: 15%;
    right: 2px;
  }
}