body {

	font-family: "微軟正黑體", sans-serif;

	/* font-family: Noto Sans TC,"微軟正黑體",sans-serif; */

	/*g-font-size:16*/

	font-size: 1.14286rem;

	color: #333333;

}

a {

	color: rgb(51, 51, 51);

	word-break: break-all;

}

ul ul,

ol ul {

	list-style-type: none;

}



.g-min-width-60 {

	min-width: 60px !important;

}

.g-bg-lightred {

    background-color: #cd0000 !important;

}

.g-bg-lightred--hover:hover {

    background-color: #cd0000 !important;

}

.g-bg-gray-2 {

	background-color: #CD0000;

}



.g-bg-line {

	background-color: #00B900;

}



.g-bg-blue-2{

	background-color: #00389A;

}

.g-bg-blue-2--hover:hover{

	background-color:#316DD6;

}



.g-bg-blue-3{

	background-color: #316DD6;

}



.g-bg-gray-2{

	background-color: #989898;

}

.g-bg-gray-3{

	background-color: #404040;

}

.g-bg-gray-3--hover:hover{

	background-color:#2d2d2d;

}

.only-one-line {

	overflow: hidden;

	white-space: nowrap;

	text-overflow: ellipsis;

}

.only-two-line{

	overflow: hidden;

    word-wrap: break-word;

    display: -webkit-box;

    -webkit-box-orient: vertical;

    -webkit-line-clamp: 2;

}



.mid-banner {

	background-size: cover;

	background-repeat: no-repeat;

	background-position: center;

}



.text-shadow-1 {

	text-shadow: 2px 2px 3px #434a54;

}



.box-shadow-1 {

	box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.25);

}



.g-ma-auto {

	margin: auto;

}

.btn-link {

    color: #e91e63;

}

.btn-link:hover {

    color: #c11d55;

}



.g-bg-red-2 {

    border-color: #E9677C !important;

}



.g-brd-red-2{

    border-color: #E9677C !important;

}



.g-brd-blue-1{

	border-color: #316DD6;

}



[class*="u-nav-v5"].u-nav-primary .nav-link.active {

	border-color: #CD2838;

	color: #CD2838;

}



@media (max-width: 1199.99px) {

	.responsive-width {

		width: 1000px;

	}

}



.origin-price{

	text-decoration: line-through;

}



/*頁籤*/

.page-item.active .page-link {

    z-index: 1;

    color: #fff;

    background-color: #9a9a9a;

    border-color: #9a9a9a;

}

.page-link {

    border: 1px solid #ccc;

    padding: 3px 10px 3px 10px;

    margin-right: 8px;

    border-radius: 3px;

    -moz-border-radius: 3px;

    -webkit-border-radius: 3px;

    background: #fff;

    text-decoration: none;

    color: #999;

}

.page-link:hover {

	z-index: 2;

	text-decoration: none;    

	border: 1px solid #31ACE2;

    background-color: #31ACE2;

    color: #fff;

}



.page-link:focus{

	border: 1px solid #31ACE2;

    background: #F0FDFF;

    color: #31ACE2;

}



.page_one{

    border: 1px solid #31ACE2;

    background: #F0FDFF;

    color: #31ACE2;

}



.page{

	display: flex;

	justify-content: center;

}



/*按鈕*/

.btn-danger {

    color: #fff;

    background-color: #9a9a9a;

    border-color: #9a9a9a;

}

.btn-danger:hover {

    color: #fff;

    background-color: #525252;

    border-color: #525252;

}

.btn-danger:not(:disabled):not(.disabled).active, .btn-danger:not(:disabled):not(.disabled):active, .show>.btn-danger.dropdown-toggle {

    color: #fff;

    background-color: #525252;

    border-color: #525252;

}

.btn-danger:not(:disabled):not(.disabled).active:focus, .btn-danger:not(:disabled):not(.disabled):active:focus, .show>.btn-danger.dropdown-toggle:focus {

    box-shadow: 0 0 0 0rem #868686 !important;

}

.btn-danger-2 {

	color: #fff;

    background-color: #dc3545;

    border-color: #dc3545;

}

.btn-danger-2:hover {

    color: #fff;

    background-color: #c82333;

    border-color: #bd2130;

}



/*手機版右上按鈕*/

.navbar-light .navbar-toggler {

	color: #fff;

	border-color: rgba(0, 0, 0, 1);

}



.hamburger-inner,

.hamburger-inner:after,

.hamburger-inner:before {

	position: absolute;

	width: 24px;

	height: 2px;

	transition-timing-function: ease;

	transition-duration: .15s;

	transition-property: transform;

	border-radius: 0px;

	background-color: #000;

}



.hamburger {

	padding-top: 20px;

}



/*上橫幅修改*/

@media (min-width: 1200px) {

	.g-bg-header {

		background: #bce1fc;

	}



	.navbar-light .navbar-nav .nav-link {

		color: #fff;

		font-weight: 700;

	}



	.navbar-light .navbar-nav .nav-link:focus,

	.navbar-light .navbar-nav .nav-link:hover {

		color: #fff;

	}



	.navbar-light .navbar-nav .show>.nav-link {

		color: #626262;

	}

}



