@charset "utf-8";
/* CSS Document */

/******************************

COLOR PALETTE




[Table of Contents]

1. Fonts
2. Body and some general stuff
3. Home
	3.1 Currency
	3.2 Language
	3.3 Account
	3.4 Main Navigation
	3.5 Hamburger Menu
	3.6 Logo
	3.7 Main Slider
4. Banner
5. New Arrivals
	5.1 New Arrivals Sorting
	5.2 New Arrivals Products Grid
6. Deal of the week
7. Best Sellers
	7.1 Slider Nav
8. Benefit
9. Blogs
10. Newsletter
11. Footer
12. Products
	4.1 Product Sorting
13. Breadcrumbs
14. Sidebar
15. Main Content
16. News 最新消息
17. 按鈕
18. 上方banner
******************************/

/***********
1. Fonts
***********/

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,900');

/*********************************
2. Body and some general stuff
*********************************/

*
{
	margin: 0;
	padding: 0;
}
body
{
	font-family: 'Microsoft JhengHei', sans-serif;
	font-size: 16px;
	line-height: 23px;
	font-weight: 400;
	background: #FFFFFF;
	color: #333;
}
div
{
	display: block;
	position: relative;
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
ul
{
	list-style: none;
	margin-bottom: 0px;
}
p
{
	font-family: 'Microsoft JhengHei', sans-serif;
	font-size: 16px;
	line-height: 1.7;
	font-weight: 500;
	color: #333;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a
{
	display: inline;
	position: relative;
	color: inherit;
	border-bottom: solid 2px #fde0db;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
a, a:hover, a:visited, a:active, a:link
{
	text-decoration: none;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
p a:active
{
	position: relative;
	color: #16852d;
}
p a:hover
{
	color: #16852d;
	/*background: #fde0db;*/
}
p a:hover::after
{
	opacity: 0.2;
}
::selection
{
	/*background: #fde0db;*/
	color: #16852d;
}
p::selection
{
	/*background: #fde0db;*/
}
h1{font-size: 72px;font-family: 'Poppins', sans-serif;}
h2{font-size: 40px;font-weight:600;}
h3{font-size: 28px;}
h4{font-size: 24px; font-weight:600;}
h5{font-size: 16px;}
h6{font-size: 14px;}
h1, h2, h3, h4, h5, h6
{
	color: #282828;
	-webkit-font-smoothing: antialiased;
	-webkit-text-shadow: rgba(0,0,0,.01) 0 0 1px;
	text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
h1::selection,
h2::selection,
h3::selection,
h4::selection,
h5::selection,
h6::selection
{

}
.textField{
    padding-left: 10px;
    width: 180px;
}

::-webkit-input-placeholder
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
:-moz-placeholder /* older Firefox*/
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
::-moz-placeholder /* Firefox 19+ */
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
:-ms-input-placeholder
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
::input-placeholder
{
	font-size: 16px !important;
	font-weight: 500;
	color: #777777 !important;
}
.form-control
{
	color: #db5246;
}
section
{
	display: block;
	position: relative;
	box-sizing: border-box;
}
.clear
{
	clear: both;
}
.clearfix::before, .clearfix::after
{
	content: "";
	display: table;
}
.clearfix::after
{
	clear: both;
}
.clearfix
{
	zoom: 1;
}
.float_left
{
	float: left;
}
.float_right
{
	float: right;
}
.trans_200
{
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.trans_300
{
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.trans_400
{
	-webkit-transition: all 400ms ease;
	-moz-transition: all 400ms ease;
	-ms-transition: all 400ms ease;
	-o-transition: all 400ms ease;
	transition: all 400ms ease;
}
.trans_500
{
	-webkit-transition: all 500ms ease;
	-moz-transition: all 500ms ease;
	-ms-transition: all 500ms ease;
	-o-transition: all 500ms ease;
	transition: all 500ms ease;
}
.fill_height
{
	height: 100%;
}
.super_container
{
	width: 100%;
	overflow: hidden;
}

/*********************************
3. Home
*********************************/

.header
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	background: #FFFFFF;
	z-index: 10;
}
.top_nav
{
	width: 100%;
	height: 50px;
	background: #9E9E9E;
}
.top_nav_left
{
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	font-weight:500;
	color: #ffffff;
	text-transform: uppercase;
}

/*********************************
3.1 Currency
*********************************/

.currency
{
	display: inline-block;
	position: relative;
	min-width: 50px;
	border-right: solid 1px #33333b;
	padding-right: 20px;
	padding-left: 20px;
	text-align: center;
	vertical-align: middle;
	background: #1e1e27;
}
.currency > a
{
	display: block;
	color: #22953a;
	font-weight: 400;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
	text-transform: uppercase;
}
.currency > a > i
{
	margin-left: 8px;
}
.currency:hover .currency_selection
{
	visibility: visible;
	opacity: 1;
	top: 100%;
}
.currency_selection
{
	display: block;
	position: absolute;
	right: 0;
	top: 120%;
	margin: 0;
	width: 100%;
	background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.currency_selection li
{
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
}
.currency_selection li a
{
	display: block;
	color: #232530;
	border-bottom: solid 1px #dddddd;
	font-size: 13px;
	text-transform: uppercase;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.currency_selection li a:hover
{
	color: #22953a;
}
.currency_selection li:last-child a
{
	border-bottom: none;
}

/*********************************
3.2 Language
*********************************/

.language
{
	display: inline-block;
	position: relative;
	min-width: 50px;
	/*border-right: solid 1px #22953a;*/
	border-right: solid 1px #22953a;
	padding-right: 20px;
	padding-left: 20px;
	text-align: center;
	vertical-align: middle;
	/*background:#3fbc59;*/
	background:#37b351;
}
.language > a
{
	display: block;
	color: #fff;
	font-weight: 400;
	height: 50px;
	line-height: 50px;
	font-size: 18px;
}
.language > a > i
{
	margin-left: 8px;
}
.language:hover .language_selection
{
	visibility: visible;
	opacity: 1;
	top: 100%;
}
.language_selection
{
	display: block;
	position: absolute;
	right: 0;
	top: 120%;
	margin: 0;
	width: 100%;
	background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.language_selection li
{
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
}
.language_selection li a
{
	display: block;
	color: #232530;
	border-bottom: solid 1px #dddddd;
	font-size: 16px;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.language_selection li a:hover
{
	color: #22953a;
}
.language_selection li:last-child a
{
	border-bottom: none;
}

/*********************************
3.3 Account
*********************************/

.account
{
	display: inline-block;
	position: relative;
	min-width: 50px;
	padding-left: 20px;
	text-align: center;
	vertical-align: middle;
	background: #1e1e27;
}
.account > a
{
	display: block;
	color: #22953a;
	font-weight: 400;
	height: 50px;
	line-height: 50px;
	font-size: 13px;
}
.account > a > i
{
	margin-left: 8px;
}
.account:hover .account_selection
{
	visibility: visible;
	opacity: 1;
	top: 100%;
}
.account_selection
{
	display: block;
	position: absolute;
	right: 0;
	top: 120%;
	margin: 0;
	width: 100%;
	background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	box-shadow: 0 0 25px rgba(63, 78, 100, 0.15);
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.account_selection li
{
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
}
.account_selection li a
{
	display: block;
	color: #232530;
	border-bottom: solid 1px #dddddd;
	font-size: 14px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.account_selection li a:hover
{
	color: #22953a;
}
.account_selection li:last-child a
{
	border-bottom: none;
}
.account_selection li a i
{
	margin-right: 10px;
}

/*********************************
3.4 Main Navigation
*********************************/

.main_nav_container
{
	width: 100%;
	background: #FFFFFF;
	box-shadow: 0 0 16px rgba(0, 0, 0, 0.15);
}

/* 主要選單設定 Navigation */
.navbar .drop::after, .navbar li li .drop::after{
	position:absolute;
	font-family:"FontAwesome";
	font-size:12px;
	line-height:12px;
}
.navbar ul ul{
	z-index:9999;
	position:absolute;
	width:200px;

	text-transform:none;
}
.navbar ul ul ul{left:200px; top:0;}
.navbar li{
	display:inline-block; 
	position:relative; 
	margin:0 20px 0 0; 
	padding:0;
	
	}
.navbar li:last-child{margin-right:0;}
.navbar li li{
	width:100%;
	margin:0;
}
.navbar li a{display:block; padding:10px 0;}

.navbar li li a{border:solid; border-width:0 0 1px 0;}
.navbar .drop{padding-left:15px;}
.navbar li li a, .navbar li li .drop{display:block; margin:0; padding:10px 10px 10px 10px;}
.navbar .drop::after, .navbar li li .drop::after{content:"\f0d7";}
.navbar .drop::after{
	top:5px;
	left:0px;
}
.navbar li li .drop::after{top:15px; left:5px;}

.navbar ul ul{visibility:hidden; opacity:0;}
.navbar ul li:hover > ul{visibility:visible; opacity:1;}

.navbar
{
	width: auto;
	height: 70px;
	float: right;
	padding-left: 0px;
	padding-right: 0px;
}

.navbar li a{color:inherit;}
.navbar .active a, .navbar a:hover, .navbar li:hover > a{
	color:#22953a;
	background-color:inherit;
}
.navbar li li a, .navbar .active li a{
	text-align:left;
	color:#FFFFFF;
	background-color: rgba(51,51,51,.8);
    border-color: rgba(0,0,0,.6);
}
.navbar li li:hover > a, .navbar .active .active > a{
	color:#FFFFFF;
	background-color:#3fbc59;
}
.navbar form select{
	color:#FFFFFF;
background-color:#000000;
}

/*  */

.navbar_menu li
{
	display: inline-block;
}
.navbar_menu li a
{
	display: block;
	color: #1e1e27;
	font-size: 18px;
	font-weight: 500;
	padding: 0px;
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}
.navbar_menu li a:hover
{
	color: #22953a;
}
.navbar_user
{
	margin-left: 37px;
}
.navbar_user li
{
	display: inline-block;
	text-align: center;
}
.navbar_user li a
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: relative;
	width: 40px;
	height: 40px;
	color: #fff;
	-webkit-transition: color 0.3s ease;
	-moz-transition: color 0.3s ease;
	-ms-transition: color 0.3s ease;
	-o-transition: color 0.3s ease;
	transition: color 0.3s ease;
}
.navbar_user li a:hover
{
	color: #22953a;
}
.checkout a
{
	background: #eceff6;
	border-radius: 50%;
}
.checkout_items
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	position: absolute;
	top: -9px;
	left: 22px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background: #0093CA;
	font-size: 12px;
	color: #FFFFFF;
}

/*********************************
3.5 Hamburger Menu
*********************************/

.hamburger_container
{
	display: none;
	margin-left: 40px;
}
.hamburger_container i
{
	font-size: 24px;
	color: #1e1e27;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.hamburger_container:hover i
{
	color: #22953a;
}
.hamburger_menu
{
	position: fixed;
	top: 0;
	right: -400px;
	width: 400px;
	height: 100vh;
	background: rgba(255,255,255,0.95);
	z-index: 10;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.hamburger_menu.active
{
	right: 0;
}
.fs_menu_overlay
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9;
	background: rgba(255,255,255,0);
	pointer-events: none;
	-webkit-transition: all 200ms ease;
	-moz-transition: all 200ms ease;
	-ms-transition: all 200ms ease;
	-o-transition: all 200ms ease;
	transition: all 200ms ease;
}
.hamburger_close
{
	position: absolute;
	top: 26px;
	right: 10px;
	padding: 10px;
	z-index: 1;
}
.hamburger_close i
{
	font-size: 24px;
	color: #1e1e27;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.hamburger_close:hover i
{
	color: #22953a;
}
.hamburger_menu_content
{
	padding-top: 100px;
	width: 100%;
	height: 100%;
	padding-right: 20px;
}
.menu_item
{
	display: block;
	position: relative;
	border-bottom: solid 1px #22953a;
	vertical-align: middle;
}
.menu_item > a
{
	display: block;
	color: #333;
	font-weight: 500;
	height: 50px;
	line-height: 50px;
	font-size: 14px;
	text-transform: uppercase;
}
.menu_item > a:hover
{
	color: #3fbc59;
}
.menu_item > a > i
{
	margin-left: 8px;
}
.menu_item.active .menu_selection
{
	display: block;
	visibility: visible;
	opacity: 1;
}
.menu_selection
{
	margin: 0;
	width: 100%;
	max-height: 0;
	overflow: hidden;
	z-index: 1;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.menu_selection li
{
	padding-left: 10px;
	padding-right: 10px;
	line-height: 50px;
}
.menu_selection li a
{
	display: block;
	color: #232530;
	border-bottom: solid 1px #dddddd;
	font-size: 13px;
	text-transform: uppercase;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.menu_selection li a:hover
{
	color: #22953a;
}
.menu_selection li:last-child a
{
	border-bottom: none;
}

/*********************************
3.6 Logo
*********************************/

.logo_container
{
	position: absolute;
	top: 50%;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	left: 15px;
}
.logo_container a
{
	font-size: 24px;
	color: #1e1e27;
	font-weight: 700;
	text-transform: uppercase;
}
.logo_container a span
{
	color: #0093CA;
}



/*********************************
4. Banner
*********************************/

.banner
{
	width: 100%;
	background-color:#EAEBE6;
	padding-top:50px;
	padding-bottom:50px;
	margin-top:0;
}
.banner_item
{
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	height: 170px;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.banner_category
{
	
	height: 180px;
	border-radius:10px;
	min-width: 180px;
	padding-left: 25px;
	padding-right: 25px;
	word-break: break-all;
}
.banner_category a
{
	display: block;
	font-size:20px;
	font-weight:600;
	line-height:55px;
	color:#939393;
	text-align: center;
	word-break: break-all;
	-webkit-transition: color 1s ease;
	-moz-transition: color 1s ease;
	-ms-transition: color 1s ease;
	-o-transition: color 1s ease;
	transition: color 1s ease;
}
.banner_category a:hover
{
	color:#3fbc59;
}

.banner_category img a:
{

	position:absolute;
  /* 淡出淡入效果2秒 */
  -webkit-transition: opacity 2s ease-in-out;
  -moz-transition: opacity 2s ease-in-out;
  -o-transition: opacity 2s ease-in-out;
  transition: opacity 2s ease-in-out;
}

.banner_category img:last-child:hover
{
     /* 滑入時第一張透明度設0 */
      opacity:0.8;
}

/*********************************
5. New Arrivals
*********************************/

.new_arrivals
{
	width: 100%;
}
.new_arrivals_title
{
	margin-top: 70px;
}

/*********************************
5.1 New Arrivals Sorting
*********************************/

.new_arrivals_sorting
{
	display: inline-block;
	border-radius: 3px;
	margin-top: 59px;
	overflow: visible;
}
.grid_sorting_button
{
	height: 40px;
	min-width: 102px;
	padding-left: 25px;
	padding-right: 25px;
	cursor: pointer;
	border: solid 1px #ebebeb;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	background: #FFFFFF;
	border-radius: 3px;
	margin: 0;
	float: left;
	margin-left: -1px;
}
.grid_sorting_button:first-child
{
	margin-left: 0px;
}
.grid_sorting_button:last-child
{

}
.grid_sorting_button.active:hover
{
	background: #3fbc59 !important;
}
.grid_sorting_button.active
{
	color: #FFFFFF;
	background: #0093CA;
}

/*********************************
5.2 New Arrivals Products Grid
*********************************/




/*********************************
6. Deal of the week
*********************************/

.deal_ofthe_week
{
	width: 100%;
	margin-top: 41px;
	background: #f2f2f2;
}
.deal_ofthe_week_img
{
	height: 540px;
}
.deal_ofthe_week_img img
{
	height: 100%;
}
.deal_ofthe_week_content
{
	height: 100%;
}
.section_title
{
	display: inline-block;
	text-align: center;
}
.section_title h2
{
	display: inline-block;
}
.section_title::after
{
	display: block;
	position: absolute;
	top: calc(100% + 13px);
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 60px;
	height: 5px;
	background: #007619;
	content: '';
}
.timer
{
	margin-top: 66px;
}
.timer li
{
	display: inline-block;
	width: 120px;
	height: 120px;
	border-radius: 50%;
	background: #FFFFFF;
	margin-right: 10px;
}
.timer li:last-child
{
	margin-right: 0px;
}
.timer_num
{
	font-size: 48px;
	font-weight: 600;
	color: #0093CA;
	margin-top: 10px;
}
.timer_unit
{
	margin-top: 12px;
	font-size: 16px;
	font-weight: 500;
	color: #51545f;
}
.deal_ofthe_week_button
{
	width: 140px;
	background: #1e1e27;
	margin-top: 52px;
}
.deal_ofthe_week_button:hover
{
	background: #2b2b34 !important;
}

/*********************************
7. Best Sellers
*********************************/

.product_slider_container
{
	width: 100%;
	height: 340px;
	margin-top: 73px;
}
.product_slider_container::after
{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 1px;
	height: 100%;
	background: #FFFFFF;
	content: '';
	z-index: 1;
}
.product_slider
{
	overflow: visible !important;
}
.product_slider_item .product-item
{
	height: 340px;
}
.product_slider_item
{
	width: 20%;
}
.product_slider_item .product-item
{
	width: 100% !important;
}

/*********************************
7.1 Slider Nav
*********************************/

.product_slider_nav
{
	position: absolute;
	width: 30px;
	height: 70px;
	background: #0093CA;
	-webkit-transform: translateY(-50%);
	-moz-transform: translateY(-50%);
	-ms-transform: translateY(-50%);
	-o-transform: translateY(-50%);
	transform: translateY(-50%);
	z-index: 2;
	cursor: pointer;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.product_slider_container:hover .product_slider_nav
{
	visibility: visible;
	opacity: 1;
}
.product_slider_nav i
{
	color: #FFFFFF;
	font-size: 12px;
}
.product_slider_nav_left
{
	top: 50%;
	left: 0;
}
.product_slider_nav_right
{
	top: 50%;
	right: 0;
}

/*********************************
8. Benefit
*********************************/

.benefit
{
	margin-top: 74px;
}
.benefit_row
{
	padding-left: 15px;
	padding-right: 15px;
}
.benefit_col
{
	padding-left: 0px;
	padding-right: 0px;
}
.benefit_item
{
	height: 100px;
	background: #f3f3f3;
	border-right: solid 1px #FFFFFF;
	padding-left: 25px;
}
.benefit_col:last-child .benefit_item
{
	border-right: none;
}
.benefit_icon i
{
	font-size: 40px;
	color: #0093CA;
}
.benefit_content
{
	padding-left: 22px;
}
.benefit_content h6
{
	text-transform: uppercase;
	line-height: 18px;
	font-weight: 500;
	margin-bottom: 0px;
}
.benefit_content p
{
	font-size: 12px;
	line-height: 18px;
	margin-bottom: 0px;
	color: #51545f;
}

/*********************************
9. Blogs
*********************************/

.blogs
{
	margin-top: 72px;
}
.blogs_container
{
	margin-top: 53px;
}
.blog_item
{
	height: 255px;
	width: 100%;
}
.blog_background
{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.blog_content
{
	position: absolute;
	top: 30px;
	left: 30px;
	width: calc(100% - 60px);
	height: calc(100% - 60px);
	background: rgba(255,255,255,0.9);
	padding-left: 10px;
	padding-right: 10px;
	visibility: hidden;
	opacity: 0;
	transform-origin: center center;
	-webkit-transform: scale(0.7);
	-moz-transform: scale(0.7);
	-ms-transform: scale(0.7);
	-o-transform: scale(0.7);
	transform: scale(0.7);
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.blog_item:hover .blog_content
{
	visibility: visible;
	opacity: 1;
	transform: scale(1);
}
.blog_title
{
	font-weight: 500;
	line-height: 1.25;
	margin-bottom: 0px;
}
.blog_meta
{
	font-size: 12px;
	line-height: 30px;
	font-weight: 400;
	text-transform: uppercase;
	color: #51545f;
	margin-bottom: 0px;
	margin-top: 3px;
	letter-spacing: 1px;
}
.blog_more
{
	font-size: 14px;
	line-height: 16px;
	font-weight: 500;
	color: #0093CA;
	border-bottom: solid 1px #0093CA;
	margin-top: 12px;
}
.blog_more:hover
{
	color: #3fbc59;
}

/*********************************
10. Newsletter
*********************************/

.newsletter
{
	width: 100%;
	background: #f2f2f2;
	margin-top: 0px;
	padding:1.5em 0;
}
.newsletter_text
{
	height: 120px;
}
.newsletter_text h4
{
	margin-bottom: 0px;
	line-height: 24px;
}
.newsletter_text p
{
	margin-bottom: 0px;
	line-height: 1.7;
	color: #51545f;
}
.newsletter_form
{
	height: 120px;
}
#newsletter_email
{
	width: 300px;
	height: 46px;
	background: #FFFFFF;
	border: none;
	padding-left: 20px;
}
#newsletter_email:focus
{
	border: solid 1px #7f7f7f !important;
	box-shadow: none !important;
}
:focus
{
	outline: none !important;
}
#newsletter_email::-webkit-input-placeholder
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
#newsletter_email:-moz-placeholder /* older Firefox*/
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
#newsletter_email::-moz-placeholder /* Firefox 19+ */
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
#newsletter_email:-ms-input-placeholder
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
#newsletter_email::input-placeholder
{
	font-size: 14px !important;
	font-weight: 400;
	color: #b9b4c7 !important;
}
.newsletter_submit_btn
{
	width: 160px;
	height: 46px;
	border: none;
	background: #0093CA;
	color: #FFFFFF;
	font-size: 14px;
	font-weight: 500;
	text-transform: uppercase;
	cursor: pointer;
}
.newsletter_submit_btn:hover
{
	background: #3fbc59;
}

/*********************************
11. Footer
*********************************/
#f-iso9001{
	position:absolute;
	width:100px;
	height:100px;
	z-index:1;
	left: 75%;
	top: 44px;
}

.footer_nav_container
{
	color:#ddd;
	background:#121111 url(../images/foot_bg.jpg) top right no-repeat;
	height: auto;
	padding-top:1.4em;
	padding-bottom:1.4em;
	text-align:center;
}
.cr
{
	margin-top: 20px;
}
.footer_nav li
{
	display: inline-block;
	margin-right: 45px;
}
.footer_nav li:last-child
{
	margin-right: 0px;
}
.footer_nav li a, .cr
{
	
	font-size: 14px;
	color: #fff;
	line-height: 30px;
	
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
}
.footer_nav li a:hover, .cr a
{
	color: #0093CA;
}
.footer_social
{
	height:0;
	margin-right:2em;
}
.footer_social ul li
{
	display: inline-block;
	margin-right: 10px;
}
.footer_social ul li:last-child
{
	margin-right: 0px;
}
.footer_social ul li a
{
	color: #51545f;
	-webkit-transition: all 300ms ease;
	-moz-transition: all 300ms ease;
	-ms-transition: all 300ms ease;
	-o-transition: all 300ms ease;
	transition: all 300ms ease;
	padding: 10px;
}
.footer_social ul li:last-child a
{
	padding-right: 0px;
}
.footer_social ul li a:hover
{
	color: #0093CA;
}

/*********************************
12. Products
*********************************/

.products_iso
{
	width: 100%;
}
.section_title
{
	display: inline-block;
	text-align: center;
}
.section_title h2
{
	display: inline-block;
}
.section_title::after
{
	display: block;
	position: absolute;
	top: calc(100% + 13px);
	left: 50%;
	-webkit-transform: translateX(-50%);
	-moz-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	-o-transform: translateX(-50%);
	transform: translateX(-50%);
	width: 60px;
	height: 5px;
	background: #007619;
	content: '';
}

/*********************************
12.1 Product Sorting
*********************************/

.product_sorting_container_bottom
{
	margin-top: 24px;
}
.product_sorting_container_bottom .product_sorting
{
	float: right;
}
.product_sorting
{
	display: inline-block;
}
.product_sorting > li
{
	display: inline-block;
	position: relative;
	width: 185px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	border: solid 1px #ecedee;
	padding-left: 20px;
	padding-right: 7px;
	margin-right: 16px;
}
.product_sorting_container_bottom .product_sorting > li
{
	width: 144px;
	margin-right: 0px;
	padding-right: 12px;
}
.product_sorting_container_bottom .product_sorting li span:nth-child(2)
{
	margin-left: 24px;
}
.product_sorting li i
{
	float: right;
	line-height: 40px;
	color: #51545f;
}
.product_sorting li ul
{
	display: block;
	position: absolute;
	right: 0;
	top: 120%;
	margin: 0;
	width: 100%;
	background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	box-shadow: 0 15px 25px rgba(63, 78, 100, 0.15);
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.product_sorting > li:hover ul
{
	visibility: visible;
	opacity: 1;
	top: calc(100% + 1px);
}
.product_sorting li ul li
{
	display: block;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}
.product_sorting li ul li span
{
	display: block;
	height: 40px;
	line-height: 40px;
	border-bottom: solid 1px #dddddd;
	color: #51545f;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.product_sorting li ul li span:hover
{
	color: #22953a;
}
.product_sorting li ul li:last-child span
{
	border-bottom: none;
}
.product_sorting li span:nth-child(2)
{
	margin-left: 71px;
}
.pages
{
	display: inline-block;
	float: right;
}
.product_sorting_container_bottom .pages
{
	float: left;
}
.page_current
{
	display: inline-block;
	position: relative;
	width: 40px;
	height: 40px;
	line-height: 40px;
	cursor: pointer;
	text-align: center;
	border: solid 1px #ecedee;
	margin-right: 16px;
}
.product_sorting_container_bottom .pages .page_current
{
	background: #0093CA;
	border: none;
}
.page_current span
{
	color: #51545f;
}
.product_sorting_container_bottom .pages .page_current span
{
	color: #FFFFFF;
}
.page_selection
{
	display: block;
	position: absolute;
	right: 0;
	top: 120%;
	margin: 0;
	width: 100%;
	background: #FFFFFF;
	visibility: hidden;
	opacity: 0;
	z-index: 1;
	box-shadow: 0 15px 25px rgba(63, 78, 100, 0.15);
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.page_selection li
{
	display: block;
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}
.page_selection li a
{
	display: block;
	height: 40px;
	line-height: 40px;
	border-bottom: solid 1px #dddddd;
	color: #51545f;
	-webkit-transition: opacity 0.3s ease;
	-moz-transition: opacity 0.3s ease;
	-ms-transition: opacity 0.3s ease;
	-o-transition: opacity 0.3s ease;
	transition: all 0.3s ease;
}
.page_selection li a:hover
{
	color: #22953a;
}
.page_current:hover .page_selection

{
	visibility: visible;
	opacity: 1;
	top: calc(100% + 1px);
}
.page_total
{
	display: inline-block;
	line-height: 40px;
	margin-right: 31px;
}
.page_total span
{
	margin-right: 14px;
}
.page_next
{
	display: inline-block;
	line-height: 40px;
	cursor: pointer;
}
.page_next:hover i
{
	color: #22953a;
}
.page_next i
{
	font-size: 18px;
	color: #51545f;
}
.showing_results
{
	font-size: 16px;
	height: 40px;
	line-height: 40px;
	float: right;
	margin-right: 34px;
}

/*********************************
13. Breadcrumbs
*********************************/

.breadcrumbs
{
	width: 100%;
	height: 60px;
	border-bottom: solid 1px #ebebeb;
	margin-bottom: 58px;
	font-size:16px;
}
.breadcrumbs ul li
{
	display: inline-block;
	margin-right: 17px;
}
.breadcrumbs ul li.active a
{
	color: #b9b4c7;
}
.breadcrumbs ul li i
{
	margin-right: 17px;
}
.breadcrumbs ul li a
{
	color: #0099CC;
}

/*********************************
14. Sidebar
*********************************/

.product_section_container
{
	margin-top: 150px;
}
.product_section
{

}
.sidebar
{
	float: left;
	width: 200px;
	padding-right: 17px;
}

.sidebar_section
{
	padding-bottom: 35px;
	margin-bottom: 50px;
	
/*	border-bottom: solid 1px #ebebeb; */
}


.sidebar_title h5
{
	font-size: 20px;
	font-weight:600;
	margin-bottom: 21px;
}

.sidebar_categories ul
{
  	display:block;
	width:90%;
}
.sidebar_categories li a
{
	display:block;
	text-align:center;
	font-size: 16px;
	color:#fff;
	background:#3fbc59;
	padding:4px 8px;
	border-radius:6px;
	margin-bottom:1em;

}

.sidebar_categories li a:hover
{
	color: #FFF100;
}

.sidebar_categories li li a:hover
{
	color: #3fbc59;
}

.sidebar_categories li.active a
{
	font-family: 'FontAwesome';
	content: '\f101';
}
.sidebar_categories li li a
{
	text-align:left;
	color:#333;
	background:#fff;

}


#slider-range
{
	margin-left: 7px !important;
}
#amount
{
	margin-top: 8px;
	color: #1e1e27 !important;
	font-size: 16px !important;
	font-weight: 500 !important;
}
.filter_button
{
	width: 100%;
	height: 30px;
	background: #1e1e27;
	text-align: center;
	margin-top: 25px;
	cursor: pointer;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.filter_button:hover
{
	background: #34343f;
}
.filter_button span
{
	font-size: 12px;
	font-weight: 600;
	text-transform: uppercase;
	line-height: 30px;
	color: #FFFFFF;
}
.checkboxes li
{
	height: 40px;
	line-height: 40px;
}
.checkboxes li.active i
{
	color: #0093CA;
	margin-right: 21px;
}
.checkboxes li.active i::after
{
	display: block;
	position: absolute;
	top: 1px;
	left: 1px;
	font-family: 'FontAwesome';
	font-size: 10px;
	content: '\f00c';
	color: #FFFFFF;
}
.checkboxes
{
	height: 200px;
	overflow: hidden;
}
.checkboxes.active
{
	height: auto;
}
.checkboxes li i
{
	position: relative;
	color: #b3b7c8;
	cursor: pointer;
	margin-right: 22px;
}
.checkboxes li span
{
	font-family: 'Poppins', sans-serif;
	color: #51545f;
}
.show_more
{
	display: inline-block;
	cursor: pointer;
}
.show_more span
{
	height: 40px;
	line-height: 40px;
	color: #0093CA;
}
.show_more span:first-child
{
	margin-right: 11px;
}

/*********************************
15. Main Content
*********************************/

.main_content
{
	float: left;
	width: calc(100% - 200px);
	padding-left: 15px;
}

.product-grid
{
	width: 100%;
	margin-top: 57px;
}
.product-item
{
	width: 25%;
	height: 320px;
	cursor: pointer;
	margin-bottom:1.4em;
}
.product-item::after
{
	display: block;
	position: absolute;
	top: 0;
	left: -1px;
	width: calc(100% + 1px);
	height: 100%;
	pointer-events: none;
	content: '';
	border: solid 2px rgba(235,235,235,0);
	border-radius: 3px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.product-item:hover::after
{
	box-shadow: 0 25px 29px rgba(63, 78, 100, 0.15);
	border: solid 2px rgba(235,235,235,1);
}
.product
{
	width: 100%;
	height:320px;
	border-right: solid 2px #e9e9e9;
}
.product_image
{
	width: 98%;
}
.product_image img
{
	width:98%;

}
.product_info
{
	text-align: center;
	padding-left: 10px;
	padding-right: 10px;
}
.product_name
{
	font-size: 18px;
	font-weight:500;
	margin-top: 27px;
}
.product_name a
{
	color: #1e1e27;
	line-height: 20px;
}
.product_name:hover a
{
	color: #22953a;
}
.discount .product_info .product_price
{
	font-size: 14px;
}
.product_price
{
	font-size: 16px;
	color: #0093CA;
	font-weight: 600;
}
.product_price span
{
	font-size: 12px;
	margin-left: 10px;
	color: #22953a;
	text-decoration: line-through;
}
.product_bubble
{
	position: absolute;
	top: 15px;
	width: 50px;
	height: 22px;
	border-radius: 3px;
	text-transform: uppercase;
}
.product_bubble span
{
	font-size: 12px;
	font-weight: 600;
	color: #FFFFFF;
}
.product_bubble_right::after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: 6px;
	right: auto;
	top: auto;
	bottom: -6px;
	border: 6px solid;
}
.product_bubble_left::after
{
	content: ' ';
	position: absolute;
	width: 0;
	height: 0;
	left: auto;
	right: 6px;
	bottom: -6px;
	border: 6px solid;
}
.product_bubble_red::after
{
	border-color: transparent transparent transparent #FF6699;
}
.product_bubble_left::after
{
	border-color: #51a042 #51a042 transparent transparent;
}
.product_bubble_red
{
	background: #FF6699;
}
.product_bubble_green
{
	background: #51a042;
}
.product_bubble_left
{
	left: 15px;
}
.product_bubble_right
{
	right: 15px;
}
.add_to_cart_button
{
	width: 100%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.add_to_cart_button a
{
	font-size: 12px;
	font-weight: 600;
}
.product-item:hover .add_to_cart_button
{
	visibility: visible;
	opacity: 1;
}
.favorite
{
	position: absolute;
	top: 15px;
	right: 15px;
	color: #b9b4c7;
	width: 17px;
	height: 17px;
	visibility: hidden;
	opacity: 0;
}
.favorite_left
{
	left: 15px;
}
.favorite.active
{
	visibility: visible;
	opacity: 1;
}
.product-item:hover .favorite
{
	visibility: visible;
	opacity: 1;
}
.favorite.active::after
{
	font-family: 'FontAwesome';
	content:'\f004';
	color: #0093CA;
}
.favorite::after
{
	font-family: 'FontAwesome';
	content:'\f08a';
}
.favorite:hover::after
{
	color: #0093CA;
}

/*********************************
16. News 最新消息
*********************************/

.newslist{
	display:block;
	width:100%;
}
.newslist ul{
	margin-left:20px;
}
.newslist > ul li{
	display: block;
	width:100%;
	
	border-bottom:dotted 1px #666;
	text-align:left;
	
}
.newslist a:link{
	padding:1em;
	background-color: transparent;
}
.newslist a:hover{
	background-color:#E9ECEF;
}
.newslist a:active{
	background-color:transparent;
}
.newslist a:visited{
	background-color:transparent;
}

/*********************************
17. 按鈕
*********************************/
.red_button
{
	display: -webkit-inline-box;
	display: -moz-inline-box;
	display: -ms-inline-flexbox;
	display: -webkit-inline-flex;
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: auto;
	height: 40px;
	background: #3fbc59;
	border-radius: 3px;
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;
}
.red_button:hover
{
	background: #ee9100 !important;
}
.red_button a
{
	display: block;
	color: #FFFFFF;
	text-transform: uppercase;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	line-height: 40px;
	width: 100%;
}
.shop_now_button
{
	width: 140px;
	margin-top: 32px;
}

.blue_btn
{
	background: #3fbc59;
	color: #FFFFFF;
	text-transform: uppercase;
	width: 165px;
	border: none;
	height: 46px;
	cursor: pointer;
}
.blue_btn:hover
{
	background: #008FC6 !important;
}

/*********************************
18. 上方banner
*********************************/
.box01{
	display:block;
	border:#ccc 1px solid;
	min-height:200px;
	margin:15px;
}
.top_banner
{
	display: block;
	width: 100%;
	height:200px;
	margin-top:-30px;
	margin-left: 15px;

}

.cnc{width:420px; height:315px;overflow:hidden;}
.cnc img{
	margin-left:0px;
	transform:scale(1,1);
	transition: all 0.5s ease-out;
}
.cnc img:hover{transform:scale(1.2,1.2);}
.cnc2{width:420px; height:315px;overflow:hidden; position:relative;}
.cnc2 img{ position:absolute;
  /* 淡出淡入效果2秒 */
  -webkit-transition: opacity 0.2s ease-in-out;
  -moz-transition: opacity 0.2s ease-in-out;
  -o-transition: opacity o.2s ease-in-out;
  transition: opacity 0.2s ease-in-out;
 }
 .cnc2 img:last-child:hover{
     /* 滑入時第一張透明度設0 */
      opacity:0;}