@charset "UTF-8";
/* CSS Document */

/*===== RESET =====*/
*{ margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

a{  
	margin: 0;
	padding: 0;
	font-size: 100%;
	background: transparent;
	outline: none; /* for Firefox Google Chrome  */
	behavior: expression(this.onFocus=this.blur()); /* for IE */
	text-decoration: none;
}
	  
img{ border: 0px;}
	  
ol,ul,li{ list-style-type: none; text-transform: none; }
input, select { vertical-align: middle; }
button { outline: none;}


/*clean both*/
.clear{ width: 0px; height: 0px; clear: both; *display: inline;/*IE only*/}

body{	
	font-family: "Noto Sans", "Noto Sans CJK TC", "Noto Sans TC", "Arial" sans-serif;
	background:#000; 
	color:#333;
}

/* width */
::-webkit-scrollbar { width: 10px; }

/* Track */
::-webkit-scrollbar-track { background: black; }
 
/* Handle */
::-webkit-scrollbar-thumb { background: black; }

/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: black; }

.wrapper{ width: 100%;}

/*===== NEW PRODUCT =====*/
.new_pd_full{ 
	background: url(../img/bg_new_pd.jpg) repeat center top;
	background-size: auto;
	background-color: black;
	position: fixed;
	overflow-y: scroll;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 20;
}
.new_pd{
	width: 1400px;
	height: 900px;
	margin: 0 auto;
	position: relative;
}
.new_pd_btn{
	position: absolute;
	bottom: 351px;
	right: 362px;
	cursor: pointer;
}
.new_pd_close{
	position: absolute;
	bottom: 140px;
	right: 50%;
	margin-right: -13px;
	cursor: pointer;
}


/*===== LANDING =====*/
.landing_full{ 
	background-image: url(../img/bg_black.png), url(../img/bg_landing.jpg);
	background-repeat: repeat-x, no-repeat;
	background-position: center bottom, center top;
	background-size: auto, auto;
	animation: landing_bg 1s ease-out 2;
	-webkit-animation: landing_bg 1s ease-out 2;
	-mos-animation: landing_bg 1s ease-out 2;
}
@keyframes landing_bg{
	0%{ filter: brightness(60%);}
	5%{ filter: brightness(120%);}
	10%{ filter: brightness(60%);}
	15%{ filter: brightness(120%);}
	20%{ filter: brightness(60%);}
	25%{ filter: brightness(120%);}
	100%{ filter: brightness(100%);}
}
.landing{
	width: 1400px;
	height: 900px;
	margin: 0 auto;
	position: relative;
}
.landing_logo{
	position: absolute;
	top: 90px;
	left: 212px;
	z-index: 10;
}
.landing_water{
	position: absolute;
	top: 0px;
	right: -143px;
	opacity: 0;
/*
	animation: name duration timing-function delay iteration-count direction;
	animation: water 1s ease-out 3s;
	-webkit-animation: water 1s ease-out 3s;
	-mos-animation: water 1s ease-out 3s;
*/
}
.landing_beans2{
	position: absolute;
	top: 498px;
	right: 206px;
	opacity: 0;
}
.landing_product{
	position: absolute;
	top: 207px;
	right: 154px;
	opacity: 0;
}
.landing_beans1{
	position: absolute;
	top: 164px;
	right: 17px;
	opacity: 0;
}
.landing_txt{
	position: absolute;
	top: 194px;
	left: 59px;
	opacity: 0;
}
.landing_gift{
	position: absolute;
	top: 665px;
	left: 80px;
	opacity: 0;
	cursor: pointer;
}
.landing_gift:hover{
	filter:brightness(120%);
}
.gift_full{ 
	background-color: black;
	position: fixed;
	overflow-y: scroll;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	z-index: 20;
}
.gift{
	width: 1400px;
	height: 900px;
	margin: 0 auto;
	position: relative;
	padding-bottom: 200px;
}
.gift_close{
	position: absolute;
	top: 60px;
	right: 60px;
	cursor: pointer;
}

