@charset "utf-8";

@import url("owl.carousel.min.css");

/* reset css */
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, form, input, textarea, p, th, td {margin:0; padding:0; -webkit-text-size-adjust:none;}
th{font-weight:normal; text-align:left;}
table{border-collapse:collapse; border-spacing:0;}
img{border:0;}
ol, ul{list-style:none;}
a{outline:none; hlbr:expression(this.onFocus=this.blur()); text-decoration:none; cursor:pointer;}
input , select , textarea , button{outline:none; border-radius:0; font-family:arial , "微軟正黑體";}
button{padding:0; cursor:pointer;}

body{font-family:arial , "微軟正黑體";}
#ascrail2000{z-index:10 !important;}
#all.active{position:fixed; left:0; top:0; width:100%;}

/* header */
#header{position:absolute; left:0; top:45px; width:100%; background:rgba(255,255,255,.9); z-index:3;}
#header .wrap{position:relative; width:96%; max-width:1600px; margin:0 auto;}
#header .wrap:after{content:""; display:block; clear:both;}

#logo{float:left; width:150px; height:54px; margin-top:7px; background:url(../images/logo.png); text-indent:-9999px; cursor:pointer;}

#navigation{float:right;}
#navigation ul{display:inline-block;}
#navigation:after{content:""; display:block; clear:both;}
#navigation li{position:relative; display:inline-block; padding:20px 5px; text-align:center;}
#navigation li > a{display:inline-block; padding:5px 15px; font-size:16px; color:#000; transition:all .3s;}
#navigation li > a:hover{color:#1baacc;}
#navigation .sub-menu{position:absolute; left:-25%; top:100%; display:none; width:150%; background:rgba(255,255,255,.9); z-index:2}
#navigation .sub-menu a{display:block; padding:10px 0; font-size:15px; color:#444;}
#navigation .sub-menu a:hover{background:#DDD; color:#000;}
#navigation li:hover .sub-menu{display:block;}
#navigation .member{display:inline-block;}
#navigation .member a{display:inline-block; margin:0 5px; padding:5px 15px; font-size:16px; color:#000; transition:all .3s;}
#navigation .member a:hover{color:#1baacc;}

/* search */
#search{position:absolute; left:0; top:0; width:100%; padding:10px 0; background:#444; text-align:right; z-index:3}
#search .wrap{width:96%; max-width:1600px; margin:0 auto;}
#search .wrap .keyword{display:inline-block;}
#search .wrap .keyword a{display:inline-block; margin-right:10px; font-size:13px; color:#CCC; transition:all .3s;}
#search .wrap .keyword a:hover{color:#FFF;}
#search .wrap .search{position:relative; display:inline-block; width:200px; margin-left:10px; padding-right:20px; box-sizing:border-box;}
#search .wrap .search input{display:block; width:100%; height:25px; padding:0 5px; background:none; border:none; border-bottom:1px solid #CCC; font-size:13px; color:#CCC; box-sizing:border-box;}
#search .wrap .search button{position:absolute; right:0; top:5px; width:15px; height:15px; background:url(../images/search.png); border:none; text-indent:-9999px; box-sizing:border-box; transition:all .3s;}
#search .wrap .search button:hover{opacity:.6;}

/* mobile */
#mobi-btn{position:absolute; right:0; top:15px; display:none; width:40px; height:40px;  background:#444;}
#mobi-btn:before ,
#mobi-btn hr ,
#mobi-btn:after{content:""; position:absolute; left:7px; display:block; width:26px; height:3px; margin:0; padding:0; background:#FFF; border:none;}
#mobi-btn:before{top:9px;}
#mobi-btn hr{top:18px;}
#mobi-btn:after{top:27px;}
#mask{position:fixed; left:0; top:0; display:none; width:100%; height:100%; background:rgba(0,0,0,.8); z-index:9;}
#mobile{position:absolute; left:-250px; top:0; width:250px; min-height:100%; background:#000; z-index:10;}
#mobile li > a ,
#mobile .member a{display:block; padding:0 20px; border-bottom:1px solid #333; font-size:16px; color:#FFF; line-height:50px;}
#mobile li .sub-menu{display:none; background:#FFF}
#mobile li .sub-menu a{display:block; padding:0 20px; border-bottom:1px solid #f1f1f1; font-size:15px; color:#999; line-height:40px;}

