@charset "utf-8";
/*******************************************************************************
 * Version 1.0 Release;
 * Copyright 2018
 ******************************************************************************/
/*========================================基本樣式*/
html *{
	/* outline: 1px solid #f00; */
}
body{
	content: "xs";
}
: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: #074d97;
	background: var(--blue-lighter, #074d97);
}
::selection {
	color: #fff;
	background: #074d97;
	background: var(--blue-lighter, #074d97);
}

/*========================================元件樣式*/
/*------------------------------隱藏------------------------------*/
.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-gray {
	background: #f7f7f7;
}
/*------------------------------表格------------------------------*/
/* 價格區 */
.pricebox{
}
/* 原價 */
.price-sell{
	color: #888;
	font-size: 14px;
	margin-bottom: 5px;
}
/* 原價 */
.price-offer{
	color: #2071aa;
	/*color: var(--blue-light, #033e7c);*/
	/* font-weight: bold; */
	margin-bottom: 5px;
}
/* 中文 */
.price-cht{
	margin-right: 5px;
}
/* 數值 */
.price-num{
	display: inline-block;
}
/* 數值 -前綴*/
.price-num:before{
	content: "NT$";
	display: inline;
	/* margin-right: .3125em; */
}
.price-num-simple:before{
	content: "$";
	display: inline;
	margin-right: .15em;
}
/* 原價 */
.price-sell-num{
	text-decoration: line-through;
}
/* 特價 */
/* .price-offer-num{
	font-size: 20px;
}
.price-offer-num:before{
	font-size: 16px;
} */

/* 手機認證 */
.phone-verify {
	position: relative;
	display: inline-block;
	font-size: 0;
	vertical-align: middle;
	color: #555;
	width: 26px;
	margin: -4px 0;
}
.phone-verify::before,
.phone-verify::after {
	font-family: 'icomoon';
}
.phone-verify::before {
	content: "\e92c";
	font-size: 22px;
}
.phone-verify::after {
	content: "\e92b";
	background: radial-gradient(#fff 40%, rgba(255,255,255,0) 41%);
	border-radius: 50%;
	color: #999;
	position: absolute;
	right: 0;
	top: 0;
	font-size: 16px;
}
.phone-verify--success::after {
	content: '\e913';
	color: #30b386;
}

/* 會員註冊&資料完成 文字區 */
.info-finish {
	display: none;
}
.info-finish--show {
	display: block;
}

/*如果使用者之視窗寬度>=768px，將會再載入這裡的 CSS。*/
@media screen and (min-width: 768px) {
	/*========================================基本樣式*/
	body{
		content: "s";
	}
	/* 原價 */
	.price-sell{
	}
	/* 原價 */
	.price-offer{
	}
	.hide-md {
		display: none;
	}
	.block-md {
		display: block;
	}
}
/*如果使用者之視窗寬度>=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";
	}
}