/*===== STORY =====*/
.story_full{ 
	background-image: url(../img/bg_black.png), url(../img/bg_story.jpg);
	background-repeat: repeat-x, no-repeat;
	background-position: center bottom, center top;
	background-size: auto, cover;
}
.story{
	width: 1400px;
	height: 4013px;
	margin: 0 auto;
	position: relative;
}
.story_img1{
	position: absolute;
	top: 50px;
	left: 347px;
}
.story_img2{
	position: absolute;
	top: 447px;
	right: 80px;
}
.story_img3{
	position: absolute;
	top: 897px;
	right: 378px;
}
.story_img4{
	position: absolute;
	top: 1394px;
	left: 150px;
}
.story_img5{
	position: absolute;
	top: 1846px;
	left: 454px;
}
.story_img6{
	position: absolute;
	top: 2340px;
	right: 80px;
}
.story_img7{
	position: absolute;
	top: 2790px;
	right: 378px;
}
.story_img8{
	position: absolute;
	top: 3287px;
	left: 150px;
}
.story_img9{
	position: absolute;
	top: 3736px;
	left: 454px;
}
.story_txt1{
	position: absolute;
	top: 109px;
	right: 289px;
}
.story_txt2{
	position: absolute;
	top: 336px;
	left: -153px;
}
.story_txt3{
	position: absolute;
	top: 987px;
	left: 78px;
}
.story_txt4{
	position: absolute;
	top: 1283px;
	right: 106px;
}
.story_txt5{
	position: absolute;
	top: 2229px;
	left: -153px;
}
.story_txt6{
	position: absolute;
	top: 2884px;
	left: 75px;
}
.story_txt7{
	position: absolute;
	top: 3176px;
	right: 133px;
}

/*===== PRODUCT LIST =====*/
.product_list{ 
	background-image: url(../img/bg_black2.png), url(../img/bg_product.jpg);
	background-repeat: repeat-x, no-repeat;
	background-position: center top, center top;
	background-size: auto, auto;
	animation: product_bg 3s ease-out infinite;
	-webkit-animation: product_bg 3s ease-out infinite;
	-mos-animation: product_bg 3s ease-out infinite;
}
@keyframes product_bg{
	0%{ filter: brightness(100%);}
	5%{ filter: brightness(105%);}
	10%{ filter: brightness(100%);}
	15%{ filter: brightness(105%);}
	20%{ filter: brightness(100%);}
	25%{ filter: brightness(105%);}
	100%{ filter: brightness(90%);}
}
.product_list{
	width: 1400px;
	height: 1017px;
	margin: 0 auto;
	position: relative;
}
.product_black185{
	position: absolute;
	top: 456px;
	left: 147px;
}
.product_black275{
	position: absolute;
	top: 383px;
	left: 420px;
}
.product_kenya{
	position: absolute;
	top: 549px;
	left: 593px;
}
.product_mandheling{
	position: absolute;
	top: 550px;
	left: 791px;
}
.product_papua{
	position: absolute;
	top: 456px;
	left: 967px;
}
.product_ethiopia{
	position: absolute;
	top: 456px;
	left: 695px;
}
.product_black185:hover, .product_black275:hover, .product_kenya:hover, .product_mandheling:hover, .product_papua:hover, .product_ethiopia:hover{
	filter:brightness(120%);
}
.btn_box{ 
	width: 578px;
	margin: 0 auto;
	padding-top: 915px;
}
.btn_box li{
	display: inline-block;
}
.btn_box li:first-child{
	margin-right: 90px;
}
.btn_box li:hover{
	filter:brightness(120%);
}

/*===== FLOAT =====*/
.float_pd{ 
	width: 175px;
	height: 196px;
	position: absolute;
	top: 380px;
	left: 30px;
	padding: 0px; 
	z-index: 500;
}

/*===== COPYRIGHT =====*/
.copyright{
	width: 1400px;
	height: 70px;
	margin: 0 auto;
	text-align: center;
}


/*===== PRODUCT =====*/
.black185_full{ 
	background: url(../img/bg_black185.jpg) center bottom no-repeat;
	background-size: cover;
}
.black275_full{ 
	background: url(../img/bg_black275.jpg) center top no-repeat;
	background-size: cover;
}
.blackkenya_full{ 
	background: url(../img/bg_blackkenya.jpg) center top no-repeat;
	background-size: cover;
}
.blackmandheling_full{ 
	background: url(../img/bg_blackmandheling.jpg) center bottom no-repeat;
	background-size: cover;
}
.blackpapua_full{ 
	background: url(../img/bg_blackpapua.jpg) center bottom no-repeat;
	background-size: cover;
}
.blackethiopia_full{ 
	background: url(../img/bg_blackethiopia.jpg) center top no-repeat;
	background-size: cover;
}
.product{
	width: 1400px;
	height: 900px;
	margin: 0 auto;
	position: relative;
}
.arrow_left{
	position: absolute;
	top: 0px;
	left: 0px;
}
.arrow_right{
	position: absolute;
	top: 0px;
	right: 0px;
}
.btn_pd{ 
	width: 578px;
	margin: 0 auto;
	position: absolute;
	top: 744px;
	right: 8px;
}
.btn_pd li{
	display: inline-block;
}
.btn_pd li:first-child{
	margin-right: 40px;
}
.btn_pd li:hover, .video_black:hover{
	filter:brightness(120%);
}
.video_black{
	position: absolute;
	top: 690px;
	left: 60px;
}
.limited{ 
	position: absolute;
	top: 100px;
	left: 60px;
}
.pd_black{
	position: absolute;
	top: 0px;
	left: 0px;
}
.txt_black185{
	position: absolute;
	top: 17px;
	right: 3px;
}
.txt_black275{
	position: absolute;
	top: 1px;
	right: 13px;
}
.txt_blackkenya{
	position: absolute;
	top: 17px;
	right: 13px;
}
.txt_blackmandheling{
	position: absolute;
	top: 17px;
	right: 13px;
}
.txt_blackpapua{
	position: absolute;
	top: 17px;
	right: 13px;
}