/* slider */
#slider{position:relative;}
#slider .item{display:table; width:100%; padding:0 150px; background-position:center center; background-size:cover; box-sizing:border-box;}
#slider .item .wrap{display:table-cell; vertical-align:middle; text-align:center;}
#slider .item .wrap h2{margin-bottom:20px; font-style:italic; font-size:80px; color:#FFF;}
#slider .item .wrap a{display:inline-block; padding:10px 80px; background:rgba(255,255,255,.5); border-radius:20px; font-size:18px; color:#FFF; transition:all .3s;}
#slider .item .wrap a:hover{background:#FFF; color:#999;}
#slider .owl-nav > div{position:absolute; top:50%; display:block; width:50px; height:50px; margin-top:-25px; background:url(../images/slider_arrow.png); border-radius:50%; text-indent:-9999px; box-sizing:border-box; transition:all .3s;}
#slider .owl-nav > div:hover{opacity:.6;}
#slider .owl-nav .owl-prev{left:20px; background-position:left top;}
#slider .owl-nav .owl-next{right:20px; background-position:right top;}
#slider .owl-dots{position:absolute; left:0; bottom:0; width:100%; padding:10px; text-align:center; box-sizing:border-box;}
#slider .owl-dots .owl-dot{display:inline-block; width:10px; height:10px; margin:0 3px; background:#FFF; border:1px solid #f1f1f1; border-radius:50%;}
#slider .owl-dots .owl-dot.active{background:#1baacc;}

/* brand */
#brand{position:relative; border:1px solid #f1f1f1; box-sizing:border-box;}
#brand .item a{display:block; border-right:1px solid #f1f1f1; overflow:hidden; box-sizing:border-box; transition:all .3s;}
#brand .item a img{display:block; width:100%; height:auto;}
#brand .item a:hover{opacity:.6;}
#brand .owl-nav{opacity:0; transition:all .3s;}
#brand .owl-nav > div{position:absolute; top:50%; width:30px; height:30px; margin-top:-15px; background:url(../images/brand_arrow.png) rgba(0,0,0,.7); border-radius:50%; text-indent:-9999px; transition:all .3s;}
#brand .owl-nav > div:hover{opacity:.6;}
#brand .owl-nav .owl-prev{left:20px; background-position:left top;}
#brand .owl-nav .owl-next{right:20px; background-position:right top;}
#brand:hover .owl-nav{opacity:1;}

/* container */
#container{width:96%; max-width:1600px; margin:0 auto; padding:50px 0;}
#container h2{margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid #CCC; font-size:22px; color:#444; font-weight:normal;}
#container .left .ad{margin-bottom:50px; overflow:hidden;}
#container .left .ad a{float:left; display:block; width:32.33%; margin:1.5% 0; transition:all .3s;}
#container .left .ad a:nth-child(3n+2){margin:1.5%;}
#container .left .ad a img{display:block; width:100%; height:auto;}
#container .left .ad a:hover{opacity:.6;}

/* hot-product */
#hot-product .ad .small{width:100%;}
#hot-product .ad .big{width:100%;}
#hot-product .ad a{display:block; transition:all .3s;}
#hot-product .ad a img{display:block; width:100%; height:auto;}
#hot-product .ad a:hover{opacity:.8;}

#hot-product .wrap{margin-bottom:50px; overflow:hidden;}
#hot-product .wrap dl{float:left; width:24%; margin:1% 1.33% 0 0}
#hot-product .wrap dl:nth-child(4n){margin-right:0;}
#hot-product .wrap dl a{display:block; transition:all .3s;}
#hot-product .wrap dl a:hover{opacity:.6;}
#hot-product .wrap dt img{display:block; width:100%; height:auto;}
#hot-product .wrap dd{position:relative; padding:3% 50px 2% 0; font-size:14px; color:#444;}
#hot-product .wrap dd .price{display:block; color:#999;}
#hot-product .wrap dd .price:before{content:"$ ";}
#hot-product .wrap dd .rank{display:none;}