@media (max-width: 1199px) {

	.g-bg-header {

		background-color: #fff;

	}



	.navbar-light .navbar-nav .nav-link {

		color: #fff;

	}

}



@media (min-width: 1200px) {

	.navbar-expand-xl .navbar-nav .nav-link {

		font-size: 20px;

		padding-right: 0.93rem;

		padding-left: 0.93rem;

	}

}



.dropdown-toggle::after {

	margin-left: 0.05em;

}



.box-shdow-all{

	box-shadow: 0px 8px 8px 0px #e8e8e8;

}

.box-shdow-page{

	box-shadow: 0px 0px 7px 0px #e4e4e4;

}

.dropdown-item.active, .dropdown-item:active {

	color: #16181b;

    text-decoration: none;

    background-color: #f8f9fa;

}

/*主功能列*/

.navbar {

	box-shadow: 0px 8px 6px 0px #e8e8e8;

}



@media (min-width: 1199px) {

	.navbar-nav li {

		padding-top: 8px !important;

		padding-bottom: 8px !important;

	}

}



.dropdown:hover .dropdown-menu {

	display: block;

}



.dropdown-menu {

	padding: .5rem 0;

	margin: 0;

	color: #212529;

	text-align: left;

	list-style: none;

	background-color: #fff;

	border: 1px solid rgba(0, 0, 0, .15);

	border-radius: 0rem;

}



.dropdown-toggle::after {

	display: inline-block;

	width: 0;

	height: 0;

	/* margin-left: .255em; */

	vertical-align: .255em;

	content: "";

	border-top: 0;

	border-right: 0;

	border-bottom: 0;

	border-left: 0;

}



/*上橫幅動效*/

@media (min-width: 1199px) {



	ul.menu-bg .menu-select a:after {

		width: 100%;

		left: 0;

	}

	.navbar-light .navbar-nav.menu-li-color>.menu-select>a,

	.navbar-light .navbar-nav.menu-li-color>.menu-select>a:focus {

		color: #1e8fea;

	}



	ul.menu-bg li:hover a:after {

		width: 100%;

		left: 0;

	}



	ul.menu-li-color li a:after,

	.navbar-light ul.menu-li-color ul li:after {

		content: "";

		background: #6e92b9;

	}



	ul.menu-bg>li>a:after,

	.navbar-light .navbar-nav ul li:after {

		content: "";

		transition-duration: 0.3s;

		-o-transition-duration: 0.3s;

		-webkit-transition-duration: 0.3s;

		width: 0px;

		right: 0px;

		/* background: #e4280f; */
		background: #ffd67d;

		height: 3px;

		display: block;

		position: absolute;

		bottom: 0px;

	}

}



/*手機版 logo限制寬度*/

@media (max-width: 1400px) {

	.navbar-brand img {

		width: 180px;

	}

}



@media (max-width: 576px) {

	.navbar-brand img {

		width: 135px;

	}

}



@media (max-width: 330px) {

	.navbar-brand img {

		width: 120px;

	}

}



/*產品特效*/

.opacity-blue {

	background-color: rgba(54, 129, 228, 0.9);

	width: 100%;

	height: 100%;

	top: 0px;

}



.opacity-blue {

	transition: opacity .5s;

	opacity: 0;

}



.opacity-blue:hover {

	opacity: 1;

}



.opacity-red {

	background-color: rgba(173, 20, 87, 0.9);

	width: 100%;

	height: 100%;

	top: 0px;

}



.opacity-red {

	transition: opacity .5s;

	opacity: 0;

}



.opacity-red:hover {

	opacity: 1;

}



.btn-default-2 {

	color: #333;

	background-color: #fff;

	border-color: #ccc;

}



.btn-select,

.btn-select:focus,

.btn-select:hover {

	color: #ffffff;

	background-color: #616161;

	border-color: #616161;

}



a:hover {

	text-decoration: none;

}



/*

 youtube跳窗

 */

.mfp-fade.mfp-bg {

	opacity: 0;

	-webkit-transition: all 0.15s ease-out;

	-moz-transition: all 0.15s ease-out;

	transition: all 0.15s ease-out;

}



.mfp-fade.mfp-bg.mfp-ready {

	opacity: 0.8;

}



.mfp-fade.mfp-bg.mfp-removing {

	opacity: 0;

}



.mfp-fade.mfp-wrap .mfp-content {

	opacity: 0;

	-webkit-transition: all 0.15s ease-out;

	-moz-transition: all 0.15s ease-out;

	transition: all 0.15s ease-out;

}



.mfp-fade.mfp-wrap.mfp-ready .mfp-content {

	opacity: 1;

}



.mfp-fade.mfp-wrap.mfp-removing .mfp-content {

	opacity: 0;

}





/* Owl Carousel

 */



 @media (max-width: 1199px) {

	.owl-nav {

		display:none;

	}

}



.owl-theme .owl-nav [class*=owl-] {

	border-radius: 25px;

	background: #ffffff;

}



#sync-index.owl-theme {

	position: relative;

}