/*===== FORM =====*/
.form_full{ 
	background: url(../img/bg_form.jpg) center top no-repeat;
}
.form{
	width: 1400px;
	height: 900px;
	margin: 0 auto;
}
.fillform{ 
	width: 754px;
	overflow: hidden;
	margin-left: 656px;
	padding-top: 20px;
}
.fillform form{
	padding-left: 220px;
	margin-top: -13px;
}
.fillform input{
	width: 375px;
	height: 55px;
	font-size: 16px;
	color:#cccccc;
	letter-spacing: 2px;
	background: url(../img/bg_input.png) center top no-repeat;
	padding: 5px 25px;
	margin: 0;
	border: none;
	border-radius: 0;
	-webkit-appearance: none;
}
.fillform input:focus{
	outline: none;
}
.fillform input._error{
	background: url(../img/bg_input_error.png) center top no-repeat;
}
.fillform input::placeholder{
	color:#cccccc;
	opacity:1;
}
.fillform input[type=checkbox] {
	margin: 0;
	padding: 0;
}
.fillform .form_error1, .fillform .form_error2, .fillform .form_error3, .fillform .form_error4, .fillform .form_error5{
	display: block;
	width: auto;
	height: 13px;
	margin: 7px auto 10px auto;
	background-repeat: no-repeat;
	background-position: left center;
	opacity: 0;
}
.fillform .form_error1{
	background-image: url(../img/txt_formerror1.png);
}
.fillform .form_error2{
	background-image: url(../img/txt_formerror2.png);
}
.fillform .form_error3{
	background-image: url(../img/txt_formerror3.png);
}
.fillform .form_error4{
	background-image: url(../img/txt_formerror4.png);
}
.fillform .form_error5{
	background-image: url(../img/txt_formerror5.png);
}
.accept{
	width: auto;
	height: 51px;
	margin: -2px auto 0 auto;
	font-size: 0px;
	color: transparent;
}
.btn_agree, .btn_rule{
	background-repeat: no-repeat;
	margin: 0;
	float: left;
}
.btn_agree{
	width: 290px;
	height: 51px;
	background-image: url(../img/txt_form1_1.png);
}
.btn_agree._disagree{
	background-image: url(../img/txt_form1_3.png);
}
.btn_rule{
	width: 86px;
	height: 51px;
	background-image: url(../img/txt_form1_2.png);
	cursor: pointer;
}
.btn_submit{
	width: 240px;
	height: 55px;
	margin-top: 39px;
	padding-left: 287px;
}

/*===== ACTIVITY =====*/
.activity_full{ 
	background-color: black;
	position: fixed;
	overflow-y: scroll;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
}
.activity{
	width: 1400px;
	height: 900px;
	margin: 0 auto;
	position: relative;
	padding-bottom: 300px;
}
.activity_close{
	position: absolute;
	top: 60px;
	right: 60px;
	cursor: pointer;
}

/*===== THANKS =====*/
.thanks_full{ 
	background-image: url(../img/bg_black.png), url(../img/bg_thanks.jpg);
	background-repeat: repeat-x, no-repeat;
	background-position: center bottom, center top;
	background-size: auto, auto;
}
.thanks{
	width: 1400px;
	height: 830px;
	margin: 0 auto;
	position: relative;
}
.thanks_logo{
	position: absolute;
	top: 90px;
	left: 212px;
	z-index: 10;
}
.thanks_txt{
	position: absolute;
	top: 144px;
	left: 0px;
}
.thanks_share{
	position: absolute;
	top: 456px;
	left: 80px;
}
.thanks_btn1{
	position: absolute;
	top: 592px;
	left: 146px;
}
.thanks_btn2{
	position: absolute;
	top: 677px;
	left: 146px;
}