#hot-product .media{max-width:1200px; margin:50px auto;}
#hot-product .media .wrap{position:relative; padding-bottom:52.65%;}
#hot-product .media .wrap iframe{position:absolute; left:0; top:0; width:100%; height:100%;}

/* product-type */
#product-type{margin-bottom:50px; padding:20px; background:#f1f1f1;}
#product-type h2{padding-bottom:15px; border-bottom:1px solid #CCC;}
#product-type li{padding:10px 0;}
#product-type li > a{position:relative; display:block; padding-right:20px; font-size:14px; color:#444; font-weight:bold; transition:all .3s;}
#product-type li > a img{display:inline-block; margin-right:20px; vertical-align:middle;}
#product-type li > a:after{content:" +";}
#product-type li > a:hover ,
#product-type li > a.active{color:#333;}
#product-type li > a:hover:after ,
#product-type li > a.active:after{opacity:1;}
#product-type li > a.active:after{background-position:left bottom;}
#product-type li .sub-menu{margin-top:10px;}
#product-type li .sub-menu a{display:inline-block; margin:0 10px 5px 0; padding:3px 10px; background:#dfdfdf; border-radius:3px; font-size:14px; color:#444; transition:all .3s;}
#product-type li .sub-menu a:last-child{margin-right:0;}
#product-type li .sub-menu a:hover{background:#FFF;}

/* float-product */
#float-product{position:fixed; left:0; top:-100px;width:100%; padding:10px; background:rgba(0,0,0,.8); text-align:center; box-sizing:border-box; transition:all .6s; z-index:8;}
#float-product.active{top:0;}
#float-product > li{display:inline-block; padding:0 10px;}
#float-product > li > a{display:inline-block; padding:3px 10px; border-radius:5px; font-size:14px; color:#FFF;}
#float-product > li > a:hover{background:#FFF; color:#444;}

#float-product .sub-menu{position:absolute; left:0; top:100%; display:none; width:100%; background:rgba(255,255,255,.9);}
#float-product .sub-menu a{display:inline-block; margin:5px; padding:5px 10px; font-size:14px; color:#444; transition:all .3s;}
#float-product .sub-menu a:hover{color:#CCC;}

#float-product > li.active > a{background:#FFF; color:#444;}

/* product-list */
#product-list h2 span{float:right; margin-top:5px; font-size:14px; color:#444;}
#product-list h2 span a{display:inline-block; margin:0 5px; color:#444;}
#product-list h2 span a:hover ,
#product-list h2 span a.active{color:#1baacc;}
#product-list .wrap{overflow:hidden;}
#product-list .wrap dl{float:left; width:24%; margin:1% 1.33% 0 0}
#product-list .wrap dl:nth-child(4n){margin-right:0;}
#product-list .wrap dt{position:relative; margin-bottom:10px; overflow:hidden;}
#product-list .wrap dt:before{content:""; position:absolute; left:0; top:0; display:block; width:100%; height:100%; background:rgba(0,0,0,.8); opacity:0; transition:all .3s;}
#product-list .wrap dt img{display:block; width:100%; height:auto;}
#product-list .wrap dt .control{position:absolute; left:0; top:150%; width:100%; margin-top:-20px; text-align:center; transition:all .3s;}
#product-list .wrap dt .control a{position:relative; display:inline-block; width:40px; height:40px; margin:0 10px; background:url(../images/product_list_control.png); border-radius:50%; text-indent:-9999px; color:#333; transition:all .3s;}
#product-list .wrap dt .control a.view{background-position:left top;}
#product-list .wrap dt .control a.addcart{background-position:right top;}
#product-list .wrap dt .control a:hover{opacity:.6;}

#product-list .wrap dt:hover:before{opacity:1;}
#product-list .wrap dt:hover .control{top:50%;}

