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

#newitem { position:relative; width:710px; margin:0 auto; }
#back_font{ word-wrap:break-word; word-break:break-all; position:absolute; left:-9999px; width:500px; padding-top:20px;}
#wrapper{ position:relative; left: 0px; top: 0px; z-index: 998; }

.block{ width:710px; position:relative; }
.block_back { width:710px; position:absolute; left:0px; top:0px;}

#vision{
	width: 710px;
	height: 613px;
	overflow: hidden;
}
#vision_img{
	height: 613px;
}
#black{
	background: #fafbfb;
	position: absolute;
	width: 710px;
	height: 613px;
	right: 0px;
	top: 0px;
	display: none;
}
#kv{
	position: absolute;
	width: 710px;
	height: 613px;
	left: 0px;
	top: 0px;
	display: none;
}
#product{
	position: absolute;
	width: 200px;
	height: 280px;
	left: 31px;
	top: 325px;
	display: none;
}
#word{
	position: absolute;
	width: 400px;
	height: 175px;
	left: 5px;
	top: 159px;
	display: none;
}
#about {
	background-image: url(../images/index_02.jpg);
	height: 419px;
	position: relative;
}


.content{ width:710px;}
#tip {
	background-image: url(../images/index_03.jpg);
	height: 487px;
	position: relative;
}
#Ingredient {
	background-image: url(../images/index_04.jpg);
	height: 635px;
}
#planning {
	background-image: url(../images/index_07.jpg);
	height: 830px;
}


.tip1 {
	background-image: url(../images/tip1.png);
	height: 135px;
	width: 315px;
	position: absolute;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	left: 306px;
	top: 78px;
}
.tip1:hover {
	background-image: url(../images/tip1_on.png);
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.tip2 {
	background-image: url(../images/tip2.png);
	height: 135px;
	width: 315px;
	position: absolute;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	left: 357px;
	top: 199px;
}
.tip2:hover {
	background-image: url(../images/tip2_on.png);
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}
.tip3 {
	background-image: url(../images/tip3.png);
	height: 135px;
	width: 315px;
	position: absolute;
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
	left: 345px;
	top: 318px;
}
.tip3:hover {
	background-image: url(../images/tip3_on.png);
	-o-transition: all 0.5s ease;
	-webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
}


/*intro*/
#intro {
	position: relative;
	height: 608px;
	background-image: url(../images/index_05.jpg);
}

#intro_p1{ position:absolute; left:435px; top:246px; width: 260px; height: 77px; }
#intro_p2{ position:absolute; left:9px; top:387px; width: 260px; height: 77px; }
#intro_p3{ position:absolute; left:9px; top:507px; width: 260px; height: 77px; }

/*感應區塊*/
#p_ctag1{
	position: absolute;
	width: 99px;
	height: 434px;
	left: 395px;
	top: 104px;
	z-index: 23;
	cursor: pointer;
}
#p_ctag2{
	position: absolute;
	width: 181px;
	height: 170px;
	left: 85px;
	top: 367px;
	z-index: 23;
	cursor: pointer;
}
#p_ctag3{
	position: absolute;
	width: 119px;
	height: 427px;
	left: 271px;
	top: 110px;
	z-index: 23;
	cursor: pointer;
}
#p_ctag4{
	position: absolute;
	width: 87px;
	height: 297px;
	left: 498px;
	top: 241px;
	z-index: 23;
	cursor: pointer;
}

/*彈出對話框*/
#pro_pop1{
	width: 324px;
	height: 194px;
	position: absolute;
	left: 98px;
	top: 104px;
	background-image: url(../images/step1.png);
}
#pro_pop2{
	width: 334px;
	height: 204px;
	position: absolute;
	left: 175px;
	top: 195px;
	background-image: url(../images/step2.png);
}
#pro_pop3{
	width: 334px;
	height: 204px;
	position: absolute;
	left: 342px;
	top: 101px;
	background-image: url(../images/step3.png);
}
#pro_pop4{
	width: 324px;
	height: 194px;
	position: absolute;
	left: 188px;
	top: 110px;
	background-image: url(../images/step4.png);
}
#pro_pop1, #pro_pop2, #pro_pop3, #pro_pop4{opacity: 0}


/*blogger*/
#blogger {
	position: relative;
	height: 1760px;
	background-image: url(../images/index_06.jpg);
}
#blogger01 { position:absolute; overflow:hidden; left:0px; top:140px;}
#blogger02 { position:absolute; overflow:hidden; left:237px; top:170px;}
#blogger03 { position:absolute; overflow:hidden; left:474px; top:140px;}

#event{
	position: relative;
	height: 697px;
	background-image: url(../images/index_08.jpg);
}
.share_btn {
	height: 81px;
	width: 358px;
	position: absolute;
	left: 171px;
	top: 498px;
}
.fb_btn {
	height: 40px;
	width: 167px;
	position: absolute;
	left: 177px;
	top: 592px;
}
.official_btn {
	height: 40px;
	width: 167px;
	position: absolute;
	left: 357px;
	top: 592px;
}

#event_icon{ position:absolute; width:195px; height:45px; left:359px; top:354px;}
#coupon{ height:460px;}

img { border:0;}
area{ outline:none;}