*{margin:0;padding:0;}
body {font:12px/1.5 Arial, Helvetica, sans-serif;color:#343434;min-width:980px; background-color:#fff;letter-spacing:.1em;}
div, form, img, ul, ol, li, dl, dt, dd {border:0px;}
input, select {font-size:12px;vertical-align:middle;outline:none;}

ul, ol,li {list-style-type:none;}
a {color:#9b9b9b;text-decoration:none;outline:none;}
a:hover{color:#9b9b9b;}
del{color:#818181}
.l{float:left;}
.r{float:right;}
.wrapper{width:980px;margin:0 auto;}
/*-----------------------------head---------------------------------*/
#top{width:100%;padding:10px 0;background-color:#f1f1f3;float:left;color:#9b9b9b;}
#search form{width:149px;height:13px;float:left;border:1px solid #9b9b9b;padding:6px 10px;margin:0 10px 0 30px;}
#Gstr{float:left;width:130px;border:0 none;height:13px;line-height:13px;color:#9b9b9b;background-color:transparent;}
#go{float:right;border:0 none;width:12px;height:12px;background-image:url(../img/go.gif);}

#cur{float:left;width:80px;height:25px;border:1px solid #9b9b9b;position:relative;background:url(../img/cur.gif) no-repeat right}
#cur span{line-height:25px;padding-left:10px;}
#cur select{position:absolute;top:0;left:-1px;width:82px;height:25px;opacity:0;filter:alpha(opacity=0);}
#cur option{padding:3px 10px;background-color:#9b9b9b;color:#fff;font-family:Arial;}
#cur option:hover{background-color:#9b9b9b;text-decoration:underline;}

#top>ol{float:right;padding:4px 30px 0 0}
#top>ol>li{float:left;}
#top>ol>li>a{margin-left:45px;}
.sys_cart>a{float:right;background:url(../img/bag.gif) no-repeat 0;z-index:999;padding-left:15px}
#top>ol>li>a:hover{text-decoration:underline;}

#head {float:left;width:100%;}
#logo{text-align:center;margin:22px 0;}
#logo a{font-size:44PX;font-weight:bold;letter-spacing:3px;text-decoration:none;color:#9b9b9b;}





/*------menu----*/
#menu{width:980px;float:left;background-color:#9b9b9b;}
#menu div{float:left;}
#menu a{float:left;display:block;text-transform:uppercase;cursor:pointer;line-height:16px;color:#fff;padding:0 3px;}

#menu a.hot{background-color:#fbf8f2;color:#a1010d}

#menu>div>ul>li{float:left;position:relative;z-index:555;padding:5px 0 5px 26px;}
#menu div div{position:absolute;left:26px;top:-9999px;width:128px;background-color:#fbf8f2;z-index:555;padding:10px 5px;opacity:0;  -moz-transition: opacity 0.15s linear;
-webkit-transition: opacity 0.15s linear;
-o-transition: opacity 0.15s linear;
transition: opacity 0.15s linear;box-shadow: 2px 2px 2px rgba(0,0,0,.4);}
#menu li li{float:left;width:100%;padding:2px 0}
#menu div div div{display:none;}

#menu li:hover div{top:26px;opacity:1;}
#menu li li a{color:#323232;padding:2px 5px;width:118px;}
#menu>div>ul>li:hover>a{text-decoration:underline;}
#menu li li a:hover{background-color:#9b9b9b;color:#fff;}


/*------word-----*/
#word{width:712px;float:left;height:21px;overflow:hidden;padding-left:134px;margin:10px 0}
.word,.word a,.word img{float:left;width:417px;height:21px;}
.word div{float:left;width:417px;}
#word a{float:right;}

/*----------------------------main------------------------------------*/
#main{width:100%;float:left;min-height:400px;padding-bottom:35px;}
#main2{clear:both;margin:0 auto;width:930px;background-color:#fff;min-height:510px;}


/*------banner----*/
#banner {float:right;position:relative;height:540px;width:480px;}
.banner {float:left;overflow:hidden;width:480px;height:540px;}
.banner a{height:540px;position:absolute;overflow:hidden;width:480px;}
.banner img{width:480px;height:540px; }

#banner .prev,#banner .next{display:block;width:45px;height:51px;background-image:url(../img/btn.png);position:absolute;top:436px;z-index:99;overflow:hidden;text-indent:-9999px;}
#banner .prev{left:361px}
#banner .next{background-position:right 0;left:407px}
#banner .prev:hover{background-position:0 bottom;}
#banner .next:hover{background-position:right bottom;}

#banner ul{position:absolute;right:0;bottom:15px;z-index:99;width:147px;text-align:center;}
#banner li{display:inline-block;margin:0 6px}
#banner li a{display:block;width:14px;height:14px;background-image:url(../img/dot.png);text-indent:-9999px;}
#banner li.current a{background-position:right;}


/*------adv----*/
#adv {float:left;position:relative;height:212px;width:214px;padding:10px 10px 10px 256px;background-image:url(../ad/4_0.gif)}
#adv a{height:212px;position:absolute;overflow:hidden;width:214px;display:none;}
#adv img{width:214px;height:212px; }

#adv1{float:left;margin-top:40px;width:480px;height:268px;overflow:hidden;}
#adv1 img{transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-webkit-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;}
#adv1:hover img{
  -webkit-transform: scale(1.1);
  -ms-transform: scale(1.1);
  transform: scale(1.1);
}




/*------brands----*/
.brands{width:208px;height:33px;background-image:url(../img/brands.gif);margin:15px 386px -16px;position:relative;float:left;}
#brands{width:978px;border:1px solid #e4e4e4;float:left;}
#brands img{width:106px;padding:10px 17px;background:url(../img/brand.gif) no-repeat left;height:94px;-moz-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;}
#brands a{display:inline-block;background-image:url(../ad/20_0.png)}
#brands a:hover img{opacity:0;filter: alpha(opacity=0);}
.brand2{background-position:-144px 0}
.brand3{background-position:-288px 0}
.brand4{background-position:-433px 0}
.brand5{background-position:-577px 0}
.brand6{background-position:-721px 0}
.brand7{background-position:-865px 0}
.brand8{background-position:-1009px 0}
.brand9{background-position:-1154px 0}

#adv2{float:left;padding:10px 0}
#adv2 a{float:left;width:315px;height:138px;overflow:hidden;border:1px solid #e4e4e4;position:relative;}
#adv2 img{position:absolute;transition:top .4s ease-in-out;-moz-transition:top .4s ease-in-out;-webkit-transition:top .4s ease-in-out;-o-transition:top .4s ease-in-out;top:0;}
#adv2 a:hover img{top:-138px;}

.box{width:978px;float:left;margin:10px 0;border:1px solid #e4e4e4;}
.new,.best{width:100%;float:left;border-bottom:1px solid #e4e4e4;height:50px;background-position:18px 50%;background-repeat:no-repeat;}
.best{background-image:url(../img/best.gif)}
.new{background-image:url(../img/new.gif)}

.new div,.best div{float:right;width:117px;border-left:1px solid #e4e4e4;height:38px;padding:12px 0 0 58px;}
.new a,.best a{display:block;width:60px;height:26px;background-image:url(../img/more.gif)}
.new a:hover,.best a:hover{background-position:bottom;}

#content{float:left;width:978px;}
#content>a{float:left;margin:7px 0 7px 7px}
#content dl{width:169px;padding:0 3px;float:left;letter-spacing:normal;text-align:center;color:#646464;}
#content dl img{width:169px;height:169px;}
#content dt{height:30px;overflow:hidden;margin-top:3px}
#content dt a{color:#646464;line-height:1.2}
#content dl:hover,#content dl:hover a{color:#b4b4b4;}
#content span{line-height:1.8}






#path{color:#565656;border-top:1px solid #ebebeb;padding:2px 0;letter-spacing:normal;}
#path a{color:#565656}
#path a:hover{color:#acacac}
#path a:last-child{color:#acacac}





/*--------------------------left----------------------------------*/
#left{float: left;width: 169px;border-right:1px solid #ebebeb}
#left span{display:block;float:left;width:100%;font-weight:bold;padding-top:16px;font-family:Georgia;color:#000}
#left{text-transform:uppercase;padding-bottom:10px;float:left;}
#left div{float:left;width:160px;}
#left div div{display:none;}
#left div div div{display:none !important;}
#left ul{float:left;}
#left li{width:100%;float:left;}
#left a{margin-top:10px;float:left;color:#565656}
#left a:hover{color:#acacac}
#left li li a{margin-top:4px;padding:2px 0 2px 9px;width:151px;text-transform:lowercase;letter-spacing:normal;}
#left li.curselt_li>a{color:#000}
#left li.curselt_li>a{background-color:#f1f1f3;color:#565656}
#left div li.curselt_li div{display:block;}

#left #cate div {display:block;}


/*-------------------------right-----------------------------*/
#right{float:right;width:800px;border-left:1px solid #ebebeb;margin-left:-1px;padding-left:10px;letter-spacing:normal;}

/*------search-----*/
#choose{border:1px solid #ebebeb;line-height:22px;width:798px;float:left;letter-spacing:1px;background-color:#fbfaf6;}
#choose i{border:5px solid transparent;border-left-;display:block;float:left;margin:15px 0 0 10px}
#choose span{float:left;text-transform:uppercase;color:#565656;margin-top:10px;font-size:11px;}
#choose a{margin:0 5px;padding:2px 3px;color:#565656}
#choose a:hover{color:#b9b9b9;}
#choose .seld{background-color:#f1f1f3}
#choose div{float:right;width:645px;background-color:#fff;border-left:1px solid #ebebeb;padding:10px;}
.choose_li{float:left;width:100%;border-bottom:1px dotted #ebebeb;}

.pager,.pager2{width:100%;float:left;line-height:30px;text-align:right;padding:10px 0;color:#565656}
.pager .turnpage{float:left;line-height:30px;}
.turnpage a{padding:5px 8px;border:1px solid #ebebeb;color:#565656}
.currentPageNo{padding:5px 8px;border:1px solid #ebebeb;background-color:#ebebeb}


.pager2 .turnpage{float:right;line-height:30px;}



/*------pro_list-----*/
.list{width:196px;padding:2px;float:left;text-align:center;color:#646464;}
.list img{width:100%;}
.list dt{height:30px;overflow:hidden;margin-top:3px}
.list dt a{color:#646464;line-height:1.2}
.list:hover,.list:hover a{color:#b4b4b4;}
.list span{line-height:1.8}





.index_tab{width:100%;float:left;border-bottom:2px solid #000;font-size:16px;font-weight:bold;text-transform:uppercase;padding-top:15px}
.index_tab li{text-align:center;float:left;cursor:pointer;padding:0 17px;color:#afafaf;}
.index_tab li.active{color:#000;}

.index_opt{float:left;width:782px;}
.index_opt li{display:none;position:relative;width:788px;}
.index_opt>li>a{position:absolute;right:15px;top:-20px;color:#fff;font-size:11px;background-color:#c2c2c2;padding:1px 4px 0;line-height:1.2}
.index_opt>li>a:hover{background-color:#000}
.index_opt li.active{display:block;}









/*********************************proinfo*************************************************/
.img{ float:left; width:460px;text-align:center;}
.img p img{width:78px;border:1px solid #fff;float:left;margin:10px 0 0 10px}
.img p img:hover,.img p img.cur{border-color:#ebebeb}




.info{ width:330px;float:right;color:#565656;}
.info>h2{font-size:14px;text-transform:uppercase;}
.info>h2 a{color:#565656}
.info>div>i{font-style:normal;font-size:18px;font-weight:bold;}

#desc{padding:5px 7px;background-color:#f6f6f6;margin-top:10px;font-size:11px;line-height:2;}



#buyfrom{ float:left; width:100%;border-top:1px #ebebeb solid;margin-top:15px;padding-top:5px;}
#buyfrom ul{ width:100%; display:block;}
#buyfrom li{ padding-top:10px; line-height:21px; float:left;width:100%; }
#buyfrom font{ margin:0px; display:block; float:left;width:37px;font-size:12px;}
#buyfrom span{ display:block; float:left;}
.qty {float:left;height: 30px;padding-top:5px;width: 100%;border-bottom:1px #ebebeb solid;margin-bottom:15px;padding-bottom:8px;}
#qty{float:left;display:inline;text-align:center; margin-top:2px;}
.qty font{line-height:21px;}
.qty button{float:left;border:0 none;height:13px;width:13px;margin-top:4px;cursor:pointer;background-color:#fff;outline:none;background-image:url(../img/cacl.gif)}
.qty1{margin-right:5px;}
.qty2{margin-left:5px;background-position:right 0}
.qty1:hover{background-position:0 bottom}
.qty2:hover{background-position:right bottom}



#buyfrom span a img{ margin:1px; border:1px solid #ebebeb; display:inline; height:32px; width:32px;white-space:nowrap; float:left;text-align:center; cursor:pointer;}
#buyfrom span a.selected img{border:1px solid #5a5a5a;}
#buyfrom span a img:hover{ border:1px solid #5a5a5a; text-decoration:none}
.add{height: 32px; display:block; width:100%;cursor:pointer; float:left;background-color:#9b9b9b;border:0 none;margin:5px 0 15px 0;color:#fff;font-size:16px;font-family:Arial;text-transform:uppercase;}
.add:hover{background-color:#565656}

.pulink{width:100%;float:left;border-top:1px solid #ebebeb;background:url(../ad/pulink.gif) no-repeat 0 40px;margin-top:15px;padding:15px 0;}
.pulink p{font-family:Verdana;text-transform:uppercase;padding-bottom:20px;}
.pulink a{color:#565656;margin:0 22px 0 34px;}
.pulink a:hover{color:#b9b9b9}


.ptitle{float:left;width:100%;height:29px;line-height:28px;border-bottom:1px #ebebeb solid;margin-top:20px}
.ptitle li{float:left; color:#565656;font-size:12px;text-align:center;margin-right:3px;cursor:pointer; background-color:#fbf8f2; padding:0 15px;border:1px #ebebeb solid;text-transform:uppercase;}
.ptitle li.active{ background-color:#fff; border-bottom:0; height:29px;}
.pcontent{float:left;border:1px #ebebeb solid; padding:10px 0 0px 10px;width:788px; border-top:0;height:200px;overflow-y:auto;overflow-x:hidden; }
.pcontent li{float:left; display:none; color:#565656;width:770px; padding:5px;}
.pcontent li.active{ display:block;}


.mtitle{float:left;width:100%;height:47px;line-height:47px;border-bottom:1px #ebebeb solid;margin-top:20px;text-align:center;border-top:1px #ebebeb solid}
.mtitle li{display:inline-block;color:#acacac;font-size:14px;text-align:center;margin-right:3px;cursor:pointer;padding:0 25px;text-transform:uppercase;}
.mtitle li.active{ background-color:#fbf8f2;color:#565656; position:relative;border-left:1px #ebebeb solid;border-right:1px #ebebeb solid;padding:0 24px}
.mtitle i{position:absolute;width:21px;height:11px;display:block;background-image:url(../img/arror.gif);top:-9947px;left:50%;margin-left:-11px;}
.mtitle .active i{top:47px}

.mcontent{float:left;width:100%}
.mcontent li{float:left; display:none; }
.mcontent li.active{ display:block;}




/*-------Review-------*/
#review img{margin-bottom:-1px;}
#review .com{clear:both;padding:5px 0;}
#review font{color:#f00;width:40px;display:block;float:left;}
#review b{display:block;float:left;}
#review span{width:240px;float:left;display:block;}
#review li label{padding:5px 0 5px 11px;width:702px;clear:both;display:block;}
#review form{float:left;}
#review form b{width:100px;text-align:right;}
#mail_input,#review textarea {border:1px solid #ccc;}
#mail_input{width:250px;_line-height:14px;}
#sub{margin-left:100px;width:72px;height:29px;background-image:url(../img/sub.gif);border:0 none;}


#like{width:100%;float:left;border-bottom:2px solid #000;height:60px;background:url(../img/like.gif) no-repeat center 20px }


/*-----------------foot-----------------------*/
#foot{width:100%;float:left;background-color:#f5f5f5}

#icon{width:980px;margin:0 auto;height:123px;border-bottom:1px solid #ccc;background:url(../img/icon.gif) no-repeat 0 28px;position:relative;}
#icon span{position:absolute;top:80px;font-size:11px;text-transform:uppercase;color:#646464}

#page{width:980px;margin:0 auto;padding:40px 0}
#page dl{float:left;padding:0 42px 0px 0px;line-height:1.8}
#page dl.l{padding-right:0px;margin-right:0;background-image:none;}
#page dt{clear:both;padding-bottom:7px;text-transform:uppercase;color:#333;font-size:13px;}
#page dd{clear:both;padding-left:1px;text-transform:uppercase;font-size:11px;}
#page a{color:#646464;}
#page a:hover{color:#b4b4b4;}
#page dl div div{display:none;}

#page dl.share{float:right;padding-right:0;}
#page .share dd{text-transform:none;font-size:12px;}
.share ul{float:left;}
.share li{float:left;margin:0px 13px 0 0;width:33px;height:33px;border:1px solid #bababa;background-color:#fff;position:relative;
overflow:hidden;}
.share li>a{background-image: url(../img/share.png);z-index:9;position:absolute;top:0;left:0;width:27px;height:27px;padding:3px;}
.icon2 a{background-position:-38px 0}
.icon3 a{background-position:-78px 0}
.icon4 a{background-position:-116px 0}

.share li div{width:33px;height:33px;position: absolute;z-index:5;
left: 0;
top: 0;
-moz-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;
}
.icon1 div{background-color:#3B5998}
.icon2 div{background-color:#00ACED}
.icon3 div{background-color:#CB2027}
.icon4 div{background-color:#D14836}



.share li:hover>div{
  -webkit-animation-name: lightSpeedIn;
  animation-name: lightSpeedIn;
  -webkit-animation-timing-function: ease-out;
  animation-timing-function: ease-out; 
 -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
    opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
}

.share li img{-moz-transition: all 0.4s linear;
-webkit-transition: all 0.4s linear;
-o-transition: all 0.4s linear;
transition: all 0.4s linear;}
.share li:hover img{opacity:0;filter: alpha(opacity=0);
-moz-opacity: 0;
-khtml-opacity: 0;}



.share p{padding-top:20px;clear:both;}
.share p a{background:url(../img/email.png) no-repeat;text-decoration:underline;padding:4px 0 1px 40px}



#bottom{text-align:center;padding:15px 0;width:100%;float:left;background-color:#9b9b9b;color:#fff;text-transform:uppercase;}
#bottom ul{display:inline;}
#bottom li{margin:  0 10px;display:inline;}
#bottom a{color:#fff;}


#toTop{position:fixed;right:0px;width:59px;height:59px;bottom:30px;background-image:url(../img/totop.gif)}
#toTop:hover{background-position:bottom;}


#ad a:hover img{-webkit-animation-name: wobble-to-top-right;
  animation-name: wobble-to-top-right;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}




@-webkit-keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-50deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}

@keyframes lightSpeedIn {
  0% {
    -webkit-transform: translateX(100%) skewX(-50deg);
    -ms-transform: translateX(100%) skewX(-50deg);
    transform: translateX(100%) skewX(-50deg);
    opacity: 0;
  }

  60% {
    -webkit-transform: translateX(-20%) skewX(30deg);
    -ms-transform: translateX(-20%) skewX(30deg);
    transform: translateX(-20%) skewX(30deg);
    opacity: 1;
  }

  80% {
    -webkit-transform: translateX(0%) skewX(-15deg);
    -ms-transform: translateX(0%) skewX(-15deg);
    transform: translateX(0%) skewX(-15deg);
    opacity: 1;
  }

  100% {
    -webkit-transform: translateX(0%) skewX(0deg);
    -ms-transform: translateX(0%) skewX(0deg);
    transform: translateX(0%) skewX(0deg);
    opacity: 1;
  }
}










@-webkit-keyframes wobble-to-top-right {
  16.65% {
    -webkit-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
  }

  33.3% {
    -webkit-transform: translate(-4px, 4px);
    transform: translate(-4px, 4px);
  }

  49.95% {
    -webkit-transform: translate(3px, -3px);
    transform: translate(3px, -3px);
  }

  66.6% {
    -webkit-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  83.25% {
    -webkit-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}

@keyframes wobble-to-top-right {
  16.65% {
    -webkit-transform: translate(5px, -5px);
    -ms-transform: translate(5px, -5px);
    transform: translate(5px, -5px);
  }

  33.3% {
    -webkit-transform: translate(-4px, 4px);
    -ms-transform: translate(-4px, 4px);
    transform: translate(-4px, 4px);
  }

  49.95% {
    -webkit-transform: translate(3px, -3px);
    -ms-transform: translate(3px, -3px);
    transform: translate(3px, -3px);
  }

  66.6% {
    -webkit-transform: translate(-2px, 2px);
    -ms-transform: translate(-2px, 2px);
    transform: translate(-2px, 2px);
  }

  83.25% {
    -webkit-transform: translate(1px, -1px);
    -ms-transform: translate(1px, -1px);
    transform: translate(1px, -1px);
  }

  100% {
    -webkit-transform: translate(0, 0);
    -ms-transform: translate(0, 0);
    transform: translate(0, 0);
  }
}