@charset "utf-8";
/*
  danny 201807
  1. $Reset
  2. $font
  3. $body,html
  4. $共用
  5. $Mobile
  6. $Pad
  7. $橫的版型
  8. $Pc
  9. $1025~1279
*/

/* $Reset
--------------------------------------------------------------------------------------*/
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote{margin:0; padding:0; } fieldset, img {border:0; } address, caption, cite, code, dfn, em, var {font-style:normal; font-weight:normal; } ol, ul {list-style:none; } q:before, q:after {content:''; } abbr, acronym {border:0; }
a{ background:transparent; text-decoration:none; color:inherit; cursor:pointer; line-height:1em; display:inline-block;} a:active{ outline:0; }
body{font-size: 8px;}
h1{font-size: 1.8em;}
h2{font-size: 1.6em;}
h3{font-size: 1.4em;}
h4{font-size: 1em;}
h5{}
h6{}
p{font-size: 1em;}

.h1{font-size: 2em;}
.h2{font-size: 1.8em;}
.h3{font-size: 1.6em;}
.h4{font-size: 1.4em;}
.h5{font-size: 1.2em;}
.h6{font-size: 0.8em;}



/* $font
--------------------------------------------------------------------------------------*/
/* @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css); */

/* cwTeXYen (Chinese Traditional) http://www.google.com/fonts/earlyaccess */
@font-face {
  font-family: 'cwTeXHei';
  font-style: normal;
  font-weight: 500;
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
  src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
       url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}

/* @import url(https://fonts.googleapis.com/earlyaccess/notosanstc.css); */
/*
* Noto Sans TC (Chinese_traditional) http://www.google.com/fonts/earlyaccess
 */
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 100;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}
@font-face {
  font-family: 'Noto Sans TC';
  font-style: normal;
  font-weight: 300;
  src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
       url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 400;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 500;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
 }
@font-face {
font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 700;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
 }
@font-face {
   font-family: 'Noto Sans TC';
   font-style: normal;
   font-weight: 900;
   src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
        url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
 }


:before ,:after{ font-family:'Font Awesome 5 Free','Linearicons-Free',"微軟正黑體";}





/* $body,html
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; height: 100%; font-family:"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif;}
body{background-color: #000; color: #fff;}




/* $共用
--------------------------------------------------------------------------------------*/
/*----清除浮動技巧----*/
.clearfix:before,.clearfix:after {content: " ";display: table;}
.clearfix:after {clear: both;}
.clearfix {*zoom: 1;}
/*----清除浮動技巧----*/

/* IMAGE REPLACE */
.imageReplace{ text-indent: 100%; white-space: nowrap; overflow: hidden;}

/* float */
.floatL{ float: left;}
.floatR{ float: right;}

