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


/* clear */
.clearfix {
  *zoom: 1;
}

.clearfix:before,
.clearfix:after {
  display: table;
  line-height: 0;
  content: "";
}

.clearfix:after {
  clear: both;
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}


/* common ========================
================================== */
html,body{ font-family:"微軟正黑體",Arial, Helvetica, sans-serif; color:#595959; position: relative; display: block; width: 100%; height: 100%;}

.l-body{ position: relative; width: 100%; min-width: 1080px; height: 100%; min-height:870px; overflow:hidden;}
.wrapper{ position: relative; display: block; margin: 0 auto; width: 1080px; height:100%;}

.Landingpage .l-body{ background:url("../images/landingpage.jpg") center top no-repeat; }

/*.Landingpage .btn-logo{ position: absolute; display: block; width: 339px; height: 339px; background:url(../images/landingpage-colorgreen.png) 0 0 no-repeat;}
.Landingpage .btn-logo a{ position: relative; display: block; width:250px; height: 100px; margin: 120px auto;}*/


.Landingpage .btn-logo-brion{ left: 353px; top:373px;}
.Landingpage .btn-logo-global{ left: 193px; top:211px;}
.Landingpage .btn-logo-herbiotek{ left: 675px; top:374px;}
.Landingpage .btn-logo-natureceutica{ left: 675px; top:50px;}
.Landingpage .btn-logo-qbow{ left: 31px; top:373px;}
.Landingpage .btn-logo-sunten{left: 353px; top:50px; }
.Landingpage .btn-logo-usa{ left: 515px; top:211px;}
.Landingpage .btn-logo-jp{ left: 835px; top:211px;}
.Landingpage .btn-logo-jp2{ left: 512px; top:535px;}

.Landingpage .footer{ position: absolute; display: block; width: 850px; height: 30px; bottom: 0; right: 0; text-align: center; font-size: 12px; letter-spacing: 0px; color: #595959;}


.Landingpage .btn-logo{ position: absolute; display: block; width: 306px; height: 306px;}
.Landingpage .btn-logo .btn-bg{ position: absolute; display: block; width: 306px; height: 306px; left: 0; top: 0;}
.Landingpage .btn-logo .bg-green{ background:url("../images/landingpage-colorgreen.png") 0 0 no-repeat;}
.Landingpage .btn-logo .bg-yellow{ display: none; background:url("../images/landingpage-coloryellow.png") 0 0 no-repeat;}
.Landingpage .btn-logo a{ position: relative; display: block; width:225px; height: 180px; top:63px; left:40px; }
.Landingpage .btn-logo a .btn-logoimg{ position: absolute; display: block; width:225px; height:180px; top:0px; left:0px; padding: 45px 0; }
.Landingpage .btn-logo a .btn-logoimg img { width:100%; height:auto; }

.Landingpage .btn-logo.on .bg-green{ display: block; -moz-animation:myMove1 0.5s 1; -webkit-animation:myMove1 0.5s 1; -o-animation:myMove1 0.5s 1; -ms-animation:myMove1 0.5s 1; }

@-moz-keyframes myMove1{
	from { opacity:100; -moz-transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1);}
	to { opacity:0; }
}
@-webkit-keyframes myMove1{
	from {  opacity:100; -webkit-transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1);}
	to {  opacity:0; }
}
@-o-keyframes myMove1{
	from {  opacity:100; -o-transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1);}
	to {  opacity:0; }
}
@-ms-keyframes myMove1{
	from {  opacity:100; -ms-transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1);}
	to {  opacity:0; }
}


.Landingpage .btn-logo.on .bg-yellow{ display: block;  -moz-animation:myMove2 0.5s 1; -webkit-animation:myMove2 0.5s 1; -o-animation:myMove2 0.5s 1; -ms-animation:myMove2 0.5s 1;}

@-moz-keyframes myMove2{
	from { opacity:0; -moz-transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1);}
	to {}
}
@-webkit-keyframes myMove2{
	from {  opacity:0; -webkit-transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1);}
	to { }
}

@-o-keyframes myMove2{
	from { opacity:0; -o-transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1);}
	to {}
}
@-ms-keyframes myMove2{
	from {  opacity:0; -ms-transform:rotateX(0deg) rotateY(180deg) rotateZ(0deg) scale(1);}
	to { }
}