body {font-size:16px; text-align: center; font-family: "Arial","微軟正黑體","Microsoft JhengHei", serif; }
img { width:100%; }
html * { max-height: 9999999px; }
a { text-decoration: none; }
/* ====== 共用樣式 ====== */
/* 商品 */
.pdname { color:#262626; }
.price1 { color:#262626; }
.price2 { color:#919191; }

/* 圖片cover */
.gbox { overflow: hidden; }
.gbox .wh { height:100% !important; width:auto !important; }
.gbox .ww { width:100% !important; height:auto !important; }

/* 正方形區塊 */
.SquareBase { position: relative; width:100%; padding-top:100%; }
.SquareBase .SquareArea { position: absolute; top:0px; left:0px; bottom:0px; right:0px; overflow: hidden; } 

input.send,
a.send,
button.send { width:100%; border:none; border-radius: 5px; background-color:#e21b13; color:#fff; padding:10px 0px; }
button.send:hover { background-color:#90120c; color:#fff; }
button.back { float:right; padding:10px 20px; background-color:#262626; color:#fff; border-radius:5px; width:160px; border:none; }
button.back:hover { background-color:#90120c; color:#fff; }
button.back i { font-size:1.5rem; float:left; }
a.send { display: block; text-decoration: none; text-align: center; } 
a.send:hover { background-color:#90120c; }

/* topnb */
.topnb { position: absolute; top:0px; width:100%; height:80px; background-color:rgba(255,255,255,0.8); }
.topnb .logo { padding:0px 0px; display: inline-block; position: relative; z-index:5; }
.topnb .logo img { width:auto; height:80px; }
.topbtn { position: absolute; width:100%; top:0px; }
.mbtns .mbtn { position:relative; width:80px; height:80px; border:none; background-color:transparent; float:left; color:#474747; display:flex; align-items:center; justify-content: center;  }
.mbtns .mbtn:hover { color:#919191; }
.mbtns .mbtn:hover > .dp_menu { display: block; }
.mbtns .mbtn .dp_menu { display: none; padding:10px; width:100%; position: absolute; left:0px; top:80px; }
.mbtns .mbtn .dp_menu a { text-decoration: none; color:#474747; }
.mbtns .mbtn .dp_menu a:hover { color:#919191; }
.mbtns .mbtn:hover { cursor: pointer; }
.mbtns .mbtn img { width:auto; }
.mbtns .menubtn img { width:30px; height:auto; }
.mbtns .menubtn .menuicon { width:30px; height:21px; background: url("./images/ico-menu-1.png")no-repeat center center; background-size:contain; }
.mbtns .menubtn:hover .menuicon { background: url('./images/ico-menu-1b.png')no-repeat center center; background-size:contain; }

.menu { z-index:10; position: fixed; padding:35px; width:375px; max-width:100%; height:100vh; background-color:#fff; transition:all 0.3s ease-out; left:-375px; top:0px; }
.mask { z-index:5; position: fixed; top:0px; left:0px; width:100%; height:100vh; background-color:rgba(0,0,0,0.8); display: none; }
.menu .cloz { padding-bottom:30px; }
.menu .cloz .clozicon { width:22px; height:22px; background:url("./images/ico-close-1.png")no-repeat center center; background-size:contain; }
.menu .clozicon:hover { cursor: pointer; background:url('./images/ico-close-1b.png')no-repeat center center; background-size:contain; }
.menu a { display: inline-block; padding:10px 0px; color:#262626; font-size:1.125rem; }

/* footer */
.footer { background-color:#262626; }
.footer .detail { padding-top:40px; border-bottom:1px solid #474747; }
.footer .detail .tit { color:#919191; padding-bottom:25px; font-size:1.125rem; }
.footer .detail .fd { padding-bottom:40px; }
.footer .detail .cont , .footer .detail .cont a { color:#fff; }
.footer .detail .cont .name { color:#f1f1f1; }
.footer .detail .cont .gm { font-size:0.875rem; }

.footer .cont .icon { display:flex; align-items:center; justify-content: center; }
.footer .cont .icon a { height:24px; width:24px; border-radius: 50px; background-color:#fff; color:#1b1b1b; padding:5px 0px; margin:0px 5px; font-size:0.875rem; }
.footer .cont .icon a:hover { background-color:#90120c; color:#fff; }
.footer .cont .icon .lineImg { background:url("./images/icon_line.png") no-repeat center center; background-size:16px; background-color:#fff; }
.footer .cont .icon .lineImg:hover { background: url("./images/icon_line-b.png") no-repeat center center; background-size:16px; background-color:#90120c; }

.footer .cont2 { display: flex; justify-content: space-between; padding:20px 0px; font-size:0.875rem; }
.footer .cont2 , .footer .cont2 a { color:#fff; }

/* .fill { background-color: #66493d; } */

/* sidebar */
.sidebar { position:fixed; right:0px; top:70%;  z-index:2; transition: right 0.3s; }
.sidebar > div { width:80px; height:80px; }
.sidebar .member { padding:16px 0px; }
.sidebar .icon { font-size:1.5rem; }
.sidebar .member .name { font-size:0.8rem; font-weight: bold; }
.sidebar .buycar { position: relative; }
.sidebar .buycar .num { position: absolute; top:13px; right:15px; width:24px; height:24px; line-height:24px; border-radius: 50%; font-size:0.8rem; }
.sidebar .buycar,.sidebar .totop { padding:28px 0px; }
/* .sidebar .totop {  } */
/* .sidebar .totop:hover { background-color: #ff9f1c; opacity: 0.8; color:#fff; } */
.sidebar .member .bd { width:20px; border-bottom:1px solid #d1d1d1; position: absolute; top:80px; left:30px; }
.sidebar , .bottombar > button { color:#262626; background-color: rgba(255,255,255,0.8); }
.sidebar > div:hover , .bottombar > button:hover { background-color: #e21b13; cursor: pointer; color:#ffda00; }
.sidebar .buycar .num , .bottombar .buycar .num { border-radius: 50%; color:#fff; background-color:#ff4500; }
/* .sidebar .buycar:hover , .bottombar .buycar:hover {  } */
.sidebar > div:hover .num , .bottombar > button:hover .num { background-color: #ff4500; color:#fff; }
.sidebar .totop , .bottombar .totop { background-color:rgba(255, 218, 0, 0.8); color:#e21b13; }
.sidebar .totop:hover , .bottombar .totop:hover { background-color:#e21b13; color:#ffda00; }

/* bottombar */
.ctlbar { transition: bottom .3s; /*transition-delay: .5s;*/ }
.bottombar { position:fixed; bottom:0px; width:100%; display:flex; z-index:2; }
.bottombar > button { flex:1; padding:12px 0px 4px 0px; border:none; }
.bottombar .name { padding-top:2px; font-size:0.8rem; }
.bottombar .icon { font-size:1rem; }
.bottombar .buycar .icon span { position: relative; }
.bottombar .buycar .num { position: absolute; top:-10px; right:-10px; width:16px; height:16px; line-height:16px;  font-size:0.7rem; font-weight:normal; }
.bottombar .totop { padding:21px 0; }
/* .bottombar > button:hover .num { background-color:#ec4067; } */

/* modal */
.clickable { cursor: pointer; }
#searchModal .close { position: absolute; right:0px; top:-50px; color:#ffffff; text-shadow:none; opacity: 1; }
#searchModal .modal-dialog { margin:8rem auto; max-width:730px; }
#searchModal .modal-content { border-radius: 0; text-align: left; }
/* .modal .modal-body { padding:14px; } */
#searchModal .modal-body input { border:none; width:calc(100% - 40px); border-right:1px solid #c6c6c6; }
#searchModal .modal-body .fa-search { color:#262626; width:30px; text-align: right; border:none; background-color:transparent; padding:0px; }
#searchModal .modal-body .fa-search:hover  { color:#90120c; }

::-webkit-input-placeholder{ color:#777777; }

/* product */
.product .pd > a { display: block; overflow: hidden; }
.product .pd > a img { transition: all .2s ease-out; }
.product .pd > a:hover img { transform: scale(1.1);  }

@media (min-width:1500px){
    .footer .container { max-width:1490px; }
}

@media (min-width:1200px){
    .bottombar { display: none; }
}

@media (max-width:1199.98px){
    .sidebar { display: none; }
    
    .mbtns .menubtn { float:right; }
    

    /* topnb */
    .topnb { height:50px; }
    .topnb .logo img { height:50px; }
    .topnb .mbtns .mbtns { width:100%; }
    .topnb .mbtns .mbtn { width:60px; height:50px; margin-left:10px; }
    
}

@media (min-width:992px) and (max-width:1199.98px){
    /* .topnb .logo img {  max-height:54px; margin:3px 0px; } */
}

@media (min-width:768px) and (max-width:991.98px){

}

@media (min-width:768px){

}

@media (max-width:767.98px){

    .bottombar > div { padding:15px 0px; }
    .bottombar .icon { font-size:1rem; }
    .bottombar .name { font-size:0.7rem; }
    .bottombar .totop { padding:12px 0px; }
    .bottombar .buycar .num { top:-8px; right:-8px; width:16px; height:16px; line-height:16px; font-size:0.6rem; }

    .modal .modal-dialog { margin:8rem auto; max-width:540px; width:90%; }

    .footer .detail .tit { padding-bottom:10px; }
    .footer .cont2 { display: block; }
    .footer .cont2 > div { padding:10px 0px; }
    
}