@font-face {
  font-family: 'ApercuMedium';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/ApercuMedium.otf') format('opentype');
}

@font-face {
  font-family: 'ApercuRegular';
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/ApercuRegular.otf') format('opentype');
}


/*Reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, ins, kbd, sub, q, s, samp,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	border: 0;
	font-family: inherit;
	font-size: 100%;
	font-style: inherit;
	font-weight: inherit;
	margin: 0;
	outline: 0;
	padding: 0;
	vertical-align: baseline;
}
:focus {/* remember to define focus styles! */
	outline: 0;
}
body {
	background: #fff;
}
ol, ul {
	list-style: none;
}
table {/* tables still need 'cellspacing="0"' in the markup */
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	font-weight: normal;
	text-align: left;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}
a img {
	border: 0;
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}



/* Asset 
site-min-width = 1180; 
margin left / right= 10px;
body color =
link color = #A5C02E;
hove color = #596915;
*/


/* =Structure
----------------------------------------------- */
body{ width: 100%; height: 100%; display: block; font: 13px/16px normal normal; color: #444; min-width: 1200px; font-family: "ApercuRegular",Helvetica,Arial,sans-serif}

h1,h2,h3,h4,h5,h6,h7{font-weight: normal; display: block}
h1{ font-size: 32px; line-height: 34px; font-family: 'ApercuMedium' ,Arial, sans-serif; font-weight: bold }
h2{ font-size: 30px; font-weight: normal; line-height: 32px; color: #A5C02E; text-transform: uppercase}
h3{ font-size: 20px; font-weight: normal; line-height: 26px; color: #666}
h4{ font-size: 16px; line-height: 18px;}
h5{ font-size: 13px; line-height: 15px; color: #686868}
h6{ font-size: 12px; line-height: 17px}
h7{ }

p{ margin-bottom: 22px; line-height: 22px; }
strong{ color:#000; font-weight: bold; letter-spacing: 2px}
sup{ font-size: 7px}
a{ text-decoration: none; color: #A5C02E; cursor: pointer}
li{ margin-bottom: 10px}

#wrapper{width: 100%; height: 100%; display: block; min-width: 1200px}
#header{ position: fixed;  top:0; left: 0; display: block; z-index: 2; width: 100%;/*background:url(../images/menu-bg.png) no-repeat top*/;z-index: 999}
#header.nav2 { background-color: #000}
#footer{ padding-top: 0px; position: fixed; bottom:0; left: 0; display: block;  width: 100%; background: #B2C83A;z-index: 999}

.col-3set{overflow: hidden; display: block; width: 100%}
.col-3set .float-l{ float: left }
.col-3set .float-r{ float: right }
.col-3set .col-1{ width: 35%}
.col-3set .col-2{ width: 30%}
.col-3set .col-3{ width: 35%}

.bullet-list {margin: 22px 0 0 0;}
.block-title{padding: 0 0 22px 0}
.text-g  {color: #586a07}
.text-g2 {color: #73742B}
.text-r  {color: #cb204a}
.text-grey {color: #666}

p.p-fix-dt6 {margin-top: -6px}
p.p-fix-dt11 {margin-top: -11px}
p.p-fix-dt22 {margin-top: -22px}
p.p-fix-dt33 {margin-top: -40px}
p.p-fix-at11{margin-top: 11px}
p.p-fix-at22 {margin-top: 22px}
p.p-fix-at33 {margin-top: 33px}

.block-content{ margin: 0 auto}

/* =Page Contnet
----------------------------------------------- */
#page-content{width:100%; height:0; display: block; position: relative; background: #EDEDED; z-index: 1;visibility:hidden; overflow: hidden}
.section-wrapper{width: 100%; height: 100%; height: 768px;}
.section-wrapper-fix{height: 668px}
.inner-wrapper{ width: 1180px; margin: 0 auto; padding:0 10px; overflow: hidden; display: block}

/* Overlay Visual */
#overlay-visual { position: fixed; z-index: 100; height: 100%; width:30%; }
#overlay-visual .inner-wrapper{ height: 768px; width:100%;}
#overlay-visual .col-mid{   margin: 240px auto; width:383px }
#big-video-wrap{z-index: 998;opacity: 1}


/* =Page Specific
----------------------------------------------- */
.page-keyvisual{  position: absolute; width: 383px; left: 50%; margin-left: -191px; z-index: 99 }
.page-middle-bg{ position: absolute }
#intro.section-wrapper {background: #000; display: none}
a.sidebtn{ position: fixed; right: 0; top: 130px; z-index: 10; cursor: pointer; width: 180px; height: 260px}
a.footbtn{ position: fixed; right: 80px; bottom:32px; z-index: 10; cursor: pointer; width: 290px; height: 97px;  display: none;z-index: 999}


#home.section-wrapper {background: url('../images/main.jpg') no-repeat center}
#home.section-wrapper .col-3set{ margin-top: 400px}
#home.section-wrapper .col-3set .col-3{ padding-right: 100px}


#about.section-wrapper {background: url('../images/bg/bg1.jpg') no-repeat center}
#about.section-wrapper h1{ color: #586a07}
#about.section-wrapper h2{ color: #586a07}
#about.section-wrapper .col-3set{ margin-top: 182px }
#about.section-wrapper .col-3set .col-1{ padding-left: 56px}
#about.section-wrapper .col-3set .col-2{ margin-top: 80px; margin-left: 400px}
#about.section-wrapper .col-3set .col-3{ margin-top: 0px}
#about.section-wrapper .col-3set .col-3 img{ margin-left: -3px}
#about.section-wrapper .about-ref { color: #AAA; font-size: 12px; line-height: 13px; margin-top: 0px; width: 380px}


#coffee.section-wrapper{ background: url('../images/bg/bg4.jpg') no-repeat top;}
#coffee.section-wrapper h2{ color: #586a07}
#coffee.section-wrapper li{background: url(../images/li.png) no-repeat left top; padding-left: 16px}
#coffee.section-wrapper .col-3set{ margin-top: 190px }
#coffee.section-wrapper .col-3set .col-1{ margin-top: 50px }
#coffee.section-wrapper .col-3set .col-2{ margin-top: 90px }
#coffee.section-wrapper .col-3set .col-3{ }
#coffee.section-wrapper .page-middle-bg{ margin-left: -90px; margin-top: -110px}
#coffee.section-wrapper .graph{ padding-top: 182px; text-align:left; background: url('../images/graph/coffee-graph.png') no-repeat left top; width: 385px; height: 393px; color:#FFF }
#coffee.section-wrapper .graph h6{ line-height: 14px}
#coffee.section-wrapper .graph ul{ margin-left: 15px; padding-right: 15px}
#coffee.section-wrapper .graph ul li.li-2{ margin-top: 115px}



#raspberry.section-wrapper{background: url('../images/bg/bg4.jpg') no-repeat bottom }
#raspberry.section-wrapper h2{ color: #cb204a}
#raspberry.section-wrapper h4{ color: #cb204a}
#raspberry.section-wrapper h5{ color: #777; padding-left: 8px}
#raspberry.section-wrapper li{background: url(../images/li-pink.png) no-repeat left top; padding-left: 16px}
#raspberry.section-wrapper .col-3set{  margin-top: 0  }
#raspberry.section-wrapper .col-3set .col-1{ margin-top: 110px }
#raspberry.section-wrapper .col-3set .col-2{ margin-top: 100px }
#raspberry.section-wrapper .col-3set .col-3{ }
#raspberry.section-wrapper .block-content{ width: 286px}
#raspberry.section-wrapper .block-content img{ margin-top: 5px}


#two-in-one.section-wrapper{ background: url('../images/bg/bg1.jpg') no-repeat center}
#two-in-one.section-wrapper h2{ color: #586a07}
#two-in-one.section-wrapper h2 span{  color: #BF0538 }
#two-in-one.section-wrapper h4{ color:  #929292}
#two-in-one.section-wrapper .col-3set{  margin-top: 190px  }
#two-in-one.section-wrapper .col-3set .col-2{ margin-top: 90px}
#two-in-one.section-wrapper .col-3set .col-1 .block-content{ text-align: center; width: 289px}
#two-in-one.section-wrapper div.facts-graph{  background: url(../images/graph/2in1-graph.png) no-repeat left top; width: 444px; height: 230px; position:absolute; margin-left: -5px; margin-top: 10px}
#two-in-one.section-wrapper div.facts-graph p{ margin-bottom: 15px}
#two-in-one.section-wrapper div.facts-graph h4, #two-in-one.section-wrapper div.facts-graph h6{ display: inline; line-height: 16px}
#two-in-one.section-wrapper div.facts-graph h6{ line-height: 11px; color: #999}
#two-in-one.section-wrapper div.facts-graph div{  padding: 11px 0 0 15px; width: 202px}


#five-step.section-wrapper{ background: url('../images/bg/bg1.jpg') no-repeat center }
#five-step.section-wrapper h2{ color: #586a07}
#five-step.section-wrapper .sub-title {margin: 0 0 0 0px}
#five-step.section-wrapper ul.list-step{ display: block; width: 325px; margin: 0 auto}
#five-step.section-wrapper ul.list-step li{display: block; width: 100%; overflow: hidden}
#five-step.section-wrapper ul.list-step li div.col-left{width: 35%; margin: 0 0 0 0; }
#five-step.section-wrapper ul.list-step li div.col-right{width: 65%; margin: 14px 0 0 0;  line-height: 18px;}
#five-step.section-wrapper ul.list-step li.last-child{ background: none }
#five-step.section-wrapper .col-3set{ margin-top: 115px}
#five-step.section-wrapper .col-3set .col-2{ text-align:center; margin-top: 420px; }
#five-step.section-wrapper .col-3set .col-3{ text-align:left; margin-top: 120px}
#five-step.section-wrapper .page-keyvisual{margin-top:76px}

#five-step.section-wrapper div.fivestep-coffee{ position: relative; width: 458px; padding-top: 160px; background: url('../images/fivestep-bean.png') no-repeat top center; height: 546px}
#five-step.section-wrapper div.fivestep-coffee li{ background: url('../images/fivestep-li.gif') no-repeat bottom center; padding-bottom: 45px}
#five-step.section-wrapper div.fivestep-coffee h2{ color: #A5C02E ; font-size: 18px; line-height: 20px}
#five-step.section-wrapper div.fivestep-coffee h5{  color: #A5C02E }
#five-step.section-wrapper div.fivestep-raspberry{ position: absolute; width: 458px; margin-top: -120px; padding-top: 141px; background:url('../images/fivestep-raspberry.png') no-repeat top center; height: 546px;margin-left: -58px}
#five-step.section-wrapper div.fivestep-raspberry li{ background:url('../images/fivestep-li2.gif') no-repeat bottom center; padding-bottom: 30px}
#five-step.section-wrapper div.fivestep-raspberry h2{  color: #cb204a; display:inline-block; float:left; font-size: 18px; line-height: 20px}
#five-step.section-wrapper div.fivestep-raspberry h5{  color: #cb204a }


#share.section-wrapper{ background: url('../images/bg/bg3.jpg') no-repeat center }
#share.section-wrapper h3,h4{ color: #fff }
#share.section-wrapper h4{ padding-left: 5px; margin-bottom: 5px}
#share.section-wrapper .col-3set{  margin-top: 176px  }
#share.section-wrapper .col-3set-fix{  margin-top: 44px }
#share.section-wrapper .col-3set .col-1{ width: 331px; text-align:center; padding-left: 90px }
#share.section-wrapper .col-3set .col-2{ width: 331px; text-align:center; margin: 0 3px }
#share.section-wrapper .col-3set .col-3{ width: 331px; text-align:center; padding-right: 90px}
#share.section-wrapper .share-log{ height: 30px; margin-top: 5px }
#share.section-wrapper .share-log .btn{ padding: 3px 26px; -moz-box-shadow: 0px 0px 3px #333; -webkit-box-shadow: 0px 0px 3px #333; box-shadow: 0px 0px 3px #333 }
#share.section-wrapper .share-log .btn2{ padding: 3px 26px; -moz-box-shadow: 0px 0px 3px #333; -webkit-box-shadow: 0px 0px 3px #333; box-shadow: 0px 0px 3px #333; margin-left: -10px }




#video.section-wrapper {background: url(../images/bg/video-bg.jpg) no-repeat center}
#video.section-wrapper h3{ color: #fff}
#video.section-wrapper .col-3set{ margin-top: 320px }
#video.section-wrapper .col-3set .col-2{  text-align: center; margin: 0 auto}


#sevendays.section-wrapper{background: url('../images/bg/bg4.jpg') no-repeat bottom}
#sevendays.section-wrapper h2{ color: #586a07 }
#sevendays.section-wrapper .col-3set{ margin-top: 162px  }
#sevendays.section-wrapper .col-3set .col-1{ margin-top: 140px  }
#sevendays.section-wrapper .col-3set .col-2{ margin-top: 115px  }
#sevendays.section-wrapper .page-middle-bg{ margin-top: 80px }
#sevendays.section-wrapper .img-circle{ position: relative; margin-left: -43px; background: url(../images/sevendays-circle.png) no-repeat top center; width: 383px; height: 383px}
#sevendays.section-wrapper  li{background: url(../images/li.png) no-repeat left top; padding-left: 16px;margin-left:-28px;margin-top:12px; color:#FFF}

#buynow.section-wrapper{ background: url('../images/bg/bg1.jpg') no-repeat center }
#buynow.section-wrapper p{ color: #777}
#buynow.section-wrapper h1 { line-height: 160px; letter-spacing: -2px ; font-size: 160px ;font-family: 'ApercuMedium' ,Arial, sans-serif; color: #A5C02E }
#buynow.section-wrapper h1 sup{ font-size: 85px; float:left; display:inline-block; padding-top: 10px }
#buynow.section-wrapper h4{ color:  #929292 ; margin-left: 55px}
#buynow.section-wrapper h3 { margin-bottom: 10px}
#buynow.section-wrapper h3 span{ color: #586a07; display:block}
#buynow.section-wrapper .col-3set{ margin-top: 250px}
#buynow.section-wrapper .col-3set .col-1{ padding-left: 55px; width: 345px }
#buynow.section-wrapper .page-middle-bg{ margin-top: 80px }
#buynow.section-wrapper .img-logo{ margin-left: 50px}
#buynow.section-wrapper .col-3set a.btn{margin:11px 0 0 0 }


.space{ height: 48px}
.space2{ height: 20px}


/* =Slider
----------------------------------------------- */
#slider{ background:url(../images/about-slider-bg.png) no-repeat left top; width: 413px; height: 413px; position:absolute; z-index: 99; margin-top: -15px}
#slider #slider-number{ position: absolute; color: #fff; display:block; background: url(../images/about-slider-number.png) no-repeat center; width: 66px; height: 66px; text-align:center; padding: 20px 0; margin-top: 40px; cursor: default; line-height: 65px}
#slider #slider-container{ position: absolute; margin-top: 135px}
#slider #slider-container li{ display: none; margin-left: 90px}
#slider #slider-container li.active{  display: block}
#slider #slider-container li h1{margin-top: 0px}
#slider #slider-container li h1.margin-fix{ margin-top: 17px}

#slider-contol{ position: relative; width: 680px; margin: 22px 0 22px -360px}
#slider-contol li{ padding-left: 362px; height: 23px; cursor: default; line-height: 22px}
#slider-contol li.child1{ color: #fff ; background: url(../images/slider/li_o.png) no-repeat right center}

#slider-contol li.child2{ background: url(../images/slider/li-1.png) no-repeat right center}
#slider-contol li.child3{ background: url(../images/slider/li-2.png) no-repeat right center}
#slider-contol li.child4{ background: url(../images/slider/li-3.png) no-repeat right center}



/* =Header
----------------------------------------------- */
#header  #logo { float:left}
#header  #menu { float:right; overflow: hidden;  margin-top: 36px ; color: #808080;display: none}
#header  #menu a{ color:#FFF}
#header  #menu li{ display: inline; margin: 5px; background: #B2C83A; padding:3px 15px; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; line-height: 25px}
#header  #menu li.white{ display: inline; margin: 5px; background: #FFF;padding:3px 15px;border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; color: #B2C83A}
#header  #menu li.white a{ color:#B2C83A}
#header  #menu li.white a:hover{ color:#FFF}
#header  #menu li:hover,#header  #menu li.white:hover{ background: #596915; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out }

#header  #menu #menu-lang{ padding:3px 10px; display: inline; margin: 5px; background: #FFF; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; color: #B2C83A}
#header  #menu #menu-lang a{ color:#B2C83A}
#header  #menu #menu-lang a:hover{ color: #FFF}
#header  #menu #menu-lang.white{ padding:3px 10px; display: inline; margin: 5px; background: #B2C83A; border-radius: 30px; -moz-border-radius: 30px; -webkit-border-radius: 30px; line-height: 25px}
#header  #menu #menu-lang.white a{ color: #FFF}
#header  #menu #menu-lang:hover,#header  #menu #menu-lang.white:hover{ background: #596915; -webkit-transition: all .4s ease-in-out; -moz-transition: all .4s ease-in-out; -o-transition: all .4s ease-in-out; -ms-transition: all .4s ease-in-out; transition: all .4s ease-in-out }



/* =Footer
----------------------------------------------- */

#footer h6{ color: #fff; display:inline-block; line-height: 22px; padding: 5px 0}
#footer #credit{ float: left }
#footer #social-icon{ float: right }
#footer #social-icon h6.label{ float: left}
#footer #social-icon a { margin: 0 5px 0 0 ;  background:#666; display: block; float: left; height: 23px; width: 23px; margin-top: 3px}

#footer #social-icon a.facebook {  background: url("../images/i-social-fb.png") no-repeat scroll top;margin-left: 8px}
#footer #social-icon a.facebook:hover {  background: url("../images/i-social-fb.png") no-repeat bottom}

#footer #social-icon a.twitter { background: url("../images/i-social-tt.png") no-repeat scroll top transparent }
#footer #social-icon a.twitter:hover { background: url("../images/i-social-tt.png") no-repeat scroll bottom transparent }

#footer #social-icon a.weibo { background: url("../images/i-social-wb.png") no-repeat scroll top transparent }
#footer #social-icon a.weibo:hover { background: url("../images/i-social-wb.png") no-repeat scroll bottom transparent }

#footer #social-icon a.pinterest { background: url("../images/i-social-pt.png") no-repeat scroll top transparent }
#footer #social-icon a.pinterest:hover { background: url("../images/i-social-pt.png") no-repeat scroll bottom transparent }

#footer #social-icon div.fb-like{  float: left; padding: 5px 10px; display:block; width: 80px; height: 15px; overflow:hidden}


/* =Button
----------------------------------------------- */

a.btn{ padding: 3px 23px; -moz-box-shadow: 0px 0px 3px #777; -webkit-box-shadow: 0px 0px 3px #777; box-shadow: 0px 0px 3px #777; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px}
a.btn:hover{ color:#FFF}

a.btn1{ background:url(../images/btn/btnbg1.jpg) repeat-x top;  color:#FFF }
a.btn1:hover{  background:url(../images/btn/btnbg1.jpg) repeat-x bottom  }
a.btn2{ background:url(../images/btn/btnbg2.jpg) repeat-x top; color:#47590A; margin-left: 2px}
a.btn2:hover{ background:url(../images/btn/btnbg2.jpg) repeat-x bottom }

a.playbtn{ background:url(../images/btn/video-playbtn.png) no-repeat center top; width: 102px; height: 100px; display:block; margin: 0 auto }
a.playbtn:hover{ background:url(../images/btn/video-playbtn.png) no-repeat center bottom }

a.btn-download { position: relative; float:right; display:block; background:url(../images/btn/sevendays-downloadbtn.png) no-repeat center top; color: #FFF; width: 99px; height: 56px; text-align:center; padding-top: 42px }
a.btn-download:hover { background:url(../images/btn/sevendays-downloadbtn.png) no-repeat center bottom; color: #fff }

a.btn-videothumb1{ background: url(../images/btn/video-thumb1.png) no-repeat top center; width: 331px; height: 189px; display:block }
a.btn-videothumb1:hover {  background: url(../images/btn/video-thumb1.png) no-repeat bottom center }
a.btn-videothumb2{ background: url(../images/btn/video-thumb2.png) no-repeat top center; width: 331px; height: 189px; display:block }
a.btn-videothumb2:hover {  background: url(../images/btn/video-thumb2.png) no-repeat bottom center }
a.btn-videothumb3{ background: url(../images/btn/video-thumb3.png) no-repeat top center; width: 331px; height: 189px; display:block }
a.btn-videothumb3:hover {  background: url(../images/btn/video-thumb3.png) no-repeat bottom center }


a.btn-mainvideo{ background: url(../images/btn/main-videobtn.png) no-repeat center top; width: 380px; height: 238px; display:block}
a.btn-mainvideo:hover{ background: url(../images/btn/main-videobtn.png) no-repeat center bottom}


.pp_overlay:hover{cursor:pointer; cursor: -webkit-zoom-out; cursor: -moz-zoom-out}


/* Response */
@media only screen and (min-width: 1px) and (max-width: 1500px) {
	a.sidebtn{display: none}
	a.footbtn{display: block;z-index: 1}
}