/* 當你想為某一個區塊或方塊，增加背景，請在該區塊/方塊上增加class名稱
例如：

在HTML裡：
<div class="abc">我要增加背景</div> 

在css裡：
.abc{
    background-image: url(../images/body_bg.webp);  <------圖檔位置
    background-position: center; <-----圖片在區塊/方塊裡的定位
    background-size: cover;  <-----圖片在區塊/方塊裡的大小
}

 */

/* 補充 
    學習資料
    https://ithelp.ithome.com.tw/articles/10223887
    https://ithelp.ithome.com.tw/articles/10224214
*/

/* 全站背景 */
body {
  /* background-image: url(../images/body_bg.png); */
  background-color: #11532c;
  background-position: center;
  background-size: 2400px;
  color: #ffffff;
}

.visualBox {
  background-image: url(../images/kv_bg.png);
  background-size: cover;
  overflow: hidden;
  background-position: top center;
  position: relative;
  background-repeat: repeat-x;
}

.blackboard_bg {
  background-image: url(../images/blackboard_oat.png);
  background-size: cover;
  overflow: hidden;
  background-position: top center;
  position: relative;
  background-repeat: no-repeat;
}
.bg-brown {
  background-color: #ffeec7;
}
.bg-white2 {
  background-color: #ffffff;
}
.bg_yellow {
  background-color: #ffc800;
}
.bg_coffee {
  background-color: #742713;
}
.bg_green {
  background-color: #11532c;
}
.topset1 {
  padding-top: 20px;
  padding-bottom: 5px;
}
.topset2 {
  padding-top: 20px;
  padding-bottom: 0px;
}

/* 按鈕顏色 */
.btnset a {
  color: #ca9f37;
  border: 3px solid #be0602;
  background-color: #fff;
  box-shadow: 3px 5px #880f0f;
  line-height: 1.2;
} /*來去逛逛*/

.btnset a:hover {
  /*    color: rgb(44, 40, 1);*/
  color: #fff;
  border: 3px solid #ffd392;
  background-color: #ca141d;
  box-shadow: 3px 5px #8d6e40;
} /*來去逛逛滑鼠移入*/

.nocarslideinnBox01 {
  background-color: #084b7d;
  padding: 10px;
}
.nocarslideinnBox02 {
  background-color: none;
  padding: 10px;
}

/* 其他東西自己寫這↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓ */

/* 陰影 */
.drop-shadow {
  -webkit-filter: drop-shadow(12px 12px 7px rgba(0, 0, 0, 0.7));
  filter: drop-shadow(6px 6px 3px rgba(0, 0, 0, 0.7));
}

/* 商品點選特效 位置 */
.visualBox .container .kv_item_click1 {
  position: absolute;
  animation: teeter2 0s infinite alternate;
  top: 41%;
  left: 13%;
}

.visualBox .container .kv_item_click2 {
  position: absolute;
  animation: teeter 0s infinite alternate;
  top: 45%;
  right: 10%;
}
/* 商品點選特效 位置 end */

/* kv的摸到往上移特效 start*/
.visualBox .big_hover:hover {
  -webkit-transform: translateY(-2vh);
  transform: translateY(-2vh);
  -webkit-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
}
.visualBox .big_hover {
  display: block;
}
/* kv的摸到往上移特效 end*/

.squarepppinfoinn-box.pppinfobox {
  background: #075f9e;
  text-decoration: none;
  color: #fff;
}
.animation_ufo {
  animation-delay: 2s;
  -webkit-animation-delay: 2s;
  -moz-animation-animation-delay: 2s;
  -ms-animation-animation-delay: 2s;
  animation: teeter 1s infinite alternate;
}
@keyframes teeter {
  0% {
    transform: translateY(0vh);
  }

  100% {
    transform: translateY(2vh);
  }
}

@keyframes teeter3 {
  0% {
    -webkit-filter: brightness(1);
  }

  3% {
    -webkit-filter: brightness(2);
  }

  10% {
    -webkit-filter: brightness(1);
  }

  97% {
    -webkit-filter: brightness(1);
  }

  100% {
    -webkit-filter: brightness(2);
  }
}

/* 煙特效 start*/
.visualBox .smoke {
  position: absolute;
  animation: smoke 3s linear infinite;
  animation-delay: -5s;
  right: 0%;
  z-index: 999;
}

.visualBox .smoke2 {
  position: absolute;
  animation: smoke2 3s linear infinite;
  left: 65%;
  z-index: 999;
}

