/* ------------------------------------------------------ */
/* - 标签重置
/* ------------------------------------------------------ */
html{ width:100%; height:100%; overflow:hidden; }
body{ width:100%; height:100%; margin:0; font:12px Garamonds,Tahoma,'微软雅黑'; overflow:hidden; }


/* ------------------------------------------------------ */
/* - common
/* ------------------------------------------------------ */
.amn{ transition:all ease-out .3s 0s; -moz-transition:all ease-out .3s 0s; -webkit-transition:all ease-out .3s 0s; -o-transition:all ease-out .3s 0s; }
.amns{ transition:all ease-out .5s 0s; -moz-transition:all ease-out .5s 0s; -webkit-transition:all ease-out .5s 0s; -o-transition:all ease-out .5s 0s; }


/* ------------------------------------------------------ */
/* - index
/* ------------------------------------------------------ */
.index-div{ width:100%; height:100%; position:relative; z-index:1; }
.index-div .index-head{ width:100%; height:400px; overflow:hidden; }
.index-div .index-head .index-logo{ width:480px; height:140px; margin:0 0 0 95px; overflow:hidden; }
.index-div .index-head .index-logo{ animation:index-logo 2s; -webkit-animation:index-logo 2s; }
.index-div .index-head .index-logo i{ width:100%; height:120px; margin:20px 0 0 0; display:block; background:url(images/index.png); }
.index-div .index-head .index-navi{ width:480px; margin:5px 0 0 95px; }
.index-div .index-head .index-navi a{ height:40px; margin:0 9px 0 7px; line-height:40px; text-indent:30px; display:block; font-size:16px; color:#FFF; text-decoration:none; text-shadow:0 0 10px rgba(0,0,0,0.5); }
.index-div .index-head .index-navi a:hover{ background:url(images/black.png); background:rgba(0,0,0,0.25); }

.index-div .index-product{ height:180px; padding:0 0 0 150px; border:1px solid #FFF; border:1px solid rgba(255,255,255,0.2); border-left:0; background:url(images/white.png); background:rgba(255,255,255,0.2); font-size:0; position:absolute; bottom:75px; left:0; }
.index-div .index-product a{ margin:0 0 0 1px; display:inline-block; background:url(images/black.png); background:rgba(0,0,0,0.4); }
.index-div .index-product a img{ height:180px; border:0; }
.index-div .index-product a:hover{ background:url(images/black.png); background:rgba(0,0,0,0.6); }
.index-div .index-product a:hover img{ animation:index-product 1s; -webkit-animation:index-product 1s; }

.index-background{ width:100%; height:100%; position:absolute; top:0; left:0; z-index:0; background:#CCC; }
.index-background .swiper-container{ width:100%; height:100%; }
.index-background .swiper-container .swiper-slide{ background:#F9F9F9 0 0 no-repeat; background-size:110% auto; }
.index-background .swiper-container .swiper-slide-active{ animation:index-background 10s; -webkit-animation:index-background 10s; }

@keyframes index-logo{ 0%{ margin:-200px 0 0 95px; opacity:0; } 100%{ opacity:1; } }
@-webkit-keyframes index-logo{ 0%{ margin:-200px 0 0 95px; opacity:0; } 100%{ opacity:1; } }

@keyframes index-product{ 0%{ transform:scale(1,1); opacity:0.2; } 30%{ transform:scale(1.5,1.5); } }
@-webkit-keyframes index-product{ 0%{ -webkit-transform:scale(1,1); opacity:0.2; } 30%{ -webkit-transform:scale(1.5,1.5); } }

@keyframes index-background{ 0%{ background-size:110% auto; } 100%{ background-size:100% auto; } }
@-webkit-keyframes index-background{ 0%{ background-size:110% auto; } 100%{ background-size:100% auto; } }