@charset "UTF-8";
:root{
    --ci1:#BA0012; --ci2:#292929; --white:#fff; --brand:#878787; --price:#bfbfbf; --mprice:#ff3d3d; --title:#4b4b4b; --gray1:#e5e9ef;
}
html{background: #F5F5F5; font-size:14px;}
*, body, header, footer, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, h6, strong, button, span, .btn, select, option{font-size:1rem; line-height:1.4; font-weight:400; font-family:Arial, 'Noto Sans TC', '微軟正黑體'; text-decoration:none; text-shadow:none; margin:0; padding:0; color:#4B4B4B;}
section{width:calc(100% - 2rem); max-width:82.5rem; margin:0 auto; position: relative;}
section:after{content:''; display: block; clear:both;}
.hideit{display: none;} .fl{float: left;} .fr{float: right;}  .clear{clear: both;} .clearUp{content:''; display: block; clear:both;}
.slick-track{width:100% !important;} .slick-dots li button::before{font-size:1.5rem !important;}
header{padding-bottom:1rem; box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.10); background: #fff; position: fixed; z-index: 900; width:100%; left:0; top:0;}
header .tools{background: #C30D23; margin-bottom:1rem; padding:0.5rem 0.5rem; text-align: right;}
header .tools, header .tools *{color:var(--white); font-size:0.875rem;}
header section{max-width:87.5rem;}
header .logo{width:12.75rem; display: inline-block; float:left;}
header .logo img{width:100%;}
header .search{border:1px #c1c1c1 solid; position: absolute; right:1rem; top:0.7rem; padding:0.2rem 0.5rem; border-radius: 2.25rem; width:8rem;}
header .search input{background: transparent; border:none; font-size:0.875rem; font-weight: 400; width:calc(100% - 1.125rem);}
header .search button{background:url('../images/search.svg') no-repeat center; border:none; width:1.125rem; height: 1.125rem; float: right;}
#nav{position: absolute; left:20rem; top:0.8rem;}
#nav ul{margin:0; padding:0;}
#nav ul li{list-style: none; display:inline-block; position: relative;}
#nav ul li a{font-size:0.875rem; line-height:1; padding:0.25rem 0.5rem; display: inline-block;}
#nav ul li:hover .subnav{display: inline-block;}
#nav .subnav{position: absolute; background:var(--white); display: none; left:0; top:1.5rem; width:12rem; box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.10);}
#nav .subnav a{display: block; line-height: 1; padding:0.5rem 0.5rem;}
#navation{position: absolute; right:0; top:0.8rem; font-size:2rem; display: none;}
main{margin:6.5rem 0 1rem 0; padding:2rem 0;}
body#index main{margin-top:15rem;}
footer{background: #373737; text-align: center;}
footer section{padding:0.75rem 1rem;}
footer, footer *{color:var(--white); font-size:0.75rem;}
.btn{background:var(--ci1); color:var(--white); line-height: 1; border:1px var(--ci1) solid; border-radius:0.25rem; padding:0.5rem 0.75rem; display: inline-block; font-weight: 900; cursor: pointer;}
.btn:hover{background:var(--white); color:var(--ci1);}
.go2buy{text-align: center; margin:2rem 0;}
.c2{margin:1rem 0 1rem -1rem;}
.c2 li{list-style: none; width:calc(50% - 1rem); float: left;}
.c2 li:nth-child(even){float: right;}
#title{font-size:2.18rem; font-weight: bold; line-height: 1.4; border-bottom:1px var(--gray1) solid; padding-bottom:0.25rem; margin-bottom: 1rem;}
.area_title{color:var(--ci2); font-size: 1.625rem; font-weight: 900; margin-bottom:1rem; position: relative;}
.area_title .more{color:var(--ci2); position: absolute; right: 0; display: inline-block; padding-right:1rem;}
.area_title .more:after{content:''; width:0.52144rem; height: 0.938rem; background:url('../images/arrow_r.svg') center; background-size:cover; display: inline-block; position: absolute; right: 0; top:0.26rem;}
#indexBanners{margin-top:-8rem; margin-bottom:2rem;}
#indexBanners, #indexBanners a{width:100%; display: block;}
#indexBanners a{background: no-repeat center; padding-bottom:37%; background-size:auto 100%;}
.slick-dots{bottom:1rem;}
.slick-dots li button:before{font-size: 5rem; width:5rem; height: 5rem; text-shadow: 1px 1px 0 #fff;}
div.brand a{color:var(--price); font-size: 0.75rem;}
div.title{color:var(--title); font-size:0.875rem;}
div.price{display: inline-block; font-size: 0.75rem; color:var(--price); text-decoration: line-through;}
div.mprice{position: absolute; right: 0.5rem; bottom:0.5rem; color:var(--mprice); font-weight: 700;}
.hotProducts .slick-slide{width:16.667%; margin-right:1rem; padding-bottom:0.5rem; background:var(--white); border-radius:0.25rem; position: relative;}
.hotProducts .slick-slide:after{content: ''; display: block; clear:both;}
.hotProducts .slick-slide .img{width:100%; padding-bottom: 100%; display: block; background:no-repeat center; background-size: contain; border-radius:0.25rem 0.25rem 0 0; margin-bottom:1rem;}
.hotProducts .slick-slide > div{margin-left:0.5rem;}
.hotList{background:var(--ci1); border-radius: 0.25rem; padding:1.5rem 1rem 1rem 1rem; margin-bottom:2rem;}
.hotList h5{color:var(--white); font-size: 1.625rem; font-weight:900; margin-bottom:0.75rem;}
.brandsList .slick-slide{width:25%;}
.brandsList a{width:calc(100% - 1rem); padding-bottom:69.8%; display: block; background: no-repeat center; background-size:cover;}
.products_list{margin-left:-1rem; margin-bottom:1.5rem;}
.products_list li{list-style: none; position: relative; width:16.6667%; margin-left:1rem; background:var(--white); border-radius:0.25rem; padding-bottom:0.5rem;}
.products_list li .img{width:100%; padding-bottom: 100%; display: block; background:no-repeat center; background-size: contain; border-radius:0.25rem 0.25rem 0 0; margin-bottom:1rem;}
.products_list li .title{overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}
.products_list li div{margin-left:0.5rem;}
.c4 li{width:calc(25% - 1rem);}
.dir{margin-bottom: 20px; color:#c6c6c6;}
.dir a{color:#c6c6c6; display: inline-block;}
.dir a.active, .dir a:hover, .dir a:nth-last-child(1){color:#1f1f1f;}
.mc_box{margin-bottom: 20px;}
.mc_box a{font-size: 1.2rem; line-height: 1; color:#c6c6c6; border-left:1px #c6c6c6 solid; display: inline-block; padding: 0 5px;}
.mc_box a:nth-child(1){border:none; padding-left: 0;}
.mc_box a.active, .mc_box a:hover{color:#1f1f1f;}
#brands_products_preview li{list-style: none; margin-bottom: 20px;}
#brands_products_preview li:after{content: ''; display: block; clear: both;}
#brands_products_preview li .brand_img{width:40%; padding-bottom:28%; float: left; background: no-repeat center; background-size: cover; display: inline-block;}
#brands_products_preview li .brand_img img{width:100%;}
#brands_products_preview li .items{border:1px #000 solid; float: left; width:calc(29% - 1rem); margin:0 0 1rem 1rem; padding:0.5rem 1rem; background:var(--white);}
#brands_products_preview li .items:after{content:''; display: block; clear: both;}
#brands_products_preview li .items .img{float: left; margin-right: 10px; width:44%; padding-bottom: 44%; display: inline-block; background: no-repeat center; background-size: cover; transform:translate(-1rem, -0.5rem);}
#brands_products_preview li .items .rank{text-align: right; font-family: Arial; font-weight: bold; font-size: 1.4rem; margin-bottom: 10px;}
#products_imgs{width:40%; padding-bottom: 40%; float: left; margin-bottom: 20px; position: relative; overflow: hidden;}
#products_imgs a{width:100%; padding-bottom: 100%; display: block; background: no-repeat center; background-size: cover; opacity: 0; transition: all .3s ease; position: absolute; z-index: 0;}
#products_imgs a:nth-child(1), #products_imgs a.active{opacity: 1; z-index: 1;}
#products_info{width:50%; float: right; margin-bottom: 20px;}
#products_info .description{margin:1rem 0;}
#products_info h1{font-size:1.2rem; font-weight:700; color:var(--ci1);}
#products_info h6{margin-bottom:0.5rem; font-weight:700;}
#products_info .stock{display: inline-block; padding: 5px 10px; border:1px #999 solid; cursor: pointer;}
#products_info .stock.active{background:#980023; color:#fff;}
#products_info .numBox{float: left; margin:0 20px 0 0;}
#products_info .btn{margin:0; width:45%;}
#price{font-size: 1.6rem; color:#999; transition: all .3s ease;}
#price.hasMprice{text-decoration:line-through;}
#mprice{font-size: 1.6rem; transition: all .3s ease; color:#980023;}
.mobile-x{display:inline-block !important;} .mobile{display: none !important;}

@media screen and (max-width:1123px) {
    #nav{display: none;} #navation{display: inline-block;}
    header .search{right:3rem;}
    #products_imgs{padding-bottom:100%;}
    #products_imgs, #products_info{width:100%; float:none;}
    ul.col4 li{width:calc(50% - 20px);}
    ul.col4 li:nth-child(2n + 1){margin-left: 0; clear: left;}
}
@media screen and (max-width:700px) {
    .mobile-x{display:none;} .mobile{display: inline-block;}
}

@media print{
    html, body{ width:100%; height:auto; overflow:auto; }
}