@charset "UTF-8";
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);

/* ---------- reset ----------*/
html, body, div, span, h1, h2, h3, h4, h5, h6, p, b, u, i, center,
dl, dt, dd, ol, ul, li,fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, footer, header, hgroup, menu, nav{ margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline;}
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section { display: block;}
ol, ul {list-style: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
table { border-collapse: collapse; border-spacing: 0;}
input, select { vertical-align:middle; }
a { font-size:100%; text-decoration:none; vertical-align:baseline; background:transparent; margin:0; padding:0; }
img { outline:0; margin: 0; padding: 0;}
b { font-weight:bold;}

/*---------- default ----------*/
body,html { height:100%;}
body { font-family:"Noto Sans TC",'Microsoft JhengHei', sans-serif; color:#555;}
h3 { font-size:50px; line-height:60px;}
h4 { font-size:40px; line-height:50px;}
h5 { font-size:30px; line-height:40px;}
p { font-size:20px; line-height:30px;}
.txt-center { text-align:center;}
.blue { color:#00c7e9;}
.white { color:#fff;}
.dark { color:#4a453c;}
img { max-width:100%!important; height: auto!important; _width:expression(this.width > 100 ? "100%" : this.width)!important;}
.m-t-m { margin-top:20px;}
.bg-y { background:#fcd23e;}
input,textarea,select,button{ border-radius:0; outline:none; -webkit-appearance: none; border:none; box-shadow:none; -moz-box-shadow:none; -webkit-box-shadow:none;}
.wrapper { position: relative; width:100%; max-width: 600px; margin: 0 auto;}
/*---------- header ----------*/
header { width:100%; height: 60px; background:#fff; position: fixed; top:0; left:0; z-index:10; border-bottom: 1px solid #ddd;}
header .inner{ width: 100%; max-width: 600px; margin: 0 auto; position: relative;}
header .logo { position: absolute; left: 60px; top: 5px;}
header .search { width:150px; border-bottom:1px solid #ddd; position: absolute; left: 50%; top: 5px; margin-left: -75px;}
header .search input[type="text"]{ width: 100px; height: 40px; vertical-align: middle; font-size: 18px; margin: 0; padding: 0;}
header .search input[type="submit"] { display: inline-block; cursor: pointer; width: 40px; height: 40px; vertical-align: middle; background: url(../images/icon-search.png) no-repeat center; background-size:40px 40px; margin: 0; padding: 0;}
a.menu_btn { display: block; position: absolute; left: 10px; top: 5px; width:46px; height:46px; background:url(../images/icon-menu.png) no-repeat center; background-size:46px 46px;}
a.menu_btn.active { background:url(../images/icon-x.png) no-repeat center; background-size:46px 46px;}
header .cart { position: absolute; right: 42px; top: 5px;}
header .member{ position: absolute; right: 10px; top: 5px;}


nav { display: none; position:fixed; left:0; top:61px; z-index:20; width: 100%; height: calc( 100% - 60px ); background: #fff; overflow-y: auto;}
nav ul{ width: 100%; max-width: 600px; margin: 0 auto; position: relative;}
nav ul li { background:url(../images/icon-arrow.png) no-repeat right 20px top 18px; background-size: 8px 20px;}
nav ul li a { display:block; font-size: 16px; padding:15px 20px; color:#333; border-bottom:1px solid #ddd;}
nav ul li.active { }
nav ul li:hover a,nav ul li.active a{}
nav ul li .submenu { display:none; width: 100%; height: 300px; overflow-y: scroll; border-bottom: 1px solid #ddd;}
/*nav ul li .submenu:before { border: solid transparent; content:" "; height: 0; width: 0; position: absolute; left:30px; top: -20px; pointer-events: none; border-bottom-color: #00aeed; border-width: 10px; margin-left: -10px;}*/
nav ul li a.sub.active {}
nav .submenu.fortxt a{ display:block; font-size:15px; line-height: 18px; padding:10px 10px 10px 30px; border-bottom: none; background: #f4f4f4;}
nav .submenu.fortxt a:before { content:"• "; color: #999; display: inline-block; vertical-align: middle; font-size: 20px; font-weight: bold; line-height: 18px; }
nav .submenu.forimg { text-align: center;}
nav .submenu.forimg a{ display: inline-block; width: 48%; padding: 20px 0; color: #666; font-size:15px; border-bottom: none;}

/*---------- footer ----------*/
footer { width: 100%; position:relative; z-index: 15}
footer .footer-img{
    content: url(../images/footer-normal-0129.jpg);
}
footer .links{ position: absolute; left:12%; top: 440px; width: 40%;}
footer .links a{ display: block; font-size: 18px; color:#999; padding: 5px 0; margin-bottom: 12px; cursor: pointer;}
footer .links a:hover { color:#fff;}
footer .about { position: absolute; width: 40%; right: 1%; top: 440px; color:#999; font-size: 12px;}
footer .about a { display: block; font-size: 16px; margin-bottom: 15px; color:#999;}
footer .about a img { vertical-align: middle; margin-right: 3px;}
footer .about .openhour { color: #999; font-size: 12px;}
footer p,footer a{ background: -webkit-linear-gradient(#fff, #ccc);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;}
footer a:hover { opacity: 0.7;}
@media screen and (max-width: 500px) {
    footer .links{ top: 295px; }
    footer .about {  top: 305px;}
    footer .footer-img{
        content: url(../images/footer-long-0129.jpg);
    }
}
@media screen and (max-width: 380px) {
    footer .links{ top: 260px; }
    footer .about {  top: 270px;}
    footer .about a { font-size: 14px; }
    footer .links a { font-size: 14px; }
    footer .footer-img{
        content: url(../images/footer-long-0421.png);
    }
}
@media screen and (max-width: 325px) {
    footer .links{ top: 235px; }
    footer .about {  top: 240px;}
    footer .about a { font-size: 14px; }
    footer .links a { font-size: 14px; }
    footer .footer-img{
        content: url(../images/footer-long-0421.png);
    }
}

/*---------- 首頁 ----------*/
.container { padding-top: 60px;}
.idx-menu { text-align: center; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.idx-menu a{ display: inline-block; width:23.5%; border-right:1px solid #ddd;}
.idx-menu a:last-child { border-right: none;}
.top-banner { position: relative; overflow: hidden;}
.pagination1 { bottom:10px;}
.hot-title { clear: both; margin: 0; padding: 0;}
.hot-prd-wrap { position: relative; height: 230px; border:6px solid #000; clear: both; overflow: hidden; margin-bottom:5px;}
.hot-prd-cate1 { position: absolute; z-index: 0; width: 100%; height: 100%; background:url(../images/idx-cate1.png) no-repeat left center; background-size: contain;}
.hot-prd-cate2 { position: absolute; z-index: 0; width: 100%; height: 100%; background:url(../images/idx-cate2.png) no-repeat left center; background-size: contain;}
.hot-prd-cate3 { position: absolute; z-index: 0; width: 100%; height: 100%; background:url(../images/idx-cate3.png) no-repeat left center; background-size: contain;}
.hot-prd1 { float: right; width: 93%; text-align: center; padding-top:20px; overflow: hidden;}
.hot-prd2 { float: right; width: 93%; text-align: center; padding-top:20px; overflow: hidden}
.hot-prd3 { float: right; width: 93%; text-align: center; padding-top:20px; overflow: hidden}
.pagination1,.pagination2,.pagination3,.pagination4 { text-align: center; }
.video { clear: both;}
@media screen and (max-width: 500px) {
    .hot-prd1 { width:90% }
    .hot-prd2 { width:90%; }
    .hot-prd3 { width:90%; }
}
@media screen and (max-width: 380px) {
    .hot-prd1 { width:89% }
    .hot-prd2 { width:89%; }
    .hot-prd3 { width:89%; }
}
/*---------- 分類頁 ----------*/
.category a{ display: block; margin-bottom: 10px;}
.category a:last-child{ margin-bottom:0;}
.category2 a { display: block;}

/*---------- 商品列表頁 ----------*/
.list {}
.sort { overflow: hidden; color:#fff; font-size: 18px; padding:20px 10px 5px 10px; background: #878787;}
.sort .left { float: left;}
.sort .right { float: right;}
.sort select { background: none; border-bottom: 1px solid #fff; font-size: 18px; color: #fff; padding:3px 5px; vertical-align: middle;}
.sort .arr{ display: inline-block; width: 0; height: 0; border-style: solid; border-width: 8px 5px 0 5px; border-color: #fff transparent transparent transparent;}
.list { clear: both; overflow: hidden;}
.list .box { display: block; float: left; width: 50%; height: 300px; padding-bottom: 20px; margin-bottom: 10px; /*background:url(../images/prd-blod.png) no-repeat right bottom; background-size: cover;*/ position: relative; color: #666;}
.list .box .pimg { position: absolute; left: 20px; top: 20px; display: block;}
.list .box .pname { position: absolute; width: 50%; left: 20px; bottom: 10px; text-align: left; font-size: 15px; word-break: break-all;}
.list .box .pinfo { position: absolute; right: 20px; bottom: 10px; text-align: right; font-size: 14px;}
.list .box .love { position: absolute; left: 10px; top: 10px;}

/*---------- 商品頁 ----------*/
.pd20{ padding:70px 20px 20px 20px;}
.prd-bd { border:1px solid #ddd; padding: 20px; margin-bottom: 20px;}
.prd-bd2 { border:1px solid #ddd; padding: 20px;}
.prd-title { font-size: 18px; font-weight: bold; color: #333; line-height: 25px; margin-bottom: 20px;}
.prd-info { color: #666; font-size: 16px; line-height: 30px;}
.prd-num { margin-bottom: 10px;}
.input-num { display: inline-block; vertical-align: middle; margin-left: 10px; width: 50px; padding: 5px; border: 1px solid #ddd; font-size: 16px; color: #666; margin-bottom: 10px;}
.btn-buy { margin-top: 10px;}
.prd-detail { color: #666; font-size: 16px; line-height: 25px;}
.contact .links { overflow: hidden;}
.contact .links a { display: block; float: left; width: calc( 50% - 1px) ; text-align: center; background: #333;}
.contact .links a:first-child { border-right: 1px solid #fff;}
.contact .links a:last-child { border-left: 1px solid #fff;}