.test-cearrrrrr .carousel-indicators li {
  background-color: rgba(255, 255, 255, 0);
}

@keyframes smoke {
  0% {
    opacity: 0;
    bottom: 33%;
  }
  50% {
    opacity: 1;
    bottom: 47%;
  }
  100% {
    opacity: 0;
    bottom: 60%;
  }
}

@keyframes smoke2 {
  0% {
    opacity: 0;
    bottom: 33%;
  }
  50% {
    opacity: 1;
    bottom: 47%;
  }
  100% {
    opacity: 0;
    bottom: 60%;
  }
}
/* 煙特效 end*/

.wave_bg {
  background-image: url(../images/wave_bg.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
}
.bg-none_color {
  color: none !important;
}

.coffee_element {
  background-image: url(../images/coffee_element.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
}
.brand_color-1 {
  background-color: #005f3f;
  padding-top: 13px;
}
.brand_color-2 {
  background-color: #c9a063;
  padding-top: 13px;
}
.brand_color-3 {
  background-color: #f4d1ae;
  background-image: url(../images/circle.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
}
.brand_color-4 {
  background-color: #496832;
  background-image: url(../images/float_tea.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
}
.brand_color-5 {
  background-color: #c5b99f;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom center;
}
.oattiltleset {
  padding-top: 2%;
  padding-bottom: 1%;
}
/* 斷點區 */

@media screen and (max-width: 1659px) {
}
@media screen and (max-width: 1399px) {
}
@media screen and (max-width: 1199px) {
  /* 商品點選特效 位置 */
  .visualBox .container .kv_item_click1 {
    position: absolute;
    animation: teeter2 0s infinite alternate;
    top: 37%;
    left: 3%;
    z-index: 100;
    width: 23%;
  }

  .visualBox .container .kv_item_click2 {
    position: absolute;
    animation: teeter 0s infinite alternate;
    top: 37%;
    right: 2%;
    z-index: 100;
    width: 23%;
  }
}

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

@media screen and (max-width: 767px) {
  .visualBox {
    background-image: url(../images/kv_bg-mo.png);
    background-size: cover;
    overflow: hidden;
    background-position: top center;
    position: relative;
    background-repeat: repeat-x;
  }
  /* 商品點選特效 位置 */
  .visualBox .container .kv_item_click1 {
    position: absolute;
    animation: teeter2 0s infinite alternate;
    top: 51%;
    left: 1%;
    z-index: 100;
    width: 33%;
  }

  .visualBox .container .kv_item_click2 {
    position: absolute;
    animation: teeter 0s infinite alternate;
    top: 54%;
    right: 1%;
    z-index: 100;
    width: 33%;
  }

  /* 煙特效 start*/
  .visualBox .smoke {
    position: absolute;
    animation: smoke 3s linear infinite;
    animation-delay: -5s;
    right: -45%;
    z-index: 999;
  }
  .visualBox .smoke2 {
    position: absolute;
    animation: smoke2 3s linear infinite;
    left: -60%;
    z-index: 999;
  }
  @keyframes smoke {
    0% {
      opacity: 0;
      bottom: 32%;
    }
    50% {
      opacity: 1;
      bottom: 48%;
    }
    100% {
      opacity: 0;
      bottom: 68%;
    }
  }
  @keyframes smoke2 {
    0% {
      opacity: 0;
      bottom: 26%;
    }
    50% {
      opacity: 1;
      bottom: 40%;
    }
    100% {
      opacity: 0;
      bottom: 56%;
    }
  }
  /* 煙特效 end*/

  .nocarslideinnBox02.mobileset {
    padding: 0 !important;
  }
  .brand_color-3 {
    background-repeat: repeat;
    background-image: url(../images/circle-mo.png);
  }
  .brand_color-4 {
    background-repeat: repeat;
    background-image: url(../images/float_tea-mo.png);
  }
  .blackboard_bg {
    background-image: url(../images/blackboard_oat-mo.png);
    background-size: contain;
    overflow: hidden;
    background-position: top center;
    position: relative;
    background-repeat: no-repeat;
  }
  .container.new {
    padding-left: 0;
    padding-right: 0;
  }
  .topset2 {
    margin-bottom: -50px;
  }
  .test-cearrrrrr .carousel-indicators li {
    flex: 0 0 30%;
    padding: 3px;
  }
  .topset1 {
    padding-top: 45px;
    padding-bottom: 5px;
  }
  .topset2 {
    padding-top: 5px;
    padding-bottom: 0px;
  }
}

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

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