body{
	font-family:"century gothic","微軟正黑體",  arial,helvetica;
	color:#000; background:#000; line-height:1.8; overflow-x: hidden }
a{ color:#fff;}	
.space{ clear:both; height:0 ; line-height:0}
.loading{position:fixed ;top:0;z-index:999999; background: url(../images/bg_losding_03.jpg) ; width:100%; height:100%; box-shadow: inset 0 0 200px #000}
.loading div{ width:140px; height:140px; position:fixed ;top:0;
z-index:999999;  overflow:hidden; top:42%; left:42%; margin-left:70px;}
.loading div img{ -webkit-animation: loading step-end 2.5s; animation: loading step-end 2.5s; max-width: none; width: auto;}


.section{display: table; width: 100%; text-align:center }
.table-cell{ display: table-cell;width: 100%; height: 100%; vertical-align: middle;}
.header{position:fixed;top:0;left:0;z-index:999;width: 100%; background:#333; }
.header .logo{padding:20px 0; text-align:center}
.header ul{ text-align:center;}
.header ul li { display:inline-block;margin: 5px 10px;}
.header ul li a{ display:inline-block; padding:5px 10px; color:#666; text-decoration:none;}
.header ul li a:hover,.header ul li a:active, .header ul li.active a{color:#eb0f00;}
nav{position:fixed;bottom:0;left:0;z-index: 70;width: 100%;background:#333; text-align:center; color:#ccc}
nav li{ text-align:center; display:inline-block;  }

nav li a{color:#ccc; display: inline-block; padding:20px 30px ; transition:all 2s}
nav li a:hover,.current { color:#D4B677}

.index .kv{ background:url(../images/kv.jpg) center no-repeat; height:711px; position:relative }
.index h1{ position:absolute; left:50%; margin-left:210px; top:100px;}
.index h2{ position:absolute; left:50%; margin-left:300px; top:390px;}

.intro{ color:#ccc;}
.intro h2{ margin:20px 0;}
.btn{ background:url(../images/bg_btn.jpg) center; display:inline-block; padding:8px 50px; cursor:pointer; color:#fff; margin-top:20px; transition:all 1s }

.btn:hover{ -webkit-filter:brightness(200%); }

.bg{ background:url(../images/bg.jpg) 100%; padding:50px; max-width:1100px; margin:0 auto; min-height:560px}
.bg h2{ font-size:24px; }
.price{ font-size:95%; margin-bottom:10px;}
.color li{ display:none;}
.color li.active{ display:block; animation:fade 1s; -webkit-animation:fade 1s }
.color li span{ color:#000; font-weight:bold; display:inline-block; margin-right:10px;}

/*eyes*/

.eyes .product_pics{ width:784px; margin:10px auto 30px auto;}
.eyes .product_pics li{ width:105px; height:200px; background:url(../images/img_eyes_01.png) -5px 5px; float:left;}
.eyes .product_pics li.e2{ background-position-x:-110px}
.eyes .product_pics li.e3{ background-position-x:-215px}
.eyes .product_pics li.e4{ background-position-x:-320px}
.eyes .product_pics li.e5{ background-position-x:-425px}
.eyes .product_pics li.e6{ background-position-x:-530px}
.eyes .product_pics li.e7{ background-position-x:-635px}
.product_pics li span{ display:inline-block; width:8px; height:8px; background:#ccc; border-radius:5px; box-shadow:inset 1px 1px 3px #555; display:none; animation: bigger 1s; -webkit-animation: bigger 1s}
.product_pics li.active span{ display:inline-block} 

.dec{ margin-top:20px;}
.dec h3, .dec p{ color:#6c5d4a}
.dec h3 { font-weight:bold; }
.dec p{ font-size:95%}
.adv,.a_dec { margin-top:20px;float:left;  }
.adv li {  margin-bottom:10px; width:450px; cursor:pointer}
.adv li.active h4,.adv li:hover h4{ background:#555}
.adv li.active span:before{content:'-'}
.adv li span:before{content:'+'}
.adv li span{ float:right}
.adv li h4{ background:#888; color:#fff; padding:10px 15px; text-align:left; transition:all 1s; -webkit-transition:all 1s;}
.a_dec li {text-align:left; display:none; color:#555}
.a_dec li p{ color:#555}
.a_dec { margin-left:30px;width:450px;}
.special{ margin:0 auto;  width:950px;}
.a_dec li.active{ display: block;animation:fade 1s; -webkit-animation:fade 1s }

/*eyebrow*/
.eyebrow .product_pics{width:840px; margin:10px auto 30px auto;}
.eyebrow .product_pics li{ background:url(../images/img_colors_01.png) 0 -65px; width:379px; height:50px; float:left; margin-right:30px; margin-top:10px;}
.eyebrow .product_pics li.e2{ background-position-y:-116px;}
.eyebrow .product_pics li.e3{ background-position-y:-165px;}
.eyebrow .product_pics li.e4{ background-position-y:-216px;}
.eyebrow .product_pics li span{ float:left; margin-top:22px;}
.a_dec span{ font-weight:bold; display:inline-block; margin-right:10px;}
.adv li h4.tips, .t-wrap .tips{ background:#fff; color:#7e6e5c; display:inline-block; float:right; border:1px solid #7e6e5c;padding:5px 15px;}
.adv li h4.tips:hover,.t-wrap .tips:hover, .t-wrap .tips.active{background:#7e6e5c; color:#fff}

/*Cheeks*/
.cheeks .product_pics{width:550px; margin:10px auto 20px auto;}
.cheeks .product_pics li{ width:107px; height:215px; background:url(../images/img_cheeks_01.png) -5px 5px; float:left;}
.cheeks .product_pics li.c2{background-position-x:-106px;}
.cheeks .product_pics li.c3{background-position-x:-210px;}
.cheeks .product_pics li.c4{background-position-x:-314px;}
.cheeks .product_pics li.c5{background-position-x:-418px;}
.t-wrap .tips{ float:none; margin-top:15px; cursor:pointer; margin-bottom:10px;}
.t-wrap { height:50px;}
.t-wrap  p{ display:none;}

/*gloss*/
.gloss .product_pics{width:450px; margin:10px auto 30px auto;}
.gloss .product_pics li{ width:107px; height:200px; background:url(../images/img_gloss_01.png) 0 5px; float:left;}
.gloss .product_pics li.g2{background-position-x:-106px;}
.gloss .product_pics li.g3{background-position-x:-212px;}
.gloss .product_pics li.g4{background-position-x:-318px;}
.gloss h2{ margin-top:40px;}

/*nails*/
.nails .product_pics{width:430px; margin:10px auto 30px auto;}
.nails .product_pics li{ width:85px; height:200px; background:url(../images/img_nail_01.png) 0 5px; float:left;}
.nails .product_pics li.g2{background-position-x:-83px;}
.nails .product_pics li.g3{background-position-x:-165px;}
.nails .product_pics li.g4{background-position-x:-246px;}
.nails .product_pics li.g5{background-position-x:-328px;}
.nails h2{ margin-top:50px;}

/*video*/
.video p, .game p, .blogger p{ color:#666; padding:10px 0 }

/*slot*/

.container {margin:0 auto;width:675px; }
.slot-wrapper { padding-top:35px; padding-left:10px; background:url(../images/bg_game.jpg); height:260px; margin-top:20px;}
.slot {
	background:url("../images/reel_normal.png") repeat-y #fff; /*Taken from http://www.swish-designs.co.uk*/
	width:188px;
	height:188px;
	float:left;
    box-shadow:inset 0 0 50px #000;
	background-position:0 4px;
	border-radius:20px;
	margin:15px; 
}
.motion {
	background:url("../images/reel_blur.png") repeat-y #eee; /*Taken from http://www.swish-designs.co.uk*/
}
button {width:188px; height:54px;
	font-size:24px;
	cursor:pointer;
	background: url(../images/bg_start.jpg); display: inline-block; margin-top:20px;  
	color:#fff;
	border:none; 
}
#result {margin:20px 0;font-size:24px;height:22px; font-weight:bold}
#result span{ font-weight: normal;font-size:20px; animation:fade 2s ; -webkit-animation:fade 2s ;}
#result a{ text-decoration:underline; color:#B03436}
.sent{ border:none; margin-top:2px; font-size:18px; }
input.sent {-webkit-appearance: none;}
/*form*/
.game{ position:relative}
.form{ position:absolute; top:180px; left:50%; background:#a49e99 ;width:700px; margin-left:-400px; padding:20px 50px;box-shadow:inset 0 0 200px #000; display:none; }
.form p{ width:500px; text-align:left; margin:0 auto; color:#fff; font-size:18px;}
.form p span{ display:inline-block; margin-right:15px; width:60px;}
.form p .input_l{ background:none; border-bottom: solid 2px #fff; border-top:none; border-right:none; border-left:none; width:400px;} 
.form p.check{font-size:15px; text-align:center}
.form p.check a{ color:#fff; text-decoration:underline}
.form p.warn{ font-size:13px; color:#eee; text-align:center}
.product_nav{ display:none;}
.product_nav{ position:absolute; bottom:88px; background:rgba(0,0,0,.6); width:100%; left:0; padding-top:15px;}
.product_nav li a{ font-size:12px; padding:15px; }
.product_nav li.nav01 a{ background:url(../images/menu_eyes_01.png) center top  no-repeat}
.product_nav li a span{ display:inline-block; margin-top:55px;}
.product_nav li.nav02 a{ background:url(../images/menu_colors_01.png)  center 10px no-repeat}
.product_nav li.nav03 a{ background: url(../images/menu_cheeks_01.png) center -5px no-repeat}
.product_nav li.nav04 a{ background: url(../images/menu_gloss_01.png)  center top no-repeat}
.product_nav li.nav05 a{ background: url(../images/menu_nail_01.png)  center 5px no-repeat}

/* blogger*/
.blogger{ position:relative}
.blogger li{ display:inline-block; padding:20px 10px; background:#222; color:#ddd;  margin-right:-5px; }
.blogger li div{ box-shadow:inset 0 0 100px #000; width:283px; height:283px; background:url(../images/b_01.jpg); transition:all 1s;-webkit-transition:all 1s}
.blogger li div:hover{ box-shadow:none;}
.blogger li div.b2{background:url(../images/b_02.jpg)}
.blogger li div.b3{background:url(../images/b_03.jpg)}
.blogger li h3{ margin-top:5px;}
.blogger li a{ font-size:83%; text-decoration:underline; color:#909090}
.blogger .icon1{ position:absolute; top:130px; left:120px; animation:ro 1s infinite alternate; -webkit-animation:ro 1s infinite alternate; }
.blogger .icon2{ position:absolute; top:480px; right:100px }

::-webkit-input-placeholder { /* WebKit, Blink, Edge */
    color:    #000;
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
   color:    #000;
   opacity:  1;
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
   color:    #000;
   opacity:  1;
}
:-ms-input-placeholder { /* Internet Explorer 10-11 */
   color:    #000;
}


/*animate*/

@keyframes ro{
from { transform:rotate(0); }
to { transform:rotate(15deg); }
}
@-webkit-keyframes ro {
from { -webkit-transform:rotate(0); }
to { -webkit-transform: rotate(15deg); }
}
@-moz-keyframes ro {
from { -moz-transform:rotate(0); }
to { -moz-transform:rotate(15deg); }
}
@-o-keyframes ro{
from { -o-transform: rotate(0); }
to { -o-transform: rotate(15deg); }
}


@keyframes bigger{
from { transform: scale(0,0); }
to { transform: scale(1,1); }
}
@-webkit-keyframes bigger {
from { -webkit-transform: scale(0,0); }
to { -webkit-transform: scale(1,1); }
}
@-moz-keyframes bigger {
from { -moz-transform:scale(0,0); }
to { -moz-transform:scale(1,1); }
}
@-o-keyframes bigger {
from { -o-transform: scale(0,0); }
to { -o-transform: scale(1,1); }
}

@keyframes fade {
from { opacity: 0;  }
to { opacity: 1; }
}
@-webkit-keyframes fade {
from { -webkit-opacity:0; }
to { -webkit-opacity: 1; }
}
@-moz-keyframes fade {
from { -moz-opacity: 0; }
to { -moz-opacity: 1; }
}
@-o-keyframes fade {
from { -o-opacity: 0; }
to { -o-opacity: 1; }
}


@keyframes loading { 2.17% { transform: translate3d(-1960px, 0, 0); }
  4.35% { transform: translate3d(-1960px, -140px, 0); }
  6.52% { transform: translate3d(-1820px, -140px, 0); }
  8.7% { transform: translate3d(-1680px, -140px, 0); }
  10.87% { transform: translate3d(-1540px, -140px, 0); }
  13.04% { transform: translate3d(-1400px, -140px, 0); }
  15.22% { transform: translate3d(-1260px, -140px, 0); }
  17.39% { transform: translate3d(-1120px, -140px, 0); }
  19.57% { transform: translate3d(-980px, -140px, 0); }
  21.74% { transform: translate3d(-840px, -140px, 0); }
  23.91% { transform: translate3d(-700px, -140px, 0); }
  26.09% { transform: translate3d(-560px, -140px, 0); }
  28.26% { transform: translate3d(-420px, -140px, 0); }
  30.43% { transform: translate3d(-280px, -140px, 0); }
  32.61% { transform: translate3d(-140px, -140px, 0); }
  34.78% { transform: translate3d(0px, -140px, 0); }
  36.96% { transform: translate3d(-1960px, -280px, 0); }
  39.13% { transform: translate3d(-1820px, -280px, 0); }
  41.3% { transform: translate3d(-1680px, -280px, 0); }
  43.48% { transform: translate3d(-1540px, -280px, 0); }
  45.65% { transform: translate3d(-1400px, -280px, 0); }
  47.83% { transform: translate3d(-1260px, -280px, 0); }
  50% { transform: translate3d(-1120px, -280px, 0); }
  52.17% { transform: translate3d(-980px, -280px, 0); }
  54.35% { transform: translate3d(-840px, -280px, 0); }
  56.52% { transform: translate3d(-700px, -280px, 0); }
  58.7% { transform: translate3d(-560px, -280px, 0); }
  60.87% { transform: translate3d(-420px, -280px, 0); }
  63.04% { transform: translate3d(-280px, -280px, 0); }
  65.22% { transform: translate3d(-140px, -280px, 0); }
  67.39% { transform: translate3d(0px, -280px, 0); }
  69.57% { transform: translate3d(-1960px, -420px, 0); }
  71.74% { transform: translate3d(-1820px, -420px, 0); }
  73.91% { transform: translate3d(-1680px, -420px, 0); }
  76.09% { transform: translate3d(-1540px, -420px, 0); }
  78.26% { transform: translate3d(-1400px, -420px, 0); }
  80.43% { transform: translate3d(-1260px, -420px, 0); }
  82.6% { transform: translate3d(-1120px, -420px, 0); }
  84.78% { transform: translate3d(-980px, -420px, 0); }
  86.96% { transform: translate3d(-840px, -420px, 0); }
  89.13% { transform: translate3d(-700px, -420px, 0); }
  91.3% { transform: translate3d(-560px, -420px, 0); }
  93.48% { transform: translate3d(-420px, -420px, 0); }
  95.65% { transform: translate3d(-280px, -420px, 0); }
  97.83% { transform: translate3d(-140px, -420px, 0); }
  100% { transform: translate3d(0, -420px, 0); } }
@-webkit-keyframes loading { 2.17% { -webkit-transform: translate3d(-1960px, 0, 0); }
  4.35% { -webkit-transform: translate3d(-1960px, -140px, 0); }
  6.52% { -webkit-transform: translate3d(-1820px, -140px, 0); }
  8.7% { -webkit-transform: translate3d(-1680px, -140px, 0); }
  10.87% { -webkit-transform: translate3d(-1540px, -140px, 0); }
  13.04% { -webkit-transform: translate3d(-1400px, -140px, 0); }
  15.22% { -webkit-transform: translate3d(-1260px, -140px, 0); }
  17.39% { -webkit-transform: translate3d(-1120px, -140px, 0); }
  19.57% { -webkit-transform: translate3d(-980px, -140px, 0); }
  21.74% { -webkit-transform: translate3d(-840px, -140px, 0); }
  23.91% { -webkit-transform: translate3d(-700px, -140px, 0); }
  26.09% { -webkit-transform: translate3d(-560px, -140px, 0); }
  28.26% { -webkit-transform: translate3d(-420px, -140px, 0); }
  30.43% { -webkit-transform: translate3d(-280px, -140px, 0); }
  32.61% { -webkit-transform: translate3d(-140px, -140px, 0); }
  34.78% { -webkit-transform: translate3d(0px, -140px, 0); }
  36.96% { -webkit-transform: translate3d(-1960px, -280px, 0); }
  39.13% { -webkit-transform: translate3d(-1820px, -280px, 0); }
  41.3% { -webkit-transform: translate3d(-1680px, -280px, 0); }
  43.48% { -webkit-transform: translate3d(-1540px, -280px, 0); }
  45.65% { -webkit-transform: translate3d(-1400px, -280px, 0); }
  47.83% { -webkit-transform: translate3d(-1260px, -280px, 0); }
  50% { -webkit-transform: translate3d(-1120px, -280px, 0); }
  52.17% { -webkit-transform: translate3d(-980px, -280px, 0); }
  54.35% { -webkit-transform: translate3d(-840px, -280px, 0); }
  56.52% { -webkit-transform: translate3d(-700px, -280px, 0); }
  58.7% { -webkit-transform: translate3d(-560px, -280px, 0); }
  60.87% { -webkit-transform: translate3d(-420px, -280px, 0); }
  63.04% { -webkit-transform: translate3d(-280px, -280px, 0); }
  65.22% { -webkit-transform: translate3d(-140px, -280px, 0); }
  67.39% { -webkit-transform: translate3d(0px, -280px, 0); }
  69.57% { -webkit-transform: translate3d(-1960px, -420px, 0); }
  71.74% { -webkit-transform: translate3d(-1820px, -420px, 0); }
  73.91% { -webkit-transform: translate3d(-1680px, -420px, 0); }
  76.09% { -webkit-transform: translate3d(-1540px, -420px, 0); }
  78.26% { -webkit-transform: translate3d(-1400px, -420px, 0); }
  80.43% { -webkit-transform: translate3d(-1260px, -420px, 0); }
  82.6% { -webkit-transform: translate3d(-1120px, -420px, 0); }
  84.78% { -webkit-transform: translate3d(-980px, -420px, 0); }
  86.96% { -webkit-transform: translate3d(-840px, -420px, 0); }
  89.13% { -webkit-transform: translate3d(-700px, -420px, 0); }
  91.3% { -webkit-transform: translate3d(-560px, -420px, 0); }
  93.48% { -webkit-transform: translate3d(-420px, -420px, 0); }
  95.65% { -webkit-transform: translate3d(-280px, -420px, 0); }
  97.83% { -webkit-transform: translate3d(-140px, -420px, 0); }
  100% { -webkit-transform: translate3d(0, -420px, 0); } }