#product-list .wrap dd{font-size:14px; color:#444;}
#product-list .wrap dd .brand{font-weight:bold;}
#product-list .wrap dd p{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
#product-list .wrap dd .price{display:block; margin-top:5px; overflow:hidden; color:#999;}
#product-list .wrap dd .price:before{content:"$ ";}
#product-list .more{padding-top:50px; text-align:center;}
#product-list .more a{display: inline-block; padding:5px 10px; background:#1baacc; font-size:14px; color:#FFF; transition:all .3s;}
#product-list .more a:after{content:" +";}
#product-list .more:hover{opacity:.6;}

/* footer */
#footer{padding:20px; background:#000; font-size:13px; color:#FFF; text-align:center;}
#footer a{color:#666; transition:all .3s;}
#footer a:hover{color:#CCC;}
#footer .fb{display:block; width:40px; height:40px; margin:0 auto 10px auto; background:url(../images/fb.png); text-indent:-9999px;}
#footer .fb:hover{opacity:.6;}

/* side-function */
#side-function{position:fixed; right:20px; bottom:20px; z-index:1}
#side-function a{display:block; width:45px; height:45px; background:url(../images/side_function.png) #1baacc; border-radius:50%; text-indent:-9999px; transition:all .3s;}
#side-function a.gotop{margin-bottom:10px; background-position:left top;}
#side-function a.cart{background-position:right top;}
#side-function a:hover{background-color:#666;}





/* RWD */
@media screen and (max-width:1000px){
/* header */
#header .wrap{padding:10px 0;}
#logo{margin:0;}
#navigation{display:none;}
/* mobile */
#mobi-btn{display:block;}
/* slider */
#slider .item .wrap h2{font-size:50px;}
/* float-product */
#float-product{display:none !important;}
/* hot-product */
#hot-product .wrap dl{width:32.33%; margin:10px 1.5% 10px 0 !important;}
#hot-product .wrap dl:nth-child(3n){margin-right:0 !important;}
/* product-list */
#product-list .wrap dl{width:32.33%; margin:10px 1.5% 10px 0 !important;}
#product-list .wrap dl:nth-child(3n){margin-right:0 !important;}
}

@media screen and (max-width:768px){
/* slider */
#slider .item{padding:0 50px;}
#slider .owl-nav{display:none;}
/* brand */
#brand .owl-nav{opacity:1;}
/* container */
#container{padding:20px 0;}
#container .left .ad{margin-bottom:20px;}
/* hot-product */
#hot-product{margin-bottom:20px;}
#hot-product .wrap{margin-bottom:20px;}
#hot-product .wrap dl{width:49%; margin:10px 2% 10px 0 !important;}
#hot-product .wrap dl:nth-child(3n){margin-right:2% !important;}
#hot-product .wrap dl:nth-child(2n){margin-right:0 !important;}
#hot-product .ad{display:none;}
#hot-product .media{margin:0 auto 20px auto;}
/* product-type */
#product-type{margin-bottom:20px;}
/* product-list */
#product-list .wrap dl{width:49%; margin:10px 2% 10px 0 !important;}
#product-list .wrap dl:nth-child(3n){margin-right:2% !important;}
#product-list .wrap dl:nth-child(2n){margin-right:0 !important;}
#product-list .wrap dt:before{display:none;}
#product-list .wrap dt .control{top:auto !important; bottom:0; overflow:hidden;}
#product-list .wrap dt .control a{float:left; width:50%; height:auto; margin:0; padding:10px 0; background:rgba(0,0,0,.9); border-radius:0; font-size:14px; color:#FFF; text-align:center; text-indent:0; box-sizing:border-box;}
#product-list .wrap dt .control a.view{border-right:1px solid #FFF;}
}

@media screen and (max-width:480px){
/* header */
#header{position:static;}
/* search */
#search{position:static;}
#search .wrap .search{width:100%; margin:0;}
#search .wrap .keyword{display:none;}
/* slider */
#slider .item{height:400px !important;} 
#slider .item .wrap h2{font-size:30px;}
/* container */
#container .left .ad{display:none;}
/* hot-product */
#hot-product .wrap dl{float:none; width:100%; margin:10px auto !important;}
/* product-type */
#product-type{display:none;}
/* product-list */
#product-list h2 span{float:none; display:block;}
#product-list .wrap dl{float:none; width:100%; margin:10px auto !important;}
}