@charset "utf-8";

body {
  --color:#6c757d;
  --border-color:#dee7ef;
  --primary:#658bb1;
  --secondary:#6c757d;
  --success:#74a980;
  --info:#17a2b8;
  --warning:#e6ad01;
  --danger:#9f0d1b;
  --light:rgba(100,140,180,.4);
  --dark:#343a40;
   --light-color:#edf2f6;
}

body {background:url(../images/global_bg.gif)}

@media (min-width:1280px){
	.container-xl {max-width:calc(100% - 30px)}
}
@media (min-width:1366px){
	.container-xl {max-width:calc(1366px - 30px)}
}

a {color:var(--color)}
a img {display:block; margin:0 auto}
a:hover {color:var(--primary)}
a.text-link {color:#00468C; text-decoration:underline; word-break:break-all}

h1 {font-size:1.5rem; font-weight:bold; color:var(--primary)}

@media (min-width:767px) {
	.col-form-label {text-align:right}
}
article > div {background-color:#fff}

.bg-light-color {background-color:var(--light-color)}

header {height:300px; position:relative; background-repeat:no-repeat; background-position:center -2em; background-image:url(../images/ss.jpg)}
header #logo {padding-top:2.5em}
#hotrank_counter {position:absolute; right:2rem; bottom:1rem}

@media (min-width:992px) and (max-width:1199px) {
	header {height:300px; background-position:center center; background-size:auto 100%}
}
@media (min-width:768px) and (max-width:991px) {
	header {height:200px; background-position:left center; background-size:auto 110%}
}
@media (max-width:812px) {
	header {height:146px; background-position:center center; background-size:auto 126%}
}
@media (max-width:767px) {
	header {height:120px; background-position:left center; background-size:auto 100%}
	header #logo {max-width:220px; padding-top:1em}
}
@media (max-width:736px) {
	header {height:136px; background-position:center center; background-size:auto 125%}
}
@media (max-width:667px) {
	header {height:126px; background-position:center center; background-size:auto 120%}
}
@media (max-width:568px) {
	header {height:116px; background-position:center center; background-size:auto 111%}
}
@media (max-width:414px) {
	ul {padding-left:1.5rem}
	header {height:106px; background-image:url(../images/ss-m.jpg); background-position:center center; background-size:auto 103%}
	header #logo {max-width:200px; padding-top:.5em}
	#hotrank_counter {right:.5em; bottom:.5em}
}
@media (max-width:320px) {
	header {height:100px; background-position:center center; background-size:auto 100%}
}

aside {padding-top:1rem}
time {font-size:.75rem; color:#6c757d}

.home_service {padding:5px 0 0 250px}
.home_service li {float:left; margin-right:5px; line-height:30px}
.home_service li img {float:left; margin-right:3px}

/*搜尋 熱門關鍵字*/
#search ul {padding-top:.5rem; margin-bottom:0; font-size:.85rem}
@media (min-width:1200px){
	#search {display:flex; justify-content:flex-end}
	#keywords {width:300px}
}

/*----- 返回頂端 -----*/
.gotoTop {position:fixed; bottom:10rem; right:1rem; z-index:9999}
.gotoTop a {color:#6c757d; opacity:.6}
.gotoTop a:hover {opacity:.85}

#cart {position:fixed; bottom:50vh; right:.5rem; z-index:999; width:4rem; height:4rem}
#cart a {position:relative;}
#cart .fas, #inquiry .fas {line-height:inherit}

.btn-outline-secondary {border-color:var(--border-color)}

.Box {border-radius:1rem; border:3px solid var(--border-color)}
.Box h3 {background:#6c757d; padding:3px 1rem; min-width:8rem; height:32px; font-size:1.35rem; color:#fff; border-radius:.75rem 0 0 0; letter-spacing:.1rem; display:inline-block; position:relative; top:-1rem; left:-13px}
.Box h3:before {content:''; border-left:10px solid transparent; border-right:10px solid #333; border-bottom:10px solid transparent; position:absolute; bottom:-10px; left:-10px;}
.Box h3:after {content:''; border-left:17px solid #6c757d; border-right:30px solid transparent; border-bottom:33px solid transparent; position:absolute; top:0; right:-46px}
.Box > ul {padding-left:1rem}
.Box .active {background-color:#f2dede; border-color:#f2dede; color:#444}
.Box .list-group-item {display:flex; justify-content:space-between; align-items:center; padding:.25rem .75rem}
.Box .list-group-item:hover {background-color:#6c757d; color:#fff; text-decoration:none}
.Box .list-group-item:hover .badge {background-color:#ccc; color:#6c757d}

.box_categories {padding:0; margin-right:0; text-align:center}
.box_categories li {margin-bottom:10px}
.box_categories li a {display:block}
.box_categories strong, .list_category strong {font-weight:normal; display:block; line-height:1.8em}

/*module/categorie_listing/categorie_listing.html 商品目錄列表*/
.list_category {border-radius:1rem; background-color:var(--light-color)}
.list_category a.painter_img img {align-self:flex-end; border-radius:1rem; overflow:hidden}

/* -- 導覽列 --*/
.breadcrumb::before {font-family:"Font Awesome 5 Free"; font-weight:900; content:"\f21d"; font-size:1.4rem;  padding-right:.3rem; line-height:1}

@media (max-width:767px) {
	.breadcrumb {padding:0; font-size:.9rem}
	.breadcrumb-item + .breadcrumb-item{padding-left:.2rem; padding-right:.2rem}

}

.navbar {background:#e9ecef; padding:0 1rem}
.navbar .sub_0 {font-size:1.5rem}

.headTitle {margin-bottom:.5rem; padding-bottom:.25rem; border-bottom:5px solid var(--border-color); display:flex; justify-content:space-between}
.headTitle h2 > i {opacity:.6}
.headTitle h2 .badge {font-size:65%; font-weight:normal}
.headTitle h2 small {display:inline-block; font-size:70%; letter-spacing:-1px}

@media (max-width:768px) {
	.headTitle h2 {font-size:1.4rem}
	.headTitle .categories_img {max-width:50px}
	.headTitle .text-secondary {display:block; font-size:.95rem}
}
@media (max-width:414px) {
	.headTitle h2 small {line-height:1.7}
	.headTitle .col {padding:0 0 0 .5rem}
	.headTitle h2 {font-size:1.3rem}
	.headTitle h4 {font-size:1.2rem}
	.headTitle .categories_img {max-width:45px}
	.headTitle .text-secondary {font-size:.85rem}
}
@media (max-width:320px) {
	.headTitle h2 {font-size:1.2rem}
	.headTitle h4 {font-size:1.1rem}
	.headTitle .categories_img {max-width:40px}
}

main .card {border:none; margin-bottom:1.5rem; border-bottom:4px solid var(--light-color)}
main .card .card-body {padding:.25rem 0}
main .card .card-title {margin-bottom:.5rem}
@media (max-width:414px) {
	main .card .card-title .text-secondary{display:block}
}
.requirement::before {content:'※'; padding-right:.4rem; font-size:.75rem; color:var(--danger)}

/* 內容管理 */
#content {padding:.5rem 4rem}
#content p {line-height:1.7; letter-spacing:1px; text-indent:2rem; color:#555; text-align:justify}
#content p > img, #content p > a img {margin-left:-2rem}
#content h5 {font-size:1.15rem}
@media (max-width:1366px) {
	#content {padding:.5rem 2rem}
}
@media (max-width:1024px) {
	#content {padding:.5rem 1rem}
}
@media (max-width:768px) {
	#content {padding:0}
	#content p {line-height:1.5; letter-spacing:normal}
}

#link {margin-bottom:.3rem; background:#6c757d}
#link .nav-link {color:#fff}
#link .nav-link.active {background-color:#41464b}
#link a:hover {background-color:#41464b}

#footer-link {text-align:center; color:var(--border-color); font-size:1.1rem; margin:2rem 0}
#footer-link > a {margin-right:.35rem; display: inline-block}
#footer-link > a:not(:last-child)::after {content:'|'; color:var(--border-color); margin-left:.35rem}

@media (max-width:414px) {
	#footer-link {font-size:.9rem; margin:1rem 0}
}
/*----- 頁腳 ------*/
footer {margin-top:.5rem; padding:.25rem 0; text-align:center; border-top:2px solid var(--border-color)}
footer h6 {font-size:1.35rem; font-weight:bold}
footer h6 a {display:inline}
footer address {margin-bottom:0}
footer address span {white-space:nowrap; padding-left:1rem}
footer ul {padding:2px}
footer ul li {display:inline-block; padding-right:.8rem}
@media (max-width:414px) {
	footer h6 {font-size:1.25rem}
	footer address {font-size:.9rem}
}
/* =========== NAVBAR ============ */
.NavBar {margin-top:1.5rem; letter-spacing:1px; display:flex; justify-content:space-between; align-items:center; flex-direction:column}
.NavBar .pagination > .active > a, .pagination>.active>a:focus, .pagination>.active>a:hover, .pagination>.active>span, .pagination>.active>span:focus, .pagination>.active>span:hover {border:none}
.NavBar .pagination {margin:0; padding:.5rem 0}
.NavBar .pagination > li:first-child > a, .NavBar .pagination > li:last-child > a {border-radius:50%}
.NavBar .pagination a {color:inherit; border-radius:50%; margin-right:3px}
.NavBar .pagination > .active > a {background-color:var(--border-color); color:#fff}

@media (min-width:769px) {
	.NavBar {flex-direction:row}
}
@media (max-width:767px) {
	.NavBar {margin:10px 0 5px; padding:5px 10px; letter-spacing:normal}
}
@media (max-width:414px) {
	.NavBar {padding:0}
}
@media (max-width:320px) {
	.NavBar .pagination a {padding:.35rem .55rem}
}

.accordion .accordion-toggle {display:block}
.accordion .accordion-toggle:hover {text-decoration:none}
.accordion .accordion-toggle::before, .accordion .accordion-toggle.collapsed::before, .history-back::before{font-family:"Font Awesome 5 Free"; font-weight:900}
.accordion .accordion-toggle::before /*展開時*/{content:'\f078'; color:#ccc; margin-right:3px}
.accordion .accordion-toggle.collapsed::before /*合起來*/{content:'\f054'; color:#ccc; margin-right:3px}
.accordion > .card-header:hover, .accordion .accordion-toggle:not(.collapsed){background-color:var(--border-color)}

/* 按鈕 */
.Botton {display:flex; align-items:flex-start; justify-content:space-around; border-top:5px solid var(--border-color); margin-top:1rem; padding-top:1rem}
.history-back::before {content:'\f3e5'; font-size:1.2rem; padding-right:.3rem; opacity:.5}

.model, .date {font-size:.75rem; color:#6c757d}

#header {position:absolute; top:-30px; right:0}
#header > div {float:left; margin-right:3px; position:relative}
#header .heading {cursor:pointer; height:30px; border:2px solid #C60909; color:#fff; line-height:30px; font-size:0.85em; padding-left:1em; padding-right:1em; border-radius:7px 7px 0px 0px; background: rgb(244,75,48); background:linear-gradient(to bottom, rgb(244,75,48) 0%,rgb(241,111,92) 50%,rgb(198,9,9) 52%,rgb(231,56,39) 100%)}

#header .heading .badge {position:absolute; top:-8px; right:-4px; color:#333; background:rgb(254,252,234); background:radial-gradient(ellipse at center, rgb(254,252,234) 0%,rgb(241,218,54) 50%)}

#header .heading > a i {color:#FAA}
#header .heading > a {color:#fff}
#header .heading .fa-caret-down {padding:10px 0; color:#F99}
#header .heading:hover .fa-caret-down {transform:rotate(180deg);-webkit-transform:rotate(180deg); color:#F93}

#header .open {border:3px solid #C60909; border-bottom:none; background:#fff}
#header .open > a {color:#C60909}
#header .open a:hover {text-decoration:none}
#header .open a .fa-caret-down {transform:rotate(180deg)}
#header .open .content {top:25px; border:3px solid #C60909; border-top:none; box-shadow:0 6px 12px rgba(0, 0, 0, .175); width:28em; padding:.7em; min-height:150px; max-height:370px; overflow:auto; border-top:none; border-radius:0px 0px 7px 7px; box-shadow:0px 2px 2px #C60909; background:#FFF; color:#333}
#header .open .content td {vertical-align:middle}
#header .open .content .btn-warning {padding:6px}
@media (min-width:992px) and (max-width:1199px) {
	#header .open .content {width:26.5rem}
}
@media (min-width:768px) and (max-width:991px) {
	#header .open .content {width:24.5em; padding:.4rem}
}

#header .open .dropdown-menu-right {right:-3px}
#header .open .dropdown-menu-left {left:-3px}
#header #viewed.open .content li {display:inline-block; border:1px solid #CCC}

.dropdown-menu.show {max-height:20rem; overflow:auto}

.form-control::-moz-placeholder {color:#888}
.form-control::-webkit-input-placeholder {color:#888}

@media (min-width:1200px) {
	.list_category h3 {left:-37px}
}
@media (min-width:992px) and (max-width:1199px) {
	.list_category h3 {left:-37px}
}
@media (min-width:768px) and (max-width:991px) {
	.headTitle {letter-spacing:normal}
	/* .col {padding-left:10px; padding-right:0} */
}
@media (max-width:767px) {
	.list_category {padding:0 0 0 4px; margin-left:0; margin-right:0}
	.list_category h3 {font-size:15px}
}

#manufacturers {padding:0 2rem}
#manufacturers .fa-building {width:70px; height:70px; font-size:40px; line-height:1.5; text-align:center}

.btn.navbar-toggle small {display:block; font-size:70%; color:#898d90; letter-spacing:2px}

@media (min-width:1200px) {

}
@media (min-width:992px) and (max-width:1199px) {
	#manufacturers {padding:0 1rem}
}
@media (min-width:768px) and (max-width:991px) {
	#manufacturers {padding:0 .5rem}
	.btn-group .btn {padding:.375rem .5rem}
}
@media (max-width:767px) {
	#manufacturers {padding:0}
}
@media (max-width:414px) {
	#manufacturers .fa-building {height:64px; font-size:40px; line-height:1.4}
	.btn-group .btn {padding:.25rem}
}
@media (max-width:320px) {
	#manufacturers .fa-building {height:48px; font-size:30px; line-height:1.3}
	.btn-group .btn {padding:.2rem}
}
 /* 首頁 */
#myCarousel {margin-left:-1rem; margin-right:-1rem}
@media (max-width:414px) {
	.carousel-inner img {max-width:120%; position:relative; right:10%}
	.carousel-indicators {margin-bottom:0}
}

#sitemap h5 {display:flex; align-items:center}
.rounded-circle.img {border:2px solid #cdd5dc; padding:2px}
#sitemap h5 a {padding-bottom:.5rem; border-bottom:2px dashed #cdd5dc; flex-grow:1; font-weight:bold; font-size:1.4rem; letter-spacing:.1rem}
#sitemap h5 a small {letter-spacing:normal; font-size:1rem}

.media:hover {background-color:#edf2f6}
.help:hover {cursor:help}