/* button reset */
button{ font-family:"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; border: none; }

/* input reset */
input{ font-family:"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; border: none; }

/* select reset */
select{ font-family:"微軟正黑體","新細明體","蘋果儷黑體", Arial, Helvetica, sans-serif; }

.wrapper{
height:100%;
}

/* container */
.container{
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 60px;
}

.box{
  margin: 16px auto;
}

/* kv */
.kv{
  margin-top: 300px;
  text-align: center;
  position: relative;
}
.kv:after {
    content : "";
    display: block;
    position: absolute;
    top: -80px;
    left: 0;
    background:url('../images/kv_bg.png') no-repeat;
    background-size:cover;
    width: 100%;
    padding-top:30%;
    opacity : 0.5;
    z-index: -1;
}

.logo{
  display: block;
  width: 100%;
  height: 28px;
  background-image: url('../images/logo.png');
  background-position: center;
  /*撐滿容器*/
  background-size: contain;
  background-repeat: no-repeat;
  /*文字溢出*/
  text-indent: 100%;
  /*不換行*/
  white-space: nowrap;
  /*超出隱藏*/
  overflow: hidden;
}
.kv_title{
  display: block;
  width: 100%;
  height: 180px;
  background-image: url('../images/titile.png');
  background-position: center;
  /*撐滿容器*/
  background-size: contain;
  background-repeat: no-repeat;
  /*文字溢出*/
  text-indent: 100%;
  /*不換行*/
  white-space: nowrap;
  /*超出隱藏*/
  overflow: hidden;
  margin-top: 32px;
}


/* 箭頭 */

.kv_arrow{
  position: relative;
  width: 100%;
  height: 80px;
  margin-top: 180px;
}

.arrow {
  opacity: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform-origin: 50% 50%;
          transform-origin: 50% 50%;
  -webkit-transform: translate3d(-50%, -50%, 0);
          transform: translate3d(-50%, -50%, 0);
}

.arrow-first {
  -webkit-animation: arrow-movement 2s ease-in-out infinite;
          animation: arrow-movement 2s ease-in-out infinite;
}

.arrow-second {
  -webkit-animation: arrow-movement 2s 1s ease-in-out infinite;
          animation: arrow-movement 2s 1s ease-in-out infinite;
}

.arrow:before,
.arrow:after {
  background: #fff;
  content: '';
  display: block;
  height: 3px;
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
}

.arrow:before {
  -webkit-transform: rotate(45deg) translateX(-23%);
          transform: rotate(45deg) translateX(-23%);
  -webkit-transform-origin: top left;
          transform-origin: top left;
}

.arrow:after {
  -webkit-transform: rotate(-45deg) translateX(23%);
          transform: rotate(-45deg) translateX(23%);
  -webkit-transform-origin: top right;
          transform-origin: top right;
}

@-webkit-keyframes arrow-movement {
  0% {
    opacity: 0;
    top: 20%;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

@keyframes arrow-movement {
  0% {
    opacity: 0;
    top: 20%;
  }
  70% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* end kv */


/* product*/
.product{
  width: 100%;
}

.product:after {
    content : "";
    display: block;
    background:url('../images/coffee-beans.jpg') no-repeat;
    background-position: bottom;
    /*撐滿容器*/
    -webkit-background-size: contain;
    background-size:  contain;
    /*文字溢出*/
    text-indent: 100%;
    /*不換行*/
    white-space: nowrap;
    /*超出隱藏*/
    overflow: hidden;
    width: 100%;
    padding-top: 9%;
    opacity : 0.5;
    z-index: -2;
    position: relative;
    top: -260px;
}

.product_item{
  width: 100%;
}

.product-left{
 float: left;
}

.product-right{
    display: block;
    background:url('../images/coffee.png') no-repeat;
    background-position: right;
    background-size: contain;
    width: 100%;
    padding-top: 72%;
    position: relative;
    top: 100px;
    z-index: -1;
}


.product-01,.product-02{
  margin-top: 80px;
}
.product_name{
  display: inline-block;
}

.product_price{
  display: inline-block;
  margin-left: 16px;
}

.red_bg{
  background-color: #a10c04;
  padding: 0 4px;
  margin: 0 auto;
  width: 64px;
}

.red-caffeine,.yellow-caffeine{
  font-size: 1em;
}

.red-caffeine:before{
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #a10c04;
  border-radius: 12px;
  border: 1px solid #fff;
  margin: 8px 4px 0 0 ; 
}

.yellow-caffeine:before{
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: #ffd900;
  border-radius: 12px;
  border: 1px solid #fff;
  margin: 8px 4px 0 0 
}

.product_text{
  color: #afafaf;
  line-height: 24px;
}
.product_text li:before{
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #afafaf;
  border-radius: 8px;
  margin-right: 8px; 
}

.caffeine{
  margin-top: 80px;
}

.caffeine_title{
  margin: 4px 0; 
}
.caffeine_title h3:before{
  content: '';
  display: inline-block;
  width: 8px;
  height: 28px;
  background-color: #fff;
  margin: 0px 8px -4px 0; 
}
/* end product*/

/* video */
.video{
  text-align: center;
  margin-top: -320px;
}

.video img{
  width:100%; 
}

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}

.video-container iframe, .video-container object, .video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}


/* END video */

/* 門市查詢 */
.block3{
  padding:0 0 25px 0;
  position: relative;
  width: 100%;
}

.area_3{ 
  width: 814px;
  margin: 0 auto;
  padding: 50px 0 0 0; }

.select{
  float: left;
}

.select span{ 
  color: #fff; 
  font-size: 15px; 
  border-radius:20px; 
  background: #a10c04;
  padding: 5px 15px;
  margin: 0 5px 0 0; 
}

.option{
  padding: 4px;
  background: #fff; 
  margin: 0 3px; 
  border: 1px solid #fff;
  font-size: 15px;
  font-family: "微軟正黑體";
  color: #505050;
}

.update{ 
  float: right;
  font-size: 14px;
  color: #fff;
    margin: 11px 0 0 0;}

.clean{ clear: both; }

table#store{
  width: 100%;
  margin: 30px 0; }

table#store tr th{ 
  background: #230d05;
  font-size: 18px;
  color: #fff;
  padding:7px 0;
  font-weight: normal;
  text-align: center;
  border-left: 1px solid rgba(255, 255, 255, 0.5); 
}

table#store tr th:first-child{
  border-left: none; 
}