#sync-index.owl-theme .owl-next,

#sync-index.owl-theme .owl-prev {

	width: 40px;

	height: 40px;

	margin-top: -37px;

	position: absolute;

	top: 50%;

}



#sync-index.owl-theme .owl-prev {

	left: 10px;

}



#sync-index.owl-theme .owl-next {

	right: 10px;

}



.owl-theme .owl-nav {

	margin-top: 5px;

}



#sync1 .item .item {

	background: #fff;

	padding: 80px 0px;

	margin: 5px;

	color: #FFF;

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;

	border-radius: 3px;

	text-align: center;

}



#sync2 .item {

	background: #fff;

	/* padding: 5px 0px; */

	margin: 5px;

	color: #FFF;

	-webkit-border-radius: 3px;

	-moz-border-radius: 3px;

	border-radius: 3px;

	text-align: center;

	cursor: pointer;

}



#sync2 .item h1 {

	font-size: 18px;

}



#sync2 .current .item {

	background: #fff;

}



#sync2 .current .item img {

	opacity: .7 !important;

}



.owl-theme .owl-nav [class*='owl-'] {

	transition: all .3s ease;

}



.owl-theme .owl-nav [class*='owl-'].disabled:hover {

	background-color: #D6D6D6;

}



#sync1.owl-theme {

	position: relative;

}



#sync1.owl-theme .owl-next,

#sync1.owl-theme .owl-prev {

	width: 22px;

	height: 40px;

	margin-top: -20px;

	position: absolute;

	top: 50%;

}



#sync1.owl-theme .owl-prev {

	left: 10px;

}



#sync1.owl-theme .owl-next {

	right: 10px;

}



.owl-theme .owl-nav {

	margin-top: 5px;

}



/* Styles for dialog window */

[id|=custom-dialog] {

    background: white;

    padding: 20px 30px;

    text-align: left;

    max-width: 400px;

    margin: 40px auto;

    position: relative;

}



/**

 * Fade-move animation for second dialog

 */



/* at start */

.my-mfp-slide-bottom .zoom-anim-dialog {

    opacity: 0;

    -webkit-transition: all 0.2s ease-out;

    -moz-transition: all 0.2s ease-out;

    -o-transition: all 0.2s ease-out;

    transition: all 0.2s ease-out;



    -webkit-transform: translateY(-20px) perspective(600px) rotateX(10deg);

    -moz-transform: translateY(-20px) perspective(600px) rotateX(10deg);

    -ms-transform: translateY(-20px) perspective(600px) rotateX(10deg);

    -o-transform: translateY(-20px) perspective(600px) rotateX(10deg);

    transform: translateY(-20px) perspective(600px) rotateX(10deg);



}



/* animate in */

.my-mfp-slide-bottom.mfp-ready .zoom-anim-dialog {

    opacity: 1;

    -webkit-transform: translateY(0) perspective(600px) rotateX(0);

    -moz-transform: translateY(0) perspective(600px) rotateX(0);

    -ms-transform: translateY(0) perspective(600px) rotateX(0);

    -o-transform: translateY(0) perspective(600px) rotateX(0);

    transform: translateY(0) perspective(600px) rotateX(0);

}



/* animate out */

.my-mfp-slide-bottom.mfp-removing .zoom-anim-dialog {

    opacity: 0;



    -webkit-transform: translateY(-10px) perspective(600px) rotateX(10deg);

    -moz-transform: translateY(-10px) perspective(600px) rotateX(10deg);

    -ms-transform: translateY(-10px) perspective(600px) rotateX(10deg);

    -o-transform: translateY(-10px) perspective(600px) rotateX(10deg);

    transform: translateY(-10px) perspective(600px) rotateX(10deg);

}



/* Dark overlay, start state */

.my-mfp-slide-bottom.mfp-bg {

    opacity: 0;



    -webkit-transition: opacity 0.3s ease-out;

    -moz-transition: opacity 0.3s ease-out;

    -o-transition: opacity 0.3s ease-out;

    transition: opacity 0.3s ease-out;

}



/* animate in */

.my-mfp-slide-bottom.mfp-ready.mfp-bg {

    opacity: 0.8;

}



/* animate out */

.my-mfp-slide-bottom.mfp-removing.mfp-bg {

    opacity: 0;

}







/*marquee*/

.marquee-1{

	border-top: 3px #fff solid;

	border-bottom: 3px #fff solid;

    background-color: #FAF7F3;    

    color: #fff;

    padding-bottom:11px;

    padding-top:11px;

}

.marquee-1 img{

    position:absolute;

    bottom: -2px;

}

.marquee-1 i{

    position:absolute;

    bottom: -2px;

	background-color: #FAF7F3;
}

.marquee-1 .marquee,.marquee-2 .marquee{

    width:100%;

    overflow: hidden;

}

.marquee-1 .marquee span,.marquee-2 .marquee span{

    /* background-color:#f34336; */
    background-color:#f6a113;

    padding:5px;

    margin-right:10px;

    color:#fff;

}

.marquee-1 .marquee a,.marquee-1 .marquee a{

    margin-right:30px;

    color:#000;

}

/*end*/