@charset "utf-8";
/*******************************************************************************
* Version 1.0 Release;
* Copyright 2018
******************************************************************************/

/*========================================基本樣式*/
html *{
	/* outline: 1px solid #f00; */
}
html *::before, 
html *::after {
	/* outline: 1px solid blue; */
}
body{
	content: "xs";
	background: #222;
}
:root {
	--cubic:cubic-bezier(0.165, 0.84, 0.44, 1);
	--blue-main: #002852;
	--blue-light: #033e7c;
	--blue-lighter: #074d97;
	--gray-blue: #f3f7fb;
}

/* 反白 */
::-moz-selection {
	color: #fff;
	background: #ff6666;
}
::selection {
	color: #fff;
	background: #ff6666;
}

/*========================================元件樣式*/
/*------------------------------隱藏------------------------------*/
.hide {
	display: none;
}
.hide-scrollbar::-webkit-scrollbar {
	display: none;
}
.clearfix:after{
	clear: both;
	content: " ";
	display: block;
	height: 0;
	line-height: 0;
}
/*------------------------------裝飾------------------------------*/
.border {
	border: 1px solid #ddd;
}
.bg-light {
	background: #fff;
	color: #555;
}
.bg-light .btn--default {
	color: inherit;
	border-color: #999;
}
.bg-light .btn--primary {
	color: #fff;
	background: #CC0000;
	border-color: #CC0000;
}
.bg-light .btn--default:active,
.bg-light .btn--default:focus,
.bg-light .btn--default:hover,
.bg-light .btn--primary:active,
.bg-light .btn--primary:focus,
.bg-light .btn--primary:hover {
	background: #7D0000;
	border-color: #7D0000;
	color: #fff;
}
.bg-dark {
	background: #000;
}
.bg-primary {
	background: #7D0000;
}


.text-center {
	text-align: center;
}
.text-indent-2 {
    text-indent: 2em;
}
@keyframes fadeIn {
	0% {
		opacity: 0;
	}
}
@keyframes fadeInUp {
	0% {
		opacity: 0;
		transform: translateY(-40px);
	}
}
@keyframes fadeInDown {
	0% {
		opacity: 0;
		transform: translateY(40px);
	}
}
@keyframes fadeInLeft {
	0% {
		opacity: 0;
		transform: translateX(-25px);
	}
}
@keyframes fadeInRight {
	0% {
		opacity: 0;
		transform: translateX(25px);
	}
}

/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	/*========================================基本樣式*/
	body{
		content: "s";
	}
	/* 原價 */
	.price-sell{
	}
	/* 原價 */
	.price-offer{
	}
	.hide-md {
		display: none;
	}
	.block-md {
		display: block;
	}
	.img-md-cover {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
}
/*如果使用者之視窗寬度>=769px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 769px) {
	body{
	}
}
/*如果使用者之視窗寬度 =1024px(橫向)iPad，將會再載入這裡的 CSS。*/
@media (max-device-width: 1024px) and (orientation: landscape) {
	body{
	}
}
/*如果使用者之視窗寬度>=1024px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 1024px) {
	/*========================================基本樣式*/
	body{
		content: "m";
	}
	.hide-lg.hide-lg {
		display: none;
	}
	.block-lg {
		display: block;
	}
	.hover-mask {
		position: relative;
	}
	.hover-mask::before {
		content: '';
		pointer-events: none;
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: #000;
		transition: opacity .3s;
		opacity: 0;
		z-index: 1;
	}
	.hover-mask:hover::before {
		opacity: .06;
	}
}
@media screen and (min-width: 1440px) {
	body{
		content: "l";
	}
}
@media screen and (min-width: 1920px) {
	body{
		content: "xl";
	}
}