@charset "UTF-8";
html, body, div, p, a, table, td {
	/*font-family: "Source Sans Pro", Arial, Helvetica, sans-serif;*/
	/*font-family: Arial, Helvetica, sans-serif;*/
	font-family: 'Roboto', Arial, sans-serif;
	letter-spacing: 1px;
}
body {
	margin: 0;
	background-color: #fff;
}
.browserupgrade {
    margin: .2em 0;
    background: #ccc;
    color: #000;
    padding: .2em 0
}

iframe.map { max-width: 100%; }

.btn-warning {
    background-color: #fd3f04 !important;
    border-color: #fd3f04 !important;
	color: #fff !important;
	border-radius: .7em !important;
	border:2px #fd3f04 solid !important;
	font-weight: 600 !important;	
}
.btn-warning:hover,.btn-warning:active {
    background-color: #fff !important;
    border-color: #fd3f04 !important;
	color: #fd3f04 !important;
}
.btn-warning:focus, .btn-warning.focus {
  color: #fff !important;
  background-color: #fd3f04 !important;
  border-color: #fd3f04 !important;
  box-shadow: 0 0 0 0.2rem rgba(253, 63, 4, 0.5)!important;
}


.button {
  width: 300px;
  height: 80px;
  background: dodgerblue;
  border-radius: 6px;
  transition: all .3s cubic-bezier(0.67, 0.17, 0.40, 0.83);
}

.button svg {
  transform: rotate(180deg);
  transition: all .5s;
}

.button__circle {
  width: 120px;
  height: 120px;
  background: mediumseagreen;
  border-radius: 50%;
  transform: rotate(-180deg);
}

.button:hover {
  cursor: pointer;
}

.tick {
  color: white;
  font-size: 2em;
  transition: all .9s;
}