table#store tr td{
  color: #fff;
  font-size: 15px;
  text-align: center;
  padding: 10px 8px;
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.5); 
  border-top: 1px solid rgba(255, 255, 255, 0.5); 
  vertical-align: middle; 
}

table#store tr td:first-child{
  border-left: none; 
  width: 20%;
}

.store{
  display: block;
  background:url('../images/store_bg.png') no-repeat;
  background-position: bottom;
  background-size: cover;
  width: 100%;
  padding: 4px 0;
}
.store_title{
  width: 100%;
  text-align: center;
  background-color: #330808;
  padding: 24px 0;
}

.store_title h1:before{
  content: '';
  display: inline-block;
  background:url('../images/coffee_icon.png') no-repeat;
  background-size: cover;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.store_title h1:after{
  content: '';
  display: inline-block;
  background:url('../images/coffee_icon.png') no-repeat;
  background-size: cover;
  width: 24px;
  height: 24px;
  margin-left: 8px;
}
/* end 門市查詢 */

/* old store */
/* .store{
  display: block;
  background:url('../images/store_bg.png') no-repeat;
  background-position: bottom;
  background-size: cover;
  width: 100%;
  padding: 60px 0;
}
.store_title{
  width: 100%;
  text-align: center;
  background-color: #330808;
  padding: 24px 0;
}

.store_title h1:before{
  content: '';
  display: inline-block;
  background:url('../images/coffee_icon.png') no-repeat;
  background-size: cover;
  width: 24px;
  height: 24px;
  margin-right: 8px;
}
.store_title h1:after{
  content: '';
  display: inline-block;
  background:url('../images/coffee_icon.png') no-repeat;
  background-size: cover;
  width: 24px;
  height: 24px;
  margin-left: 8px;
}

.store_table{
  width: 100%;
}
.store_item{
  background-color: #230d05;
  border-left: 1px solid rgba(255, 255, 255, 0.5); 
  padding: 16px 0;
}
.store_item:first-child{
  border-left: none; 
}
.store_list{
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 1px solid rgba(255, 255, 255, 0.5); 
  border-top: 1px solid rgba(255, 255, 255, 0.5); 
  text-align: center;
  padding: 8px;
  line-height: 24px;
}

.store_list:first-child{
  border-left: none; 
  width: 20%;
} */
/* end old store */

/* footer */
footer{
  padding: 30px 0;
  text-align: center;
  font-size: 0.8em;
}
/* end footer */



/* $Mobile
--------------------------------------------------------------------------------------*/
html,body{ width: 100%; font-size: 16px; -webkit-text-size-adjust:none; }

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

h1{font-size: 1.5em;}
h2{font-size: 1.2em;}
h3{font-size: 1.2em;}
h4{font-size: 0.8em;}
p{font-size: 1em;}

.h6{font-size: 0.6em;}
/* container */
.container{
    max-width: 1200px;
    margin: 60px auto;
    padding: 0 16px;
}

.logo{
  display: block;
  width: 100%;
  height: 20px;
  background-image: url('../images/logo.png');
  background-position: center;
  /*撐滿容器*/
  background-size: contain;
  background-repeat: no-repeat;
  /*文字溢出*/
  text-indent: 100%;
  /*不換行*/
  white-space: nowrap;
  /*超出隱藏*/
  overflow: hidden;
}
.kv_title{
  display: block;
  width: 100%;
  height: 140px;
  background-image: url('../images/titile.png');
  background-position: center;
  /*撐滿容器*/
  background-size: contain;
  background-repeat: no-repeat;
  /*文字溢出*/
  text-indent: 100%;
  /*不換行*/
  white-space: nowrap;
  /*超出隱藏*/
  overflow: hidden;
}


/* kv */
.kv{
  margin-top: 80px;
  text-align: center;
  position: relative;
}
.kv:after {
    content : "";
    display: block;
    position: absolute;
    top: 40px;
    left: 0;
    background:url('../images/kv_bg.png') no-repeat;
    background-size:cover;
    width: 100%;
    padding-top:30%;
    opacity : 0.5;
    z-index: -1;
}

/* 箭頭 */
.kv_arrow{
  position: relative;
  width: 100%;
  height: 80px;
  margin-top: 0px;
}

/* END kv */


/* product */

.product:after {
  content : "";
  display: block;
  background:url('../images/coffee-beans.jpg') no-repeat;
  background-position: bottom;
  -webkit-background-size: contain;
  background-size:  contain;
  width: 100%;
  padding-top: 12%;
  opacity : 0.5;
  z-index: -2;
  position: relative;
  top: -180px;
}

.product-left{
 float: none;
}

.product-right{
    display: block;
    background:url('../images/coffee.png') no-repeat;
    background-position: top;
    /*撐滿容器*/
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 100%;
    z-index: -1;
    top: 0;
}

.product-01{
  margin-top: 0;
}

.product-02{
  margin-top: 40px;
}

.product_price{
  display: inline-block;
  margin-left: 8px;
}

.red-caffeine,.yellow-caffeine{
  font-size: 0.8em;
}

.red-caffeine:before{
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #a10c04;
  border-radius: 12px;
  border: 1px solid #fff;
  margin: 8px 4px 0 0 ; 
}

.yellow-caffeine:before{
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background-color: #ffd900;
  border-radius: 12px;
  border: 1px solid #fff;
  margin: 8px 4px 0 0 
}

.red_bg{
  background-color: #a10c04;
  padding: 0 4px;
  margin: 0 ;
  width: 44px;
}
/* END product */

/* video */
.video{
  text-align: center;
  margin-top: -240px;
}

/* END video */


/* store */
.store{
  padding: 4px 0;
}
/* END store */

}




/* $pad
--------------------------------------------------------------------------------------*/

@media screen  and (max-width:1279px) and (min-width:768px){

.product-left{
  padding: 0 160px;
}

.product:after {
  content : "";
  display: block;
  background:url('../images/coffee-beans.jpg') no-repeat;
  background-position: bottom;
  -webkit-background-size: contain;
  background-size: contain;
  width: 100%;
  padding-top: 20%;
  opacity : 0.5;
  z-index: -2;
  position: relative;
  top: -380px;
}

.product-left{
 float: none;
}

.product-right{
    display: block;
    background:url('../images/coffee.png') no-repeat;
    background-position: bottom;
    /*撐滿容器*/
    background-size: contain;
    background-repeat: no-repeat;
    width: 100%;
    padding-top: 80%;
    z-index: -1;
    top: 0;
}

/* video */
.video{
  text-align: center;
  margin-top: -440px;
}
/* END video */




}