@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: 612px;
	overflow: hidden;
}
#vision_img{
	height: 612px;
}
#black{
	position: absolute;
	width: 710px;
	height: 612px;
	right: 0px;
	top: 0px;
	display: none;
	background-color: #FFFFFF;
}
#kv{
	position: absolute;
	width: 710px;
	height: 612px;
	left: 0px;
	top: 0px;
	/* [disabled]display: none; */
}
#product{
	position: absolute;
	width: 200px;
	height: 280px;
	left: 31px;
	top: 325px;
	display: none;
}
#txt {
	position: absolute;
	width: 365px;
	height: 212px;
	left: 43px;
	top: 345px;
	/* [disabled]display: none; */
	background-image: url(../images/txt.png);
}

#word{
	position: absolute;
	width: 476px;
	height: 170px;
	left: 0px;
	top: 179px;
	/* [disabled]display: none; */
	background-image: url(../images/tit.png);
}
#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: 250px;
	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: 302px;
	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: 291px;
	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: 670px;
	background-image: url(../images/index_07.jpg);
}
.trial_btn {
	background-image: url(../images/trial_btn.png);
	height: 55px;
	width: 169px;
	position: absolute;
	left: 272px;
	top: 538px;
}

.blogger1 {
	background-image: url(../images/blogger1.png);
	height: 166px;
	width: 163px;
	position: absolute;
	left: 25px;
	top: 205px;
	-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;
}
.blogger1:hover {
	background-image: url(../images/blogger1_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;
}
.blogger2 {
	background-image: url(../images/blogger2.png);
	height: 166px;
	width: 163px;
	position: absolute;
	left: 191px;
	top: 177px;
	-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;
}
.blogger2:hover {
	background-image: url(../images/blogger2_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;
}
.blogger3 {
	background-image: url(../images/blogger3.png);
	height: 166px;
	width: 163px;
	position: absolute;
	left: 356px;
	top: 147px;
	-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;
}
.blogger3:hover {
	background-image: url(../images/blogger3_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;
}
.blogger4 {
	background-image: url(../images/blogger4.png);
	height: 166px;
	width: 163px;
	position: absolute;
	left: 521px;
	top: 120px;
	-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;
}
.blogger4:hover {
	background-image: url(../images/blogger4_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;
}
.blogger5 {
	background-image: url(../images/blogger5.png);
	height: 166px;
	width: 163px;
	position: absolute;
	left: 26px;
	top: 385px;
	-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;
}
.blogger5:hover {
	background-image: url(../images/blogger5_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;
}
.blogger6 {
	background-image: url(../images/blogger6.png);
	height: 166px;
	width: 163px;
	position: absolute;
	left: 191px;
	top: 355px;
	-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;
}
.blogger6:hover {
	background-image: url(../images/blogger6_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;
}
.blogger7 {
	background-image: url(../images/blogger7.png);
	height: 166px;
	width: 163px;
	position: absolute;
	left: 356px;
	top: 327px;
	-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;
}
.blogger7:hover {
	background-image: url(../images/blogger7_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;
}
.blogger8 {
	background-image: url(../images/blogger8.png);
	height: 166px;
	width: 163px;
	position: absolute;
	left: 521px;
	top: 300px;
	-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;
}
.blogger8:hover {
	background-image: url(../images/blogger8_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;
}
#event{
	position: relative;
	height: 627px;
	background-image: url(../images/index_08.jpg);
}
.share_btn {
	height: 81px;
	width: 358px;
	position: absolute;
	left: 171px;
	top: 448px;
}
.fb_btn {
	height: 40px;
	width: 167px;
	position: absolute;
	left: 177px;
	top: 542px;
}
.official_btn {
	height: 40px;
	width: 167px;
	position: absolute;
	left: 357px;
	top: 542px;
}

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

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