.color-purple { color: #fd3f04; }
.bg-purple { background-color: #fd3f04 !important; }
.modal { background: rgba(0, 0, 0, .7); }
#modal-cart-message .request:link, #modal-cart-message .request:visited { background-color: #fd3f04; color:#fff; padding: .8em 2em; border-radius: .7em; }
#modal-cart-message .continue { background-color: #fff; color:#fd3f04; border-color: #fd3f04; padding: .6em 1.8em; border-radius: .7em; }
#modal-cart-message #cart-msg1 { padding-top: 2em; }
/*company*/
#modal-thank-message .continue { background-color: #fff; color:#fd3f04; border-color: #fd3f04; padding: .6em 1.8em; border-radius: .7em; }
#modal-thank-message #thank-msg { padding-top: 2em; color: #fff; }


/*頁面擋住*/
#page-mark {
	position: fixed; left: 0; top: 0; 
	width: 100%; height: 100%; 
	background: rgba(0, 0, 0, .5); z-index: 10000;
}

@media (min-width: 576px) {
	.modal-dialog {
		height: 100%;
		margin: 10em auto;
	}
}
#page-body {
	margin-top: 10rem;
}
#page-body.st1 { margin-top: 8em; }
#page-body .rel-link { clear:both;  padding-top: 1em;}
#content a:link, #cintent a:visited { color: #000; }
#content img { max-width: 100%; height: auto; }
#content iframe { max-width: 100%; }
#header { text-align:center;
	
	-webkit-transition: background-color 0.2s linear;
	-moz-transition: background-color 0.2s linear;
	-o-transition: background-color 0.2s linear;
	transition: background-color 0.2s linear;
}
#header .hd { background-color: rgba(242, 242, 242, 1); }
#header.op .hd { background-color: rgba(242, 242, 242, .8); }
#header h1 { padding-bottom: 0; text-align:left; }
#header .logo a { display:block; }
#header .logo img { max-width: 100%; height: auto; }
#header .toplink { display: flex; width: 100%; justify-content: flex-end; margin-right: 1em; transition: translateY, transform 0.35s; }
#header .lang, #header .lang.active { font-size: .8em; line-height: 1.7em; width: 2em; height:2em; margin-top: .3em; display: inline-block; text-decoration: none; }
#header .lang:link, #header .lang:visited {
	border: 1px #666 solid; color: #666;
}
#header .lang:hover {
	background-color: #666;
	color: #fff;
}
#header .lang.active:link, #header .lang.active:visited {
	background-color: #666;
	color: #fff;
}
#header .ft {
	width: 100%;
	height: 28px;
	margin: 0;
	background-color: transparent;
	/*background:  rgb(204,204,204);*/
	/*background: linear-gradient(180deg, rgba(214,214,214, .8) 30%, rgba(255,255,255, 1) 60%);*/
	background:url(../images/bg-menu-ft2.png) top center repeat-x;
}
/*選單詢價車*/
.cart-top { margin-right: .5em; display: inline-block; }
.cart-top a:link, .cart-top a:visited { color: #666; position: relative; text-decoration: none; }
.cart-top a:hover { text-decoration: none; opacity: .8; }
.cart-top a span { position:absolute; top: -1em; right: -.5em; background-color:#fd3f04; color: #fff; border-radius: 100%; font-size: .6em; }

#fm-search { width: 10em; }
#fm-search .s1 { background-color: #fff; border-color: #F2F2F2; font-size: .8em; padding: 2px .5em; width: 10em; }
#fm-search .btn-search { background-color: transparent; border: none; padding-left: 0; padding-right: 0; color: #666666; }
#fm-search .btn-search:hover { opacity: .8; }


.prod-item .inquiry {
	position:absolute;
	z-index: 99;
	right: .2em;
	top: 0;
	font-size: 1.5em;
	color: #fff;
	opacity: .8;
}
.prod-item .ico-cart { width: .8em; height: 1.3em; padding: 0; }
.prod-item .ico-cart svg { height: 1.3em; margin: 0; }
.prod-item .ico-cart svg polygon { fill:#ddd !important; stroke:#FFFFFF !important; stroke-width:.5 !important; }
.prod-item .inquiry.on { opacity: 1; }
.prod-item .inquiry.on .ico-cart svg polygon { fill:#fd3f04 !important; stroke:#FFFFFF !important; stroke-width:.5 !important;  }


#footer {
	margin-top: 1em;
	background-color: #dad4d4; color: #504644;
	padding-top: 1em;
	padding-bottom: 1em;
}
#footer .footer-heading {
	color: #504644;
	font-size: 1em;
	margin-bottom: 1em;
}
#footer ul li { margin-left: 1.5em; text-indent: -1.5em; }
#footer .logo { width: 100%; display:block; border-right: #fff 3px solid; }
#footer .logo img { max-width: 90%; height:auto; }
#footer p { margin: 0; line-height: 130%; margin-bottom: .5em; }
#footer a:link, #footer a:visited { color: #504644; }
#footer .tagcloud { font-size: 1.3em; }
#footer .tagcloud a:link, #footer .tagcloud a:visited { padding: 3px 5px; text-decoration: none; box-shadow:#D5D5D5; }
#footer .tagcloud .fb:link, #footer .tagcloud .fb:visited { background-color: #3a558c; color: #fff; }
#footer .tagcloud .skype:link, #footer .tagcloud .skype:visited { background-color: #30a7df; color: #fff; }
#footer .tagcloud .linkedin:link, #footer .tagcloud .linkedin:visited { background-color: #046a90; color: #fff;  }
#footer .tagcloud .twitter:link, #footer .tagcloud .twitter:visited { background-color: #30a7df; color: #fff; }

.footer span {
    color: #0062C4;
}

.i_show {
	/*
	-webkit-transform: translateY(0em);
    transform: translateY(0em);
	*/
	margin-top: 0em;
}
.i_hide {
	/*
	-webkit-transform: translateY(-2.6em);
    transform: translateY(-2.6);
	*/
	margin-top: -2.6em;
}
#fm-search .dropdown-menu.show { padding: 0; }

@media (min-width: 768px) {
	/*#header .toplink .logo-s { width: 60%; margin-left: 1em;  }*/
}
@media (min-width: 992px) {
	#header .toplink .logo-s { display: none; }
}
@media (min-width: 992px) {
	#header h1 { padding-top: .5em; }
	#header h1.s1 { padding-top: 0;}
	#header .toplink .logo-s { width: 60%; margin-left: 1em;  }
}
@media (min-width: 1200px) {
	#header h1 { padding-top: 0.2em; }
}
@media (min-width: 1400px) {
	#header h1 { padding-top: 0em; }
}
@media (min-width: 1400px) {
	.col-xxl-4 {
		position: relative;
		width: 33.333%;
	    flex: 0 0 33.333%;
		max-width: 33.333%;
	}
}
@media (max-width: 1280px) {
	#page-body.st1 { margin-top: 6em; }
}
@media (max-width: 992px) {
	#header h1 { margin: 0 auto; text-align:center; }
	/*#header .toplink { justify-content: center; }*/
}
@media (max-width: 991px) {
	#header .logo-l { background-color: #fff; }
	#header .toplink { margin-bottom: .5rem; }
	#header .toplink .logo-s { width: 85%; margin-left: .5rem; }
	#header .toplink .logo-s img { width: 50%; height:auto; }
	#footer .logo { border: none; text-align:center; }
	/*.logo-l { display: none; }*/
	#page-body { margin-top: 7.5rem; }
	#page-body.st1 { margin-top: 7.5rem; }
}
@media (max-width: 768px) {
	#header .toplink .logo-s { width: 85%; margin-left: 1em; }
	#header .toplink .logo-s img { width: 70%; }
}
@media (max-width: 767px) {
	#header .toplink {
    	justify-content: flex-end;
		/*padding-top: .7em;*/
	}
	#header .toplink .logo-s { width: 75%; }
	
	#header .ft {
		height: 10px;
		/*opacity: .6;*/
		background-color: transparent;
		background:url(../images/bg-menu-ft3.png?20210825v2) top center no-repeat;
		background-size: 100% 100%;
	}
	
	/*#header .row:last-child { display: none; }*/
	#fm-search .s1 { width: 100%; background-color: #fff; }
	#fm-search { width: 1rem; }
	.cart-top a img { height: 1.5rem; width:auto; }
	.cart-top { margin-top: 0 !important;}
	
	#content iframe { max-width: 100%; height: 12rem; }
}
@media (max-width: 576px) {
	#header .toplink { display: flex; justify-content: flex-start; margin: 0 auto; }
	#header .lang, #header .lang.active { margin: auto 0; }
	#header .toplink .logo-s img { width: 95%; }
}

@media (max-width: 550px) {
	#header .logo img { max-width: 100%; height:auto; margin: .1em auto; }
}