@charset "utf-8";
/* CSS Document */
body { background-color: #fff; background-image: url(../img/body-bg.png); color: #514841; line-height: 1.5; font-family: "Roboto Condensed", "微軟正黑體",  Arial, Helvetica, sans-serif;}

a { color: #514841; text-decoration: none; transition: all ease-in-out 0.2s;}
a:focus,
a:hover { color: #EB5F00;}

.no-style { margin: 0 !important; padding: 0 !important; list-style: none;}
.inline-style,
.inline-style li { display: inline-block;}

.box-shadow { box-shadow: 0 1px 2px rgba(0,0,0,0.15);}
.box-rounded { border-radius: 4px;}
.box-white { background-color: #fff;}
.box-default { padding: 20px;}
.mar-top-none { margin-top: -20px}
.mar-bottom-none { margin-bottom: 0px}
.box-default.mar-top-none { border-top: 1px solid #eaeaea;}
.pad-top-40 { padding-top: 40px;}

.text-blue { color: #09F;}

.btn-yellow { background-color: #FFE840; color: #9E894B;}
.btn-yellow:hover,
.btn-yellow:active,
.btn-yellow:focus { background-color: #9E894B; color: #FFE840;}


/* Header */
.header { position: relative; z-index: 99; background-color: #fff; transform: translate(0,0);}
.header.fixed-header { position: fixed; left: 0; right: 0; top: -90px; transition: 0.3s; transform: translate(0,90px);}
.header.fixed-header .logo,
.header.fixed-header .ad-box,
.header.fixed-header .search-tags { display: none;}
.header.fixed-header .header-bottom { padding: 0; height: 0;}
.header.fixed-header .header-search { position: absolute; left: 52.7%; top: 3px; right: 0; transform:  translate(-60%,0); width: 33.333333%;}
.header.fixed-header .search-form { margin: 0;}
.header.fixed-header .search-form input,
.header.fixed-header .search-form select,
.header.fixed-header .search-form button { padding: 0 12px; height: 30px; line-height: 30px;}
.ad-box {}
.ad-box img{width: 180px; height: auto; max-height: 80px;}

.header-top { padding: 0; background-color: #fafafa; font-size: 14px; line-height: 20px; border-bottom: 1px solid #f2f2f2;}
.header-top .no-style a { float: left; display: block; width: auto;}
.header-top .no-style a:hover { text-decoration: none;}
.header-top .no-style li { float: left;}
.header-top .no-style li:after { position: relative; top: 0; float: left; display: block; content: ""; margin: 0 15px; width: 1px; height: 14px; background-color: #514841; vertical-align: middle; transform: translateY(100%);}
.header-top .no-style li:last-child:after { display: none;}
.header-top .no-style li.active a { color: #EB6000; font-weight: 600;}
.header-top .text-left .no-style { display: block; float: left;}
.header-top .text-right .no-style { display: block; float: right;}
.header-top .text-left .no-style li,
.header-top .text-right .no-style li { display: block; float: left; padding: 0; height: 40px; line-height: 40px;}

.header-bottom { padding: 20px 10px;}
.logo { margin: 0; padding: 0; margin-top:10px;}
.logo-div{margin-top:12px;}
.search-div{margin-top:12px;}

.header-search { padding: 0 49px; padding-top:10px;}
.search-form { display: table; margin-bottom: 10px; width: 100%; border: 2px solid #DC3806; border-radius: 4px; box-shadow: 0 2px 4px rgba(0,0,0,0.15);}
.form-item { position: relative; display: table-cell; vertical-align: top;}
.form-item:first-child:before { display: block; content: ""; position: absolute; right: 0; top: 11px; width: 1px; height: 14px; border-left: 1px solid #d6d6d6;}
.search-form input,
.search-form select,
.search-form button { width: 100%; height: 35px; border: none; box-shadow: none; outline: none;}
.search-form input:focus,
.search-form select:focus,
.search-form button { box-shadow: none;}
.search-form input { border-radius: 2px 0 0 2px;}
.search-form select { border-radius: 0; width: auto;}
.search-form button {padding:0; text-align: center; border-radius: 0 2px 2px 0; color: #fff; font-size: 15px; font-weight: 600;
	background: -moz-linear-gradient(180deg, #FF4D4D 0%, #D93600 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FF4D4D), color-stop(100%,#D93600));
	background: -webkit-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -o-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -ms-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);	
}
.search-form button:hover,
.search-form button:focus {padding:0; text-align: center;  background: #D93600; color: #fff; outline: none;}
/*v-search-form*/
.search-form div:nth-child(3){
	border-radius: 0 2px 2px 0;
	background: -moz-linear-gradient(180deg, #FF4D4D 0%, #D93600 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FF4D4D), color-stop(100%,#D93600));
	background: -webkit-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -o-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -ms-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);	
}

.search-tags { margin-bottom: -10px; height: 20px; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; font-size: 12px;}
.search-tags strong { color: #333;}
.search-tags a { margin-left: 10px; color: #DC3806; text-decoration: underline;}


.header-share { color: #fff; font-size: 20px; text-align: center; line-height: 20px; border-radius: 4px;}
.header-share li { float: left; width: 44px; height: 44px;}
.header-share li a {display: block; padding: 10px; color: #fff; line-height: 24px;}
.header-share li a .fa { margin: 0 auto !important;}
.header-share .btn-facebook { background-color: #465892; border-radius: 4px 0 0 4px !important;}
.header-share .btn-youtube { background-color: #D32322; border-radius: 0;}
.header-share .btn-line { background-image: url("../img/social-line.png"); background-size: 22px auto; background-repeat: no-repeat; background-position: center center; background-color: #42CB00; border-radius: 0 4px 4px 0;}

nav.menu { position: relative; z-index: 10; box-shadow: 0 1px 2px rgba(0,0,0,0.15);
	background: -moz-linear-gradient(180deg, #FFE155 0%, #F4CA00 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FFE155), color-stop(100%,#F4CA00));
	background: -webkit-linear-gradient(180deg, #FFE155 0%,#F4CA00 100%);
	background: -o-linear-gradient(180deg, #FFE155 0%,#F4CA00 100%);
	background: -ms-linear-gradient(180deg, #FFE155 0%,#F4CA00 100%);
	background: linear-gradient(180deg, #FFE155 0%,#F4CA00 100%);
}

.nav.nojs a.menu-news,
.nav a.menu-news { margin: 4px 20px 4px 0 !important; padding: 4px 20px 4px 4px; display: block; height: 36px; color: #fff; line-height: 28px; border-radius: 100em; overflow: hidden;
	background: -moz-linear-gradient(180deg, #D51A40 0%, #A11007 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#D51A40), color-stop(100%,#A11007));
	background: -webkit-linear-gradient(180deg, #D51A40 0%,#A11007 100%);
	background: -o-linear-gradient(180deg, #D51A40 0%,#A11007 100%);
	background: -ms-linear-gradient(180deg, #D51A40 0%,#A11007 100%);
	background: linear-gradient(180deg, #D51A40 0%,#A11007 100%);
}
.nav.nojs a.menu-news:hover,
.nav.nojs a.menu-news:focus,
.nav.nojs a.menu-news:active,
.nav.nojs li:hover a.menu-news,
.nav.nojs li:focus a.menu-news,
.nav.nojs li:active a.menu-news,
.nav a.menu-news:hover,
.nav a.menu-news:focus,
.nav a.menu-news:active,
.nav li:hover a.menu-news,
.nav li:focus a.menu-news,
.nav li:active a.menu-news  { color: #D51A40; border-radius: 100em;}
.nav a.menu-news .icon { display: block; float: left; margin-right: 10px; width: 28px; height: 28px; background-color: #fff; color: #D51A40; line-height: 28px; text-align: center; vertical-align: middle; border-radius: 100%;}


.menu-right { border-right: 1px solid rgba(0,0,0,0.1);}
.menu-right li a { color: #fff; border-left: 1px solid rgba(0,0,0,0.1);}
.menu-right li:first-child a {
	background: -moz-linear-gradient(180deg, #FFB500 0%, #FA9801 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FFB500), color-stop(100%,#FA9801));
	background: -webkit-linear-gradient(180deg, #FFB500 0%,#FA9801 100%);
	background: -o-linear-gradient(180deg, #FFB500 0%,#FA9801 100%);
	background: -ms-linear-gradient(180deg, #FFB500 0%,#FA9801 100%);
	background: linear-gradient(180deg, #FFB500 0%,#FA9801 100%);
}
.menu-right li:last-child a {
	background: -moz-linear-gradient(180deg, #FA9801 0%, #EA6D00 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FA9801), color-stop(100%,#EA6D00));
	background: -webkit-linear-gradient(180deg, #FA9801 0%,#EA6D00 100%);
	background: -o-linear-gradient(180deg, #FA9801 0%,#EA6D00 100%);
	background: -ms-linear-gradient(180deg, #FA9801 0%,#EA6D00 100%);
	background: linear-gradient(180deg, #FA9801 0%,#EA6D00 100%);
}



/* Banner */
.banner { position: relative; z-index: 9; margin-bottom: 20px;}

/* News */
.news-box { margin-bottom: 20px; height: 50px;}
.news-marquee { margin: 0 10px; background-color: #f9f9f9; font-size: 16px; }
.news-heading { float: left; padding: 14px 15px; margin-right: 15px; height: 50px; background-color: #fff; font-weight: 600; line-height: 20px;}
.news-heading .fa { font-size: 22px; margin-right: 10px;}
.news-show { padding: 10px 15px 10px 130px; height: 50px; line-height: 30px; color: #D3193F;}
.news-wrap { height: 30px; overflow: hidden;}

#breakingnews { width: 100%; height: 30px; line-height: 30px; overflow: hidden;}
#breakingnews ul { margin: 0; padding: 0; list-style: none; left: 0 !important;}
#breakingnews  li { height: 30px; list-style: none;
	overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}

/* Topic */
.custom-topic [class*="col-"] { margin-bottom: 20px; max-height: 430px;}
.custom-topic .col-md-4:first-child { clear: both;}
.custom-item { position: relative; background-color: #fff; border: 8px solid #fff; max-height: 430px;}
.effect-zoom { text-align: center; overflow: hidden;}
.effect-zoom img.img-main { position: relative; display: block; width: 100%; height: auto;
	transition: opacity 0.25s, transform 0.25s;
    -webkit-transform: scale(1.1);
    transform: scale(1.1);
}
.effect-zoom:hover img.img-main,
.effect-zoom:focus img.img-main,
.effect-zoom:active img.img-main {
    -webkit-transform: scale(1);
    transform: scale(1);
	opacity: 0.8;
}
.effect-zoom a { display: block; position: absolute; left: -2px; right: -2px; top: -2px; bottom: -2px; border: 2px solid rgba(255,255,255,0);}
.effect-zoom:hover a,
.effect-zoom:focus a,
.effect-zoom:active a { left: 15px; right: 15px; top: 15px; bottom: 15px; border-color: rgba(255,255,255,1);}

.topic-text { position: absolute; left: 30px; top: 30px; right: 30px; transition: all 0.25s, transform 0.25s;}
.sticky-bottom { position: absolute; right: 0; bottom: 0;}
.sticky-top { position: absolute; right: 0; top: 0;}
.white-bg { display: inline-block; background-color: rgba(255,255,255,0.85); transition: all 0.25s, transform 0.25s;}
.effect-zoom:hover .topic-text,
.effect-zoom:focus .topic-text,
.effect-zoom:active .topic-text { top: 35px;}
.effect-zoom:hover .white-bg,
.effect-zoom:focus .white-bg,
.effect-zoom:active .white-bg { background-color: rgba(255,255,255,0.25);}

.adbox-wedgit { margin-bottom: 20px;}

/* Tabs - Home - Hot Sales & Recieps */
.tabs-list { position: relative; margin: 0; padding: 0; list-style:none; height: 45px;}
.tabs-list:after { display: inline-block; margin: 25px 14px; width: 27px; height:15px; content: ""; background-image: url(../img/home-tab-sprite.png);}
.tabs-list li { float: left; display: block;}
.tabs-list li a { position: relative; display:block; width: 160px; height:45px; line-height:45px; padding:0 15px; color: rgba(0,0,0,0); transition:all 0.4s ease 0s; }
.tabs-list li.active a {}
.tabs-container.content-wrap { margin: 0 -10px;}
.tabs-container.content-wrap section { display: none;}
.tabs-container.content-wrap section.content-current { display: block;}
.sales { background-image: url(../img/home-tab-01.png);}
.recipes { background-image: url(../img/home-tab-02.png);}
.tabs-list a:after { position: absolute; right: -11px; top: 0; z-index: 1; display: block; content: ""; width: 11px; height: 45px;}
.tabs-list .sales:after { background-image: url(../img/home-tab-01a.png);} 
.tabs-list .recipes:after { background-image: url(../img/home-tab-02a.png);} 

.tabs-container.content-wrap section:after { display: table; clear: both; content: "";}
.tabs-container.content-wrap section:before {display: block; content: ""; margin: 0 10px 20px 10px; height: 5px; box-shadow: 0 1px 2px rgba(0,0,0,0.15);}
#sales-content:before { background-image: url(../img/home-tab-01b.png); background-color: #FE7783;}
#recipes-content:before { background-image: url(../img/home-tab-02b.png); background-color: #FED376;}
#sales-content .list-button,
#recipes-content .list-button,
#prod-home-01 .list-button, #prod-home-02 .list-button, #prod-home-03 .list-button, #prod-home-04 .list-button, #prod-home-05 .list-button, #prod-home-06 .list-button, #prod-home-07 .list-button, #prod-home-08 .list-button, #prod-home-09 .list-button, #prod-home-10 .list-button, #prod-home-11 .list-button, #prod-home-12 .list-button, #prod-home-13 .list-button, #prod-home-14 .list-button, #prod-home-15 .list-button { display: none;}

/* Produst List - Column */
.prod-tabs {padding: 0 10px;}

.list-item { position: relative; top: 0; background-color: #fff; margin-bottom: 20px; transition: all cubic-bezier(0.82, 0, 0.37, 1) 0.25s;}
.list-item:after { display: table; content: ""; clear: both;}
.list-item:hover,
.list-item:focus,
.list-item:active { z-index: 9; top: -10px; box-shadow: 0 15px 35px rgba(0,0,0,0.2);}
.list-item .list-image { border: 5px solid #fff; overflow: hidden; cursor: pointer;}
.list-item .list-image img { position: relative; display: block; width: 100%; height: auto;}
.list-item .list-content { padding: 15px 15px 0; min-height: 90px; cursor: pointer;}
.list-item .list-price { padding: 0 15px 15px; line-height: 24px; vertical-align: baseline;}
.list-item .list-price .meta-light {}
.list-item .list-cart { position: absolute; left: 0; right: 0; bottom: 0; display: table; width: 100%; vertical-align: top; transform: translateY(100%); opacity: 0;  transition: all cubic-bezier(0.82, 0, 0.37, 1) 0.25s;}
.list-item .list-cart .btn.btn-block { display: table-cell; width: 50%; margin: 0; border-radius: 0; font-size: 16px !important}

.list-item:hover .list-cart,
.list-item:focus .list-cart,
.list-item:active .list-cart { opacity: 1; transform: translateY(0%);}

	.meta-label { display: block; font-size: 12px; color: #D4193F; line-height: 1.2; height: 2.4em; overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.meta-name { margin: 0 0 2px 0; padding: 0; font-size: 16px; line-height: 1.4; height: 42px; max-height:  42px; font-weight: 600; color: #121212;
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.meta-number { display: none; margin: 5px 0; font-size: 12px; color: #999;}
	.meta-brief { color: #666; margin-top: 15px;
		overflow : hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		-webkit-box-orient: vertical;
	}
	.meta-normal { display: block; color: #444;}
	.meta-price { margin-right: 1rem; color: #EB5F00; font-size: 18px;}
	.meta-light { color: #ccc;}




.prod-type {}
/*.prod-type .container:before { margin-bottom: 20px; display: block; content: ""; height: 5px;}*/
.prod-type-title { position: absolute; left: 10px; right: 10px; top: -5px; margin: 0; padding: 0; height: 50px; padding: 10px; line-height: 30px; color: rgba(0,0,0,0);}
.prod-AD { position: relative; margin-top: -20px; margin-bottom: 20px;}
.prod-type .sort-list { width: 100%;}
.prod-type .list-content .meta-brief,
.prod-tabs .list-content .meta-brief { display: none;}

.prod-tabs .recipes-item { position: relative; top: 0; padding: 10px 10px 0; background-color: #fff; margin-bottom: 20px; transition: all cubic-bezier(0.82, 0, 0.37, 1) 0.25s;}
.prod-tabs .recipes-item:after { display: table; content: ""; clear: both;}
.prod-tabs .recipes-item:hover,
.prod-tabs .recipes-item:focus,
.prod-tabs .recipes-item:active { top: -10px; box-shadow: 0 15px 35px rgba(0,0,0,0.2);}
.prod-tabs .recipes-item .list-image { border: 5px solid #fff; overflow: hidden; cursor: pointer;}
.prod-tabs .recipes-item .list-image img { position: relative; display: block; width: 100%; height: auto;}
.prod-tabs .recipes-item .list-content { padding: 15px; cursor: pointer;}
.prod-tabs .recipes-item .list-content .meta-author { margin: 0; font-size: 12px; color: #ccc;}



.sort-grid .list-content .meta-brief { display: none;}
.sort-grid .list-button { position: absolute; right: 0; bottom: 0;}
.sort-grid .list-button .btn { outline: none; box-shadow: none;}
.sort-grid .list-button .btn-buy,
.sort-grid .list-button .btn-cart { display: none;}
.sort-grid .list-button .btn-favor { padding: 15px; background: #fff; color: #ccc; outline: none; border: none;}
.sort-grid .list-button .btn-favor span { display: none;}
.sort-grid .list-button .btn-favor.active { color: #F33;}

.sort-list .list-item { display: table; vertical-align: top;}
.sort-list .list-image,
.sort-list .list-content,
.sort-list .list-price,
.sort-list .list-button { display: table-cell; vertical-align: top;}
.sort-list .list-image { width: 25%; border-width: 10px;}
.sort-list .list-content { width: 30%; padding: 10px;}
.sort-list .list-price { width: 25%; padding: 20px; float: none !important;}
.sort-list .list-button { width: 20%; padding: 20px 20px 0 0; float: none !important;}
.sort-list .list-content .meta-name { height: auto;}
.sort-list .list-price span { display: block;}
.sort-list .list-price .meta-price { font-size: 24px;}
.sort-list .list-button .btn-block { display: block; width: 100%; outline: none;}
.sort-list .list-cart { display: none;}

.btn-buy,
.btn-buy:focus,
.btn-buy:hover { margin-bottom: 15px; height: 40px; color: #fff; font-size: 16px; font-weight: bold; line-height: 24px; border: 1px solid #E84B27; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	background: -moz-linear-gradient(180deg, #FF5C26 0%, #FF4000 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FF5C26), color-stop(100%,#FF4000));
	background: -webkit-linear-gradient(180deg, #FF5C26 0%,#FF4000 100%);
	background: -o-linear-gradient(180deg, #FF5C26 0%,#FF4000 100%);
	background: -ms-linear-gradient(180deg, #FF5C26 0%,#FF4000 100%);
	background: linear-gradient(180deg, #FF5C26 0%,#FF4000 100%);
}
.btn-cart,
.btn-cart:focus,
.btn-cart:hover { margin-bottom: 15px; height: 40px; color: #fff; font-size: 16px; font-weight: bold; border: 1px solid #EB9000; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	background: -moz-linear-gradient(180deg, #FCA301 0%, #FF8000 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FCA301), color-stop(100%,#FF8000));
	background: -webkit-linear-gradient(180deg, #FCA301 0%,#FF8000 100%);
	background: -o-linear-gradient(180deg, #FCA301 0%,#FF8000 100%);
	background: -ms-linear-gradient(180deg, #FCA301 0%,#FF8000 100%);
	background: linear-gradient(180deg, #FCA301 0%,#FF8000 100%);
}
.btn-cart .fa { margin-right: 10px;}

.btn-favor,
.btn-favor:hover,
.btn-favor:focus { margin-bottom: 15px; height: 40px; color: #514841; font-size: 16px; font-weight: bold; border: 1px solid #E4E4E4; box-shadow: 0 1px 2px rgba(0,0,0,0.1);
	background: -moz-linear-gradient(180deg, #FAFAFA 0%, #EA6D00 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FAFAFA), color-stop(100%,#F9F9F9));
	background: -webkit-linear-gradient(180deg, #FAFAFA 0%,#F9F9F9 100%);
	background: -o-linear-gradient(180deg, #FAFAFA 0%,#F9F9F9 100%);
	background: -ms-linear-gradient(180deg, #FAFAFA 0%,#F9F9F9 100%);
	background: linear-gradient(180deg, #FAFAFA 0%,#F9F9F9 100%);
}
.btn-favor .fa { margin-right: 10px; color: #ccc;}
.btn-favor.active,
.btn-favor.active .fa { box-shadow: none; color: #F33;}

/*#prod-home-01 .container:before { background-color: #F6DFB1;}
#prod-home-02 .container:before { background-color: #D3B8ED;}
#prod-home-03 .container:before { background-color: #B8E28E;}
#prod-home-01 .prod-type-title { background-image: url(../img/prod-heading-01.png); background-repeat: no-repeat;}
#prod-home-02 .prod-type-title { background-image: url(../img/prod-heading-02.png); background-repeat: no-repeat;}
#prod-home-03 .prod-type-title { background-image: url(../img/prod-heading-03.png); background-repeat: no-repeat;}*/
.prod-home-line { margin-bottom: 20px; height: 5px;}

/* Paging */
.paging-box { background-color: #fff;}
.paging-box .pagination { float: left;}
.paging-box .pagination,
.paging-box .pagination ul,
.paging-box .pagination li { margin: 0; padding: 0; list-style: none;}
.paging-box .pagination li { display: block; float: left;}
.paging-box .pagination li a { display: block; padding: 15px; height: 50px; line-height: 20px; text-decoration: none;  }
.paging-box .pagination li   .active { color: #F60 }
 .paging-box .pagination li a.disabled,
.paging-box .pagination li span { display: block; padding: 15px; height: 50px; line-height: 20px; color: #ccc;}
.paging-box .pagination li span { padding: 15px 0;}
.paging-box .pagination li .fa { font-size: 20px;}
.paging-box .page-meta { padding: 15px; line-height: 20px;}

/* Service */
.service-box { position: relative; margin-top: 80px; padding-bottom: 40px; background: url(../img/service-bg.png); border-bottom: 1px solid #eaeaea;}
.service-wrap { display: table; margin-top: -60px !important; width: 100%; background-color: #fff; border-collapse: collapse;}
.service-wrap li { display: table-cell; padding: 10px; width: 25%; vertical-align: top; border: 1px solid #eaeaea; color: #999;}
.service-wrap .pull-left { width: 40%; text-align: center;}
.service-wrap .pull-right { width: 50%; padding: 10px 5px 10px 0;}
.service-wrap .fa { margin: 10px auto; width: 60px; height: 60px; border-radius: 100%; background-color: #FF952B; transition: all linear 0.3s;}
.service-wrap li:hover .fa { background-color: #FFE153;}
.service-wrap .service-title { color: #222;}
.fa-cp-01,
.fa-cp-02,
.fa-cp-03,
.fa-cp-04 { background-image: url(../img/service-icons.png);}
.fa-cp-01 { background-position: 0 0;}
.fa-cp-02 { background-position: -60px 0;}
.fa-cp-03 { background-position: -120px 0;}
.fa-cp-04 { background-position: -180px 0;}

/* Footer */
.footer { background-color: #FFE153;}
.footer-top { padding: 10px; background-color: #fff; text-align: center;}
.footer-top li { display: inline-block; padding: 0 10px; height: 20px; line-height: 20px;}
.footer-top li:after { position: relative; top: 3px; display: inline-block; content: ""; margin: 0 0 0 20px; height: 14px; border-right: 1px solid #514841;}
.footer-top li:last-child:after { display: none;}
.footer-top li a { text-decoration: none;}

.footer-bottom { position: relative;}
.footer-bottom p { margin: 0; padding: 30px 0; text-align: center;}
.footer-bottom strong {}

.footer-share { position: absolute; right: 10px; top: 0; color: #fff; font-size: 20px; text-align: center; line-height: 20px;}
.footer-share li { float: left; width: 40px; height: 40px;}
.footer-share li a {display: block; padding: 10px; color: #fff;}
.footer-share li a .fa { margin: 0 !important;}
.footer-share .btn-facebook { background-color: #465892; border-radius: 0 !important;}
.footer-share .btn-youtube { background-color: #D32322;}
.footer-share .btn-line { background-image: url("../img/social-line.png"); background-size: 22px auto; background-repeat: no-repeat; background-position: center center; background-color: #42CB00;}

/* Fixed */
.fixed-right { position: fixed; right: 20px; top: 28%; z-index: 999;}
.browse,
.cart,
.totop { margin-bottom: 10px; width: 70px; background-color: #fff;}
.browse h5,
.cart h5,
.top h5 { margin: 0; padding: 0; font-size: 12px; font-weight: bold; text-align: center; line-height:20px;
	background: -moz-linear-gradient(180deg, #E7E6E8 0%, #F1F3F8 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#E7E6E8), color-stop(100%,#F1F3F8));
	background: -webkit-linear-gradient(180deg, #E7E6E8 0%,#F1F3F8 100%);
	background: -o-linear-gradient(180deg, #E7E6E8 0%,#F1F3F8 100%);
	background: -ms-linear-gradient(180deg, #E7E6E8 0%,#F1F3F8 100%);
	background: linear-gradient(180deg, #E7E6E8 0%,#F1F3F8 100%);
}
.browse ul,
.cart ul { text-align: center; max-height: 210px; overflow-y: auto;}
.browse li { margin: 5px;}
/*.browse li,
.cart li { margin: 5px;}*/
.cart { border: 4px solid #fff;}
.cart ul,
.cart ul li { position: relative; padding: 10px 0 5px; background-color: #3c2671; color: #fff; cursor: pointer;}
.cart ul li .fa {font-size: 24px;}
.cart ul li em { position: absolute; right: 0; top: 0; min-width: 16px; min-height: 16px; text-align: center; line-height: 16px; background-color: #fff; color: #FF4000; font-size: 10px; display: block; font-style: normal; ont-weight: bold; font-family: Arial; box-shadow: 1px 1px 3px rgba(0,0,0,0.15);}
.cart ul li span { display: block; margin-top: 5px; font-size: 14px;}
.cart button { display: block; margin: 0; padding: 0; width: 100%; background-color: #FF4000; color: #fff; border: none;}
.cart button .fa { margin-right: 10px;}

.totop { padding: 10px; background-color: #514841; font-size: 12px; color: #fff; text-align: center; border-radius: 2px; cursor:pointer;}
.totop .fa { display: block; margin: 0 auto;}


/* Pages */
#pages { margin-top: 20px; padding-bottom: 20px;}

.page-banner { margin-bottom: 20px; border: 8px solid #fff; border-radius: 4px;}
.crumb-box { display: block; margin-bottom: 20px; background-color: #fff;}
.crumb-top { padding: 10px 15px;}
.page-crumb { float: left; font-size: 14px; color: #999;}
.page-crumb a { color: #999;}
.page-crumb a:after { display: inline-block; content: "-"; padding: 0 10px;}
.page-crumb a:last-child:after { display: none;}
.page-meta { float: right;}
.page-meta span { margin: 0 5px;}
.text-orange, .color-orange { color: #EB6000;}
.text-light { color: #999;}
.color-red { color: #D4193F;}

.page-title { border-top: 1px solid rgba(0,0,0,0.1);}
.page-title h2 { float: left; margin: 0; padding: 15px; font-size: 20px; line-height: 30px; font-weight: bold;}
.page-filter { float: right;}
.filter-form,
.filter-layout { float: left; padding: 10px; border-left: 1px solid rgba(0,0,0,0.1);}
.filter-form .form-control { height: 40px; border: 2px solid #e4e4e4; box-shadow: none;}
.filter-layout span { display: block; float: left; width: 40px; height: 40px; background-color: #fff; font-size: 22px; text-align: center; line-height: 36px; color: #e4e4e4; cursor: pointer; border: 2px solid #e4e4e4;}
.filter-layout span.active { background-color: #EB6100; color: #fff; border-color: #EB6100;}
.filter-layout .icon { vertical-align: middle;}
.filter-layout .btn-grid { border-radius: 3px 0 0 3px; border-right: none;}
.filter-layout .btn-list { border-radius: 0 3px 3px 0; border-left: none;}

/* Box Setting */
.box-heading { display: inline-block; margin: 0 20px 0 0; padding: 5px 0; font-size: 18px; font-weight: 700; line-height: 30px;}
.box-table { display: table; width: 100%;}
.box-left,
.box-right { display: table-cell; vertical-align: top;}
.notice-box { color: #DE4012; text-align: right;}
.notice-box ul,
.notice-box li { list-style: none;}

/* Category */
.pc-category { background-color: #fff; margin-bottom: 20px;}
.pc-category h2 { margin: 0; padding: 15px; line-height: 1.2; font-size: 22px; font-weight: bold; box-bottom: 1px solid rgba(0,0,0,0.1);
	background: -moz-linear-gradient(left, #F6F6FB, #EBECEE);
	background: -webkit-linear-gradient(left,#F6F6FB,#EBECEE);
	background: -o-linear-gradient(left, red, #EBECEE);
	background: -ms-linear-gradient(left, #F6F6FB 0%,#EBECEE 100%);
	background: linear-gradient(left, #F6F6FB 0%,#EBECEE 100%);
}
.pc-category .sidebar-menu,
.pc-category .sidebar-menu li { margin: 0; list-style: none;}
.pc-category .sidebar-menu { padding: 0;}
.pc-category .sidebar-menu li a { display: block; position: relative; padding: 10px 15px; line-height: 20px; font-size: 16px; text-decoration: none;}
.pc-category .sidebar-menu > li:nth-child(even) { background-color: #fafafa;}
.pc-category .sidebar-menu ul { display: none; margin: 0; padding: 0; border-bottom: 1px solid #e4e4e4; border-top: 1px solid #e4e4e4;}
.pc-category .sidebar-menu ul li a { font-size: 14px;}
.pc-category .sidebar-menu ul li a:before { display: inline-block; content: "-"; margin-right: 10px;}
.pc-category .sidebar-menu ul > li:nth-child(even) { background-color: #efefef;}
.pc-category .sidebar-menu ul > li:nth-child(odd) { background-color: #f4f4f4;}
.pc-category .sidebar-menu > li > a.active { background-color: #FFE153;}
.pc-category .sidebar-menu > li > a > .fa { position: absolute; right: 15px; top: 12px; margin: 0; transform: rotate(0deg); transition: all ease 0.05s;}
.pc-category .sidebar-menu > li > a.active > .fa { transform: rotate(-90deg);}

/* Promotion */
.promotion-box { background-color: #fff; margin-bottom: 20px;}
.promotion-box h2 { margin: 0; padding: 15px; background-image: url(../img/title-premotion.png); font-size: 18px; line-height: 20px; font-weight: bold; color: #fff;}
.promotion-box .no-style li:nth-child(even) { background-color: #fafafa;}
.promotion-box .no-style li a { position: relative; display: block; padding: 10px 15px; text-decoration: none;}
.promotion-box .no-style li .fa { position: absolute; right: 15px; top: 12px;}

.groupbuy-box { background-color: #fff; margin-bottom: 20px;}
.groupbuy-box h2 { margin: 0; padding: 15px; background-image: url(../img/title-groupbuy.png); font-size: 18px; line-height: 20px; font-weight: bold; color: #F42E3D;}
.groupbuy-box h2 a { display: block; color: #F42E3D; font-weight: bold;}

/* Hot Sales */
.hotsales-box { background-color: #fff; margin-bottom: 20px;}
.hotsales-box h2 { margin: 0; padding: 15px; background-image: url(../img/title-hotsale.png); font-size: 18px; line-height: 20px; font-weight: bold; color: #fff;}
.hotsales-box .list-item { margin: 0; padding: 15px; box-shadow: none; border-bottom: 1px solid rgba(0,0,0,0.1);}
.hotsales-box .list-item:last-child { border-bottom: none;}
.hotsales-box .list-item:hover,
.hotsales-box .list-item:active,
.hotsales-box .list-item:focus { margin: 0; top: 0;}
.hotsales-box .list-item .list-image { float: left; width: 45%;}
.hotsales-box .list-item .list-content { float: right; width: 55%; padding: 5px 0 0 10px;}
.hotsales-box .list-item .list-content .meta-name { font-size: 14px; height: 40px; max-height: 40px;}
.hotsales-box .list-item .list-price { float: right; width: 55%; padding: 5px 0 0 10px;}
.hotsales-box .list-item .list-price .meta-light { display: none; font-size: 12px;}

/* Recipes */
.recipes-box { background-color: #fff; margin-bottom: 20px;}
.recipes-box h2 { margin: 0; padding: 15px; background-image: url(../img/title-recipes.png); font-size: 18px; line-height: 20px; font-weight: bold; color: #A46947;}
.recipes-box .recipes-item { margin: 0; padding: 15px; box-shadow: none; border-bottom: 1px solid rgba(0,0,0,0.1); cursor: pointer;}
.recipes-box .recipes-item:last-child { border-bottom: none;}
.recipes-box .recipes-item .list-image img { width: 100%; display: block;}
.recipes-box .recipes-item .list-content { padding: 15px 5px 0;}
.recipes-box .recipes-item .list-content .meta-name { margin-bottom: 10px; font-size: 15px; height: auto;}
.recipes-box .recipes-item .list-content .meta-author { margin: 0; font-size: 12px; color: #ccc;}

/* Detail */
.prod-detail { margin-bottom: 20px; background-color: #fff;}
.prod-detail .row { margin: 0;}
.detail-left { float: left; padding: 5px; width: 48%;}
.zoompic { position: relative; background: url(../img/loading.gif) no-repeat center center;}
.zoompic img { min-width: 100%;}
.zoompic .stauts,
.zoompic .save,
.zoompic .trial,
.zoompic .model { position: absolute;}
.zoompic .stauts { top: 0; right: 0;}
.zoompic .save { left: 0; bottom: 0;}
.zoompic .hot,
.zoompic .new { display: block; float: left; /*width: 40px; height: 40px; text-align: center; line-height: 40px; color: #fff; font-size: 14px; font-weight: 400; font-style: normal; text-transform: uppercase;*/}
/*.zoompic .hot { background-color: #FE0D00;}
.zoompic .new { background-color: #05AEF1;}*/
.zoompic .save { padding: 5px 10px 5px 30px; background-color: #FE0D00; color: #fff; font-size: 24px; line-height: 1.1; border-radius: 0 10px 0 0;}
.zoompic .save span { position: absolute; left: 0; top: 0; bottom: 0;display: block; padding: 5px 0; width: 20px; background-color: #fff; text-align: left; font-size: 14px; color: #FE0D00; font-weight: bold; line-height: 20px;}
.zoompic .save small { display: block; font-size: 10px; line-height: 14px;}
.zoompic .trial { display: table; left: 10px; top: 10px; padding: 0px; width: 90px; height: 90px; border-radius: 50em; vertical-align: middle;}
.zoompic .trial .trial-inner { display: table-cell; font-size: 36px; line-height: 1.1; vertical-align: middle;}
.zoompic .trial .trial-inner img { border-radius: 100px;}
.zoompic .trial .trial-inner em { font-size: 20px; font-style: normal;}
.zoompic .trial .trial-inner small { display: block; padding-bottom: 8px; font-size: 14px;}
.zoompic .model { right: 10px; bottom: 10px; text-align: center; width: 90px; line-height: 1.2;}
.zoompic .model .model-top { background-color: #fff; color: #09F; font-size: 36px; border: 2px solid #EB9203; border-radius: 6px 6px 0 0;}
.zoompic .model .model-top em { font-size: 20px; font-style: normal;}
.zoompic .model .model-bottom { background-color: #EB9203; color: #fff; font-size: 24px; line-height: 1.4; letter-spacing: 2px; border-radius: 0 0 6px 6px;}

.thumb-play { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; padding-left: 8px; width: 96px; height: 96px; background: rgba(255,255,255,0.1); color: #fff; font-size: 36px; border: 4px solid #fff; border-radius: 50%; box-shadow: 0 10px 30px rgba(0,0,0,.65);}
.thumb-play:hover, .thumb-play:active, .thumb-play:visited,
.thumb-play:focus { color: white; text-decoration: none;}
.thumb-play.mobile { display: none; visibility: hidden; }

.fancybox-slide--iframe .fancybox-content { max-width: 800px; max-height: 450px;}

@media screen and (max-width:480px) {
	.thumb-play.mobile { display: flex; visibility: visible; }	
}

.thumb-small { position: relative; margin: 20px 0; padding: 0 44px;}
.thumb-small .swiper-slide { position: relative;}
.thumb-small img { padding: 4px; border: 1px solid rgba(0,0,0,0.1);}
.thumb-small .current img { border-color: rgba(0,0,0,0.3);}
.thumb-small .thumb-prev,
.thumb-small .thumb-next { background: none; text-align: center; line-height: 44px;}

.thumb-small .mb-tag { display: none; }

.share-box { display: table; margin-bottom: 20px; padding: 0 5px; width: 100%; text-align: center;}
.share-box .btn { display: table-cell; margin: 0 3px; padding: 10px 15px; width: 33.33333%; font-size: 16px; color: #fff; line-height: 20px;}
.share-box .btn .fa { margin: 0 6px 0 0;}
.share-box .btn-line { background-color: #42CB00; border-radius: 3px 0 0 3px !important;}
.share-box .btn-line .fa-line:before { display: block; width: 16px; height: 16px; content: ""; background-image: url(../img/social-line.png); background-position: center center; background-repeat: no-repeat;  background-size: 16px auto; vertical-align: middle;}
.share-box .btn-facebook { background-color: #465892; border-radius: 0 !important;}
.share-box .btn-google { background-color: #D32322; border-radius: 0 3px 3px 0 !important;}

.timer-box,
.mark-box { margin: 0 5px 10px 5px;}
.timer-box dl,
.mark-box dl { display: table; margin: 0; width: 100%}
.timer-box dt,
.timer-box dd,
.mark-box dt,
.mark-box dd  { display: table-cell; padding: 5px; line-height: 20px;}
.timer-box dt,
.mark-box dt { width: 80px; text-align: center; color: #fff; border-radius: 3px 0 0 3px;}
.timer-box dt { background-color: #FF952B; vertical-align: middle;}
.mark-box dt { background-color: #514841; vertical-align: middle;}
.timer-box dd,
.mark-box dd { border: 1px solid #eaeaea; border-left: none; border-radius: 0 3px 3px 0;
	/*overflow : hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;*/
}
.tips-box { margin: 0 5px; padding: 5px; border: 1px solid #eaeaea }

.detail-right { float: right; width: 52%; padding: 20px;}
.prod-heading { margin-bottom: 20px;}
.prod-heading .meta-referer { font-size: 16px; font-weight: bold; color: #ff0000;}
.prod-heading .meta-label { font-size: 14px;}
.prod-heading .meta-name { font-size: 20px; font-weight: 800; height: auto; max-height: 4.2em;}

.prod-brief,
.prod-spec { color: #888; font-size: 15px; line-height: 1.6;}
.prod-spec strong { color: #444;}

.prod-price { margin: 0; padding: 10px; font-size: 16px; line-height: 30px; border-bottom: 1px solid #eaeaea;}
.prod-price:after { display: block; content: ""; clear: both;}
.prod-price strong { margin-right: 10px; font-size: 16px; font-weight: normal; color: #444; text-decoration: none !important;}
.prod-price .price-new { float: left; color: #EB6000; font-size: 24px; font-weight: 600;}
.prod-price .price-old { float: right; color: #ccc; }
.prod-price .price-old span {text-decoration: line-through;}

.prod-choose { position: relative; margin: 20px 0; padding: 10px 0 0; display: table; width: 100%; text-align: left; border-top: 1px solid #eaeaea;}
.prod-choose h3 { display: table-header-group; margin: 0; padding: 0; font-size: 14px; line-height: 30px;}
.prod-choose h5 { display: table-cell; line-height: 30px; width: 4em;}
.prod-choose .choose-color { display: table-cell; padding-right: 10px; vertical-align: top;}
.prod-choose .choose-color .form-control { padding: 5px 10px; height: 30px; box-shadow: none;}
.prod-choose .choose-number { display: table-cell; min-width: 80px; vertical-align: top;}
.Spinner { position: relative; padding: 0 24px; width:80px; height: 30px; text-align: center; border: 1px solid #d6d6d6; border-radius: 3px;
	background: -moz-linear-gradient(top, #fdfdfd, #f4f4f4);
	background: -webkit-linear-gradient(top,#fdfdfd,#f4f4f4);
	background: -o-linear-gradient(top, #fdfdfd, #f4f4f4);
	background: -ms-linear-gradient(top, #fdfdfd 0%,#f4f4f4 100%);
	background: linear-gradient(top, #fdfdfd 0%,#f4f4f4 100%);
}
.Spinner a { display: block; position: absolute; top: 0; width: 24px; height:28px; font-size: 20px; line-height: 26px; text-align: center; text-decoration: none;}
.Spinner a i { display: block; width: 100%; height: 100%; font-style: normal; font-family: "微軟正黑體";}
.Spinner a.DisDe,
.Spinner a.Decrease { left: 0;}
.Spinner a.DisDe { color: #ccc;}
.Spinner a.Increase { right: 0;}
.Spinner .Amount { width: auto; max-width: 32px; height: 28px; line-height: 28px; text-align: center; border-radius: 2px; border: 1px solid #d6d6d6; border-top: none; border-bottom: none; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.05);}

.Spinner2 { position: relative; padding: 0 24px; width:80px; height: 30px; margin:0 auto; text-align: center; border: 1px solid #d6d6d6; border-radius: 3px;
	background: -moz-linear-gradient(top, #fdfdfd, #f4f4f4);
	background: -webkit-linear-gradient(top,#fdfdfd,#f4f4f4);
	background: -o-linear-gradient(top, #fdfdfd, #f4f4f4);
	background: -ms-linear-gradient(top, #fdfdfd 0%,#f4f4f4 100%);
	background: linear-gradient(top, #fdfdfd 0%,#f4f4f4 100%);
}
.Spinner2 a { display: block; position: absolute; top: 0; width: 24px; height:28px; font-size: 20px; line-height: 26px; text-align: center; text-decoration: none;}
.Spinner2 a i { display: block; width: 100%; height: 100%; font-style: normal; font-family: "微軟正黑體";}
.Spinner2 a.DisDe,
.Spinner2 a.Decrease { left: 0;}
.Spinner2 a.DisDe { color: #ccc;}
.Spinner2 a.Increase { right: 0;}
.Spinner2 .Amount { width: auto; max-width: 32px; height: 28px; line-height: 28px; text-align: center; border-radius: 2px; border: 1px solid #d6d6d6; border-top: none; border-bottom: none; box-shadow: inset 1px 1px 1px rgba(0,0,0,0.05);}




.prod-groups  { margin-bottom: 20px; padding: 20px; background-color: #FAF8EF; border: 1px solid #DFDFD0;}
.prod-groups h4 { margin: 0 0 10px 0; font-size: 14px; font-weight: 700;}
.prod-color-box { display: table; margin-bottom: 8px; width: 100%;}
.prod-color-box:last-child { margin-bottom: 0;}
.prod-color-box .choose-color { display: table-cell; padding-right: 10px; vertical-align: top;}
.prod-color-box .choose-color .form-control { padding: 5px 10px; height: 30px; box-shadow: none;}
.prod-color-box .choose-number { display: table-cell; width: 80px; vertical-align: top;}

.prod-coupon { margin-bottom: 20px;}

.prod-buttons { display: table; width: 100%;}
.prod-buttons div { display: table-cell; width: 33.333333%; margin: 0; padding-right: 10px;}
.prod-buttons div:last-child { padding-right: 0;}
.prod-buttons .btn { margin: 0; display: block; float: left; height: 50px; border-radius: 3px;}

.prod-notice { margin-top: 10px; font-weight: bold; font-size: 18px;}
.prod-notice a { font-weight: bold; font-size: 18px; text-decoration: underline; color: #F60;}
#hidden-arrival-notice {
	max-width: 550px;
	border-radius: 4px;
	transform: translateY(-50px);
	transition: all .33s;
}
.fancybox-slide--current #hidden-arrival-notice { transform: translateY(0);}
#hidden-arrival-notice .list-item { display: table; transform: none;}
#hidden-arrival-notice .list-item .list-image,
#hidden-arrival-notice .list-item .list-info { display: table-cell; vertical-align: top; cursor: default;}
#hidden-arrival-notice .list-item .list-image { width: 100px;}
#hidden-arrival-notice .list-item:hover,
#hidden-arrival-notice .list-item:focus,
#hidden-arrival-notice .list-item:active { top: 0; box-shadow: none;}
#hidden-arrival-notice .prod-choose { padding: 0; border: none;}
#hidden-arrival-notice .prod-choose .choose-color { padding: 0;}

.prod-purchase { margin-bottom: 20px; background-color: #fff;}
.prod-purchase .title { margin-bottom: 10px; border-bottom: 1px solid #e4e4e4;}
.prod-purchase .title h3 { display: inline-block; margin: 0 0 -1px 0; padding: 10px 15px; font-size: 18px; line-height: 30px; font-weight: bold; border-right: 1px solid #e4e4e4; border-bottom: 1px solid #fff;}

.prod-purchase .row { margin: 0;}
.purchase-item { display: table; padding: 10px; width: 100%; vertical-align: top;}
.purchase-item .list-check,
.purchase-item .list-image,
.purchase-item .list-info { display: table-cell; vertical-align: top;} 
.purchase-item .list-check { padding-right: 15px;}
.purchase-item .list-image { width: 95px;}
.purchase-item .list-image img { width: 80px;}
.purchase-item .list-info .list-content {width: 60%; float: left;}
.purchase-item .list-info .meta-name { height: auto;}
.purchase-item .list-info .list-price { width: 40%; float: right; text-align: right;}
.purchase-item .list-info .list-form { display: table; clear: both;}
.purchase-item .list-info .list-form .form-item { vertical-align: top; padding-right: 10px;}
.purchase-item .list-info .list-form .form-item:before { display: none;}
.purchase-item .list-info .list-form .form-item:last-child { padding-right: 0;}
.purchase-item .list-info .list-form .form-control { border: 2px solid #eaeaea; box-shadow: none;}
.load-more { padding: 5px; background-color: #FAFAFA; font-size: 12px; line-height: 20px; text-align: center; border-top: 1px solid rgba(0,0,0,0.1); cursor: pointer;}

.prod-descript { margin-bottom: 20px; background-color: #fff;}


.desc-type { margin: 0; padding: 0; list-style: none; border-bottom: 1px solid rgba(0,0,0,0.1);}
.desc-type li { display: table-cell; background-color: #fafafa; border-right: 1px solid rgba(0,0,0,0.1);}
.desc-type li a { display: block; padding: 15px; font-size: 18px; font-weight: 700; line-height: 20px; text-decoration: none;}
.desc-type li.tab-current a { position: relative; background-color: #fff; bottom: -1px;}
.desc-container section { display: none;}
.desc-container section.content-current { display: block;}
.desc-container section .fck-box { padding: 20px;}
.desc-container section .fck-box img { max-width: 100%;}
.desc-container section .recipes-item { padding: 20px 10px; cursor: pointer;}
.desc-container section .list-image img { display: block; width: 100%;}
.desc-container section .list-content { padding: 15px 5px 0;}
.desc-container section .list-content .meta-name { margin-bottom: 10px; font-size: 15px; height: auto;}
.desc-container section .list-content .meta-author { margin: 0; font-size: 12px; color: #ccc;}
.prod-recipes { position: relative; top: 0; bottom: -1px; margin: 0;}
.prod-recipes .col-sm-4 { border-right: 1px solid rgba(0,0,0,0.1); border-bottom: 1px solid rgba(0,0,0,0.1);}
.prod-recipes .col-sm-4:nth-child(3n) { border-right-color: rgba(0,0,0,0);}

.history-box,
.relative-box { position: relative;}
.history-box .title,
.relative-box .title { margin: 0 0 20px 0; padding: 0; font-size: 20px; font-weight: bold; line-height: 40px;}
.history-box .swiper-button,
.relative-box .swiper-button { position: absolute; right: 0; top: 0; display: table; box-shadow: 0 1px 2px rgba(0,0,0,0.1);}
.history-prev,
.history-next,
.relative-prev,
.relative-next { display: table-cell; width: 40px; height: 40px; text-align: center; line-height: 40px; background-color: #FF952B; color: #fff; cursor: pointer;}
.history-box .swiper-button  .swiper-button-disabled,
.relative-box .swiper-button .swiper-button-disabled { background-color: #fff; color: #ccc; cursor: default;}

/* Shopping Cart */
.cart-box { margin-top: -20px; margin-bottom: 20px; padding: 20px; border-top: 1px solid rgba(0,0,0,0.1);}
.cart-box .box-top { margin-bottom: 20px;}
.cart-box .btn-white { padding: 5px 20px !important; vertical-align: super;}
.cart-list-table { margin: 20px 0}
.cart-list-table table { width: 100%; border-collapse: collapse; border: 1px solid #e4e4e4;}
.cart-list-table table thead { background-color: #f4f4f4;}
.cart-list-table table thead > tr > th { height: 30px; text-align: center;}
.cart-list-table table thead > tr > th:first-child > label { margin: 0 20px 0 0;}
.cart-list-table table tbody {}
.cart-list-table table tbody > tr > td > label { float: left; margin-right: 10px;}
.cart-list-table table tbody > tr > td:last-child > .btn { margin-bottom: 10px; padding: 5px 8px !important; display: block; width: 100%; font-size: 12px;}
.cart-list-table table tbody > tr > td:last-child > .btn > span.visible-xs { margin-left: 8px;}
.cart-list-table table th { padding: 0 10px; vertical-align: middle; border-top: 1px solid #e4e4e4;}
.cart-list-table > table > tbody > tr > td { padding: 10px; vertical-align: top; text-align:center; border-top: 1px solid #e4e4e4;}
.cart-list-table > table > tbody > tr > td.table-prod { padding: 0; width: 50%;}
.cart-list-table > table > tbody > tr > td.table-prod > table { border: none;}
.cart-list-table > table > tbody > tr > td.table-prod > table td { padding: 10px;}
.cart-list-table > table > tbody > tr > td.table-prod > table tr { border-bottom: 1px solid #e4e4e4;}
.cart-list-table > table > tbody > tr > td.table-prod > table tr:last-child { border-bottom: none;}
.cart-list-table table input[type='checkbox'] { display: inline-block; margin: 0; vertical-align: middle;}
.cart-list-table table tr.addition td { border: none;}
.cart-list-table table tr.addition { background-color: #F9F6F3;}
.cart-list-table table tr.addition > td:first-child > .cart-prod-item { position: relative;}
.cart-list-table table tr.addition > td:first-child > .cart-prod-item:after { position: absolute; right: 0; top: 0; display: block; content: "加購品"; padding: 2px 6px; background-color: #FF4000; font-size: 12px; color: #fff; font-weight: bold; border-radius: 3px;}

.cart-list-table table tr.addition2 > td:first-child > .cart-prod-item { position: relative;}
.cart-list-table table tr.addition2 > td:first-child > .cart-prod-item:after { position: absolute; right: 0; top: 0; display: block; content: "訂單加購品"; padding: 2px 6px; background-color: #FF4000; font-size: 12px; color: #fff; font-weight: bold; border-radius: 3px;}
.cart-list-table table tr.addition3 > td:first-child > .cart-prod-item { position: relative;}
.cart-list-table table tr.addition3 > td:first-child > .cart-prod-item:after { position: absolute; right: 0; top: 0; display: block; content: "滿額贈"; padding: 2px 6px; background-color: #FF4000; font-size: 12px; color: #fff; font-weight: bold; border-radius: 3px;}

.cart-prod-item { display: table;}
.cart-prod-item .list-image,
.cart-prod-item .list-info { display: table-cell; vertical-align: top;}
.cart-prod-item .list-image { width: 40px;}
.cart-prod-item .list-info { padding-left: 10px; text-align: left;}
.cart-prod-item .list-info .meta-name { margin-right: 6em; height: auto; max-height: none;}
.cart-prod-item .list-info .meta-desc { margin: 0; padding: 0; list-style: none;}
.cart-prod-item .list-info .meta-desc li { position: relative; padding-left: 6em; font-size: 12px; color: #777;}
.cart-prod-item .list-info .meta-desc li span { position: absolute; left: 0;}
.cart-prod-item .list-info .meta-desc li span:after { display: inline; content: "：";}
.cart-prod-item .list-info .meta-desc li a { color: #09F;}
.cart-prod-item .list-info .meta-desc li a:hover { color: #F60;}

.cart-price-box { margin: 0; padding: 0; width: 100%; list-style: none; border-left: 1px solid #eaeaea;}
.cart-price-box li { position: relative; padding-left: 75%; padding-top: 5px; padding-bottom: 5px; text-align: right; line-height: 20px;}
.cart-price-box li span { position: absolute; left: 0; right: 25%; display: block; text-align: right; font-size: 14px;}
.cart-price-box li span em { font-style: normal;}
.cart-price-box li.total-price { font-size: 18px; color: #EB5F00;}
.cart-price-box li.total-price span { font-weight: bold;}
/* v-cart pc */
input.cart-form-input{display: inline; width: 404px;}
.v-cart-dollar{width: 65px;}
.v-cart-Adollar{width: 65px;}
.colcu-color{color:#eb5f00;}
.colcu-dr-color{color:#eb5f00;}


.box-cart-tips { margin: 20px 0; padding: 15px; background-color: #f0f0f0; font-size: 18px; line-height: 30px; text-align: center;}
.box-cart-from .box-left { border-right: 1px solid #eaeaea;}
.form-btn-groups { margin-left: 10%; padding: 20px 0; width: 80%;}
.form-btn-groups h3 { margin: 0 0 20px 0; font-size: 18px; font-weight: bold;}
.form-btn-groups .col-md-5 { padding-left: 0;}
.form-btn-groups .col-md-5 .btn { text-align: left;}
.form-btn-groups .btn-light { height: 70px; line-height: 50px;}
.form-btn-groups .btn-google { margin-top: 10px;}

.box-coupon { position: relative; margin-bottom: 10px; padding-left: 140px; padding-right: 30px;}
.box-coupon h4.title { position: absolute; left: 0; margin: 0; padding: 0; font-size: 14px; line-height: 1.4;}
.box-coupon h4.title span { display: block;}
.box-coupon .coupon-form { margin-bottom: 10px;}
.box-coupon .coupon-form .form-control { height: 40px;}
.box-coupon .coupon-form .btn-cart { padding: 6px 20px; font-size: 16px;}

.checkout-box { margin-bottom: 20px; padding: 40px 20px 20px;}
.checkout-box.mar-top-none { border-top: 1px solid rgba(0,0,0,0.1);}
.checkout-box .checkout-item { margin: 0 0 10px 0; padding: 20px 0 30px; border-bottom: 1px solid #eaeaea;}
.checkout-box .checkout-item:last-child { padding-bottom: 10px; margin-bottom: 0; border-bottom: none;}
.checkout-box .checkout-title { margin: 0; padding: 5px 0; font-size: 18px; font-weight: bold; line-height: 28px; color: #222;}
.checkout-box .checkout-title small { font-size: 12px; padding-left: 10px; color: #999;}
.checkout-box .checkout-title small em { font-style: normal; padding: 0 2px;}
.checkout-form { display: table; float: left; margin-bottom: 18px;}
.checkout-form:last-child { margin-bottom: 0;}
.checkout-form.form-half { width: 50%; padding-right: 60px;}
.checkout-form.form-full { width: 100%; padding-right: 60px;}
.checkout-form .meta-name,
.checkout-form .meta-content { display: table-cell; vertical-align: top; line-height: 38px;}
.checkout-form .v-meta-content {line-height: 45px;}
.checkout-form .meta-name { width: 100px; font-size: 14px; color: #444; font-weight: normal;}
.checkout-form .meta-name small { font-size: 12px; padding-left: 10px; color: #999;}
.checkout-form .meta-name small em { font-style: normal; padding: 0 2px;}
.checkout-form .form-control { padding: 10px; line-height: 20px; height: 40px;}
.checkout-form textarea.form-control { height:auto;}
.checkout-form .meta-content .form-short { width: 60px;}
.checkout-form .meta-content .form-long { width: auto; padding-left: 20px;}
.checkout-form .meta-content .form-checkbox { margin-right: 20px; margin-bottom: 0; min-width: 60px; font-weight: normal;}
.checkout-form .meta-content .form-checkbox > input { margin-right: 10px;}
.checkout-form .meta-content p:last-child { margin: 0; padding: 10px 0 0;}
.checkout-form .meta-content .margin-top { margin-top: 18px;}
.checkout-form .meta-content .more_addr { padding: 15px; background-color: #f2f2f2; border-radius: 3px; line-height: 1.4;}
.checkout-form .meta-content .meta-note { display: block; margin-top: 10px; width: 100%;}

.checkout-divide { clear: both; margin: 18px 60px 18px 0; height: 1px; border-bottom: 1px dotted #999;}
.checkout-form.checkout-button { padding-left: 100px;}
.checkout-form.checkout-button .btn .fa { margin-right: 10px;}

.btn-icon .fa { margin-right: 0.5em;}
.btn-icon:hover,
.btn-icon:active,
.btn-icon:focus { box-shadow: none; background-color: #f4f4f4; color: #514841;}

#hidden-address-book { width: 780px; height: 380px; max-width: 80%; max-height: 80%; border-radius: 4px;}
#hidden-address-book h2 { margin: 0; padding: 0; font-size: 18px; font-weight: bold;}
.address-history { margin: 20px 0; max-height: 230px; overflow-y: auto;}
#hidden-password-book h2 { margin: 0; padding: 0; font-size: 18px; font-weight: bold;}
#hidden-password-book { width: 380px; height: 220px; max-width: 80%; max-height: 80%; border-radius: 4px;}

.box-left.box-left-lg { width: 70%;}
.box-right.box-right-lg { width: 30%;}

.address-item { margin-bottom: 10px;}
.address-item:last-child { margin: 0;}
.address-item label.item-form { display: block; font-weight: normal;}
.address-item label.item-form > input[type="radio"] { display: none;}
.address-item label.item-form > input[type="radio"] + .item-content { margin: 0; padding: 10px; border: 1px solid #d6d6d6; border-radius: 4px;}
.address-item label.item-form > input[type="radio"]:checked + .item-content { border-color: #EB6100;}
.address-item .item-content > h4 { margin: 0; padding: 0 0 3px 0; font-size: 16px; font-weight: bold; line-height: 1.5;}
.address-item .item-content > h4:after { display: none; content: "默認地址"; margin-top: -3px; margin-left: 15px; padding: 0 4px; font-size: 12px; line-height: 1.5; font-weight: normal; color: #fff; background-color: #EB6100; border-radius: 2px; vertical-align: middle;}
.address-item label.item-form > input[type="radio"]:checked + .item-content h4:after { display: inline-block;}
.address-item .item-content > ul { margin: 0; padding: 0; list-style: none; color: #999;}
.address-item .item-content > ul > li { display: inline-block; padding-right: 15px;}

.fancy-buttons .btn { margin: 0; padding: 5px 20px; font-size: 16px; font-weight: 700; border-radius: 3px;}
.no-weight { position: relative; padding-left: 25px; font-weight: normal; margin-right: 10px; text-align: left; vertical-align: middle;}
.no-weight input[type="checkbox"],
.no-weight input[type="radio"] { position: absolute; left: 0; margin-right: 8px;}

.success-box { position: relative; margin: 5em auto; padding: 0 0 0 140px; max-width: 60%;}
.success-box .fa { position: absolute; left: 0; top: 0; width: 96px; height: 96px; font-size: 48px; color: #FFA215; border: 2px solid #FFA215; border-radius: 100%;
text-align: center; line-height: 96px;}
.success-box h2 { font-size: 24px; font-weight: bold;}
.success-box p.tips { color: #eb5f00;}
.success-box .btn { margin-top: 2em; margin-right: 2.5em;}

.checkout-box .row.match-h-box { margin-left: -20px; margin-right: -20px;}
.checkout-box .match-height { padding: 0; border-right: 1px solid #eaeaea;}
.checkout-box .match-height:last-child { border-right: none;}
/*.checkout-box .match-height:nth-child(3) .checkout-item.no-style:first-child { margin-bottom: 20px !important;}*/
.checkout-box .checkout-item.no-style { padding: 0 20px !important; border-bottom: none;}
.checkout-box .checkout-item .checkout-title { margin-bottom: 10px;}
.checkout-box .checkout-content > dl { display: table; margin-bottom: 0; padding: 5px 0; width: 100%;}
.checkout-box .checkout-content > dl:last-child { margin-bottom: 20px;}
.checkout-box .checkout-content > dl dt,
.checkout-box .checkout-content > dl dd { display: table-cell;}
.checkout-box .checkout-content > dl dt { width: 6em; color: #888; font-weight: normal;}

.checkout-box .checkout-content.checkout-distribution > dl dt,
.checkout-box .checkout-content.checkout-distribution > dl dd { display: block; width: 100%;}

.checkout-box .checkout-content > .checkout-buttons { margin-top: 20px;}
.checkout-box .checkout-content > .checkout-buttons .btn { display: block; margin-bottom: 10px; height: 40px; font-size: 14px; line-height: 30px;}

/* Returned */
.box-form.box-returned { padding: 40px 16.666666667%; border: 1px solid #EB5F00;}
.returned-form { margin-bottom: 20px; display: table; width: 100%;}
.returned-form.mar-bottom-none { margin-bottom: 10px}
.returned-form .meta-name,
.returned-form .meta-content { display: table-cell; vertical-align: top;}
.returned-form .meta-name { width: 80px; padding: 10px 0 0; line-height: 20px; font-weight: normal; font-size: 14px; color: #666}
.returned-form .meta-content input.form-control[type='text'],
.returned-form .meta-content select.form-control { height: 40px;}
.returned-form .meta-content div.form-control { margin-bottom: 10px; height: 40px;}
.returned-form .meta-content div.form-control:last-child { margin-bottom: 0;}
.returned-form .meta-content div.form-control.form-meta { position: relative; padding-right: 100px; padding-left: 30px; height: auto;}
.returned-form .meta-content div.form-control.form-meta input[type='checkbox'],
.returned-form .meta-content div.form-control.form-meta input[type='raido'] { position: absolute; left: 10px; top: 10px; margin: 0;}
.returned-form .meta-content div.form-control.form-meta .pull-right { position: absolute; right: 10px; top: 10px;}
.box-returned .color-yellow { background-color: #FFFAEC;}
.box-returned .color-yellow h3 { margin: 0; padding: 10px 0; font-size: 16px; font-weight: 700; line-height: 20px;}
.box-returned .bank-info-top,
.box-returned .bank-info-bottom { margin-left: -20px; margin-right: -20px; padding-left: 10px; padding-right: 10px;}
.box-returned .bank-info-top { padding-top: 10px; padding-bottom: 10px;}
.box-returned .bank-info-bottom { margin-bottom: 20px;}
.returned-words { margin: 20px 0; padding: 30px 0; border: 1px solid #eaeaea;}
.returned-words .words-title { margin: 0; padding-left: 10px; width: 5em; font-size: 18px; font-weight: 700;}
.returned-words .words-content a { color: #EB5F00;}
.returned-price { padding-right: 10px;}
.returned-other-note{padding-left:80px; padding-bottom: 20px; color: #EB6000;}


/* Faq */
.faq-type { margin: 20px 0;}
.faq-type li { display: inline-block; font-size: 16px;}
.faq-type li:after { display: inline-block; content: "|"; color: #ccc; margin: 0 15px;}
.faq-type li:last-child:after { display: none;}
.faq-type li a { margin-right: 3px; text-decoration: none;}
.faq-type li.active a,
.faq-type li a.active { color: #EB5F00;}

.faq-list .sidebar-menu,
.faq-list .sidebar-menu ul,
.faq-list .sidebar-menu > li { margin: 0; padding: 0; list-style: none;}
.faq-list .sidebar-menu > li { margin-bottom: 10px;}
.faq-list .sidebar-menu > li > a { position: relative; z-index: 1; display: block; padding: 14px 15px 14px 50px; background: #fff; font-size: 16px; line-height: 20px; font-weight: 700; color: #222; text-decoration: none; border: 1px solid #eaeaea;}
.faq-list .sidebar-menu > li > a > .fa { position: absolute; left: 0; top: 0; color: #ccc; transform: translate(150%,100%);}
.faq-list .sidebar-menu > li > a:after { visibility: hidden; opacity: 0; content: ""; position: absolute; left: 0; bottom: 0; width: 12px; height: 12px; background-color: #fff; border-left: 1px solid #eaeaea; border-bottom: 1px solid #eaeaea; transform: translate(150%,0px) rotate(-45deg); transition: 0.1s;}
.faq-list .sidebar-menu > li > a.active:after { visibility: visible; opacity: 1; transform: translate(150%,6px) rotate(-45deg);}
.faq-list .sidebar-menu > li > ul { display: none; position: relative; z-index: 2; padding: 20px 20px 20px 50px; border: 1px solid #eaeaea; border-top: 0;}

.faq-list .fck-box h3 { font-size: 16px;}
.faq-list .fck-box ol { padding-left: 20px;}
.faq-list .fck-box li { padding-left: 10px;}

.fck-box img { max-width: 100% !important; height: auto !important;}

/* Member */
label.meta-name { font-weight: normal;}
.line-through { position: relative; margin: 20px 0; text-align: center;}
.line-through:after { position: absolute; left: 0; top: 50%; right: 0; z-index: 1; display: block; content: ""; border-top: 1px solid #e4e4e4;}
.line-through span { position: relative; z-index: 2; display: inline-block; padding: 0 6px; background-color: #fff;}
.member-form { display: table; width: 100%; margin-bottom: 20px;}
.member-form .meta-name,
.member-form .meta-content { display: table-cell; vertical-align: top;}
.member-form .meta-content .meta-link { padding-top: 10px; text-align:right;}
.member-form .meta-content .meta-link a { color: #999;}
.member-form .meta-name { padding: 10px 0 0; width: 100px; font-size: 14px; line-height: 20px; color: #888;}
.member-form .meta-content .form-control { height: 40px;}
.member-form .member-button { padding-left: 100px;}
.member-form .btn-buy { margin: 0; height: 50px;}

.form-captcha { position: relative;}
.form-captcha .img-captcha { position: absolute; right: 0; top: 0; transform: translate(-5px, 5px); cursor: pointer;}
.form-tips { margin: 10px 0; color: #888;}

.member-form.member-option { padding-left: 100px;}
.member-form.member-option label { margin-right: 1em; font-weight: normal; color: #666;}
.member-form.member-option input[type='checkbox'],
.member-form.member-option input[type='radio'] { margin-right: 10px;}
.member-form.member-option a { color: #444; text-decoration: underline;}
.member-form.member-option .member-tips { margin: 0 0 1.5em; padding: 1.5em 1.5em 1.5em 2em; background: #efefef;}

#option-sms { display: none;}

.member-social.pull-offset { padding-left: 100px; margin-bottom: 40px;}
.member-social .btn { margin-bottom: 10px; font-size: 14px; text-align: left;}
.member-social h4 { font-size: 14px; text-align: center; color: #888;}
.member-social h4 > a { color: #444; text-decoration: underline;}

.checkout-box .muti-input { margin-left: -10px; margin-right: -10px;}
.checkout-box .control-label small { font-size: 12px; padding-left: 10px; color: #999;}
.checkout-box .sample { margin-top: 5px; color: #999;}
.checkout-box .input-text { line-height: 34px;}

.title1.title-big { margin: 10px 0 20px; padding: 20px 0; font-weight: bold;}

/* Coupon */
.box-right.text-right .btn { margin-left: 7px;}
.coupon-list { margin: 20px 0 0;}
.coupon-item { display: table; margin-bottom: 20px; width: 100%; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15);}
.coupon-item .coupon-meta { display: table-cell; vertical-align: top;}
.coupon-item .coupon-price { padding: 15px 20px 0; height: 80px; max-height: 80px;}
.coupon-item .coupon-price big { margin-right: 10px; color: #EB5F00; font-size: 56px; font-weight: 700; line-height: 64px;}
.coupon-item .coupon-price big:before { display: inline-block; content: "$"; margin-right: 10px; vertical-align: top; font-size:20px; line-height: 2;}
.coupon-item .coupon-price big.discount:before { display: none;}
.coupon-item .coupon-price big.discount:after { display: inline-block; content: "折"; margin-left: 10px; font-size: 24px; font-weight: normal;}
.coupon-item .coupon-price small { font-size: 14px; color: #888;}
.coupon-item .coupon-info { padding: 15px 20px;}
.coupon-item .coupon-info p { margin: 0; color: #888;}
.coupon-item .coupon-info time { color: #ccc; font-size: 12px;}
.coupon-item .coupon-use { position: relative; padding: 20px 20px 20px 25px; width: 1em; background-color: #FFE153; background-image: url(../img/line-coupon.gif); background-repeat: repeat-y; background-position: left top; color: #EB5F00; font-size: 18px; font-weight: 600; vertical-align: middle; cursor: pointer;}
.coupon-item .coupon-use:before,
.coupon-item .coupon-use:after { position: absolute; left: 5px; content: ""; width: 20px; height: 20px; background-image: url(../img/body-bg.png); background-color: #F5EEE9; border-radius: 100%;}
.coupon-item .coupon-use:before { top: 0; transform: translate(-50%,-50%); box-shadow: inset 0 -1px 0px rgba(0,0,0,0.15);}
.coupon-item .coupon-use:after { bottom: 0; transform: translate(-50%,50%); box-shadow: inset 0 1px 0px rgba(0,0,0,0.15);}
.coupon-item .coupon-use p { margin: 0;}

.coupon-overdue,
.coupon-overdue .coupon-meta,
.coupon-overdue .coupon-meta big,
.coupon-overdue .coupon-meta small,
.coupon-overdue .coupon-meta p,
.coupon-overdue .coupon-meta time,
.coupon-overdue .coupon-meta big:before { background-color: #f4f4f4; color: #ccc;}
.coupon-overdue .coupon-use { background-color: #ccc; background-image: url(../img/line-coupon-overdue.gif); cursor: default;}
.coupon-overdue .coupon-use p { background-color: #ccc; color: #999;}

/* Faforite */
.favor-list { padding: 20px 0 0;}
.favor-list .list-item .list-button { float: none; width: 100%;}
.favor-list .list-item .list-button:after { display: table; content: ""; clear: both;}
.favor-list .list-item .list-button .btn { float: left; margin: 0; border-radius: 0;}
.favor-list .list-item .list-button .btn .fa { display: none;}
.favor-list .list-item .list-button .btn-cart { width: 60%;}
.favor-list .list-item .list-button .btn-favor { width: 40%;}
.favor-list .list-item .out-stock-text { display: none;}
.favor-list .list-item.out-stock { background-color: #f4f4f4;}
.favor-list .list-item.out-stock .list-image { position: relative; border-color: #f4f4f4;}
.favor-list .list-item.out-stock .list-image:before { display: block; content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; z-index:1; background-color: rgba(0,0,0,0.6);}
.favor-list .list-item.out-stock .out-stock-text { display: block; position: absolute; left: 50%; top: 50%; z-index: 2; padding: 20px 0 0; width: 100px; height: 100px; color: #fff; font-size: 24px; text-align: center; line-height: 1.2; border: 1px solid #fff; border-radius: 100em; transform: translate(-50%,-50%);}
.favor-list .list-item.out-stock .meta-label,
.favor-list .list-item.out-stock .meta-name { color: #999;}
.favor-list .list-item.out-stock .btn-cart { color: #fff; border-color: #444;
	background: -moz-linear-gradient(top, #666, #444);
	background: -webkit-linear-gradient(top,#666,#444);
	background: -o-linear-gradient(top, #666, #444);
	background: -ms-linear-gradient(top, #666 0%,#444 100%);
	background: linear-gradient(top, #666 0%,#444 100%);
}

/* Order History */
.order-history-header { padding: 9px; background-color: #f9f9f9; line-height: 20px; border: 1px solid #e4e4e4; border-bottom: none;}
.order-history-header p { margin: 0; color: #888;}
.order-history-header p strong { color: #514841; font-weight: 400;}
.status-process { color: #EB5F00;}
.status-done { color: #666;}
.cart-list-table time { display: block; font-size: 12px; color: #999;}

.order-history-list .order-history-header { margin-top: 20px; margin-bottom: -20px;}
.order-history-list .cart-list-table thead { background-color: #fff;}

.fancy-popup-box { display: none; width: 720px; max-width: 80%; max-height: 80%; border-radius: 7px;}
.fancy-popup-box h2 { font-size: 18px; font-weight: bold;}
.fancy-popup-box .prod-buttons .btn { margin: 0 auto; float: none;}
.ask-form { display: table; width: 100%; margin-bottom: 20px;}
.ask-form .meta-name,
.ask-form .meta-content { display: table-cell; vertical-align: top;}
.ask-form .meta-name { padding-top: 10px; width: 80px; font-size: 14px; color: #444; line-height: 20px;}
.ask-form .meta-content input[type='text'].form-control,
.ask-form .meta-content select.form-control { height: 40px;}

/*　Order History Detail */
.logistics-info { display: none; position: relative; margin-bottom: 20px; padding: 20px; background-color: #f9f9f9; border-top: 1px solid #e4e4e4; box-shadow: 0 1px 2px rgba(0,0,0,0.15);}
.logistics-info:before { position: absolute; z-index: 99; left: 50%; top: 0; content: ""; width: 14px; height: 14px; background-color: #f9f9f9; box-shadow: inset 1px 1px 0 rgba(0,0,0,0.15); transform: translate( -50%, -50%) rotate(45deg);}
.logistics-content ul { margin: 0 10px; padding: 0; border-left: 1px solid #e4e4e4; list-style: none;}
.logistics-content ul li { position: relative; padding: 10px 10px 10px 40px;}
.logistics-content ul li:before { display: block; content:""; position: absolute; left: 0; top: 0; width: 12px; height: 12px; background-color: #ccc; border: 3px solid #fff; border-radius: 100%; transform: translate(-50%,120%);}
.logistics-content ul li.now:before { background-color: #EB9513;}
.logistics-content ul li,
.logistics-content ul li time { font-size: 14px; color: #888; font-weight: normal; margin-right: 40px;}
.logistics-content ul li.now,
.logistics-content ul li.now time { color: #444;}
.logistics-content .scrollbar-v {max-height: 120px;}

.order-detail.success-box { margin: 0; padding: 0 10px; max-width: none;}
.order-detail.success-box .order-tips { margin: 20px 0; height: 64px;}
.order-detail.success-box i.fa { left: 10px; width: 64px; height: 64px; font-size: 32px; line-height: 60px;}
.order-detail.success-box h2,
.order-detail.success-box p { margin: 0; padding-left: 80px;}
.order-detail.success-box p { padding-top: 10px;}
.order-detail.success-box h2 { color: #FFA114;}
.order-detail.success-box .btn { margin: 0 0 10px 0;}

.order-step-box { width: 100%; height: 190px; text-align: center; border-left: 1px solid #e4e4e4;}
.order-step-box li { display: inline-block; padding-top: 30px; vertical-align: top;}
.order-step-box .order-steps { background-image: url(../img/order-icons.gif); width: 190px; height: 43px;}
.order-step-box .order-steps.step-1 { background-position: 0 0;}
.order-step-box .order-steps.step-2 { background-position: -190px 0;}
.order-step-box .order-steps.step-3 { background-position: -380px 0;}
.order-step-box .order-steps.step-4 { background-position: -570px 0;}
.order-step-box .now .order-steps.step-1 { background-position: 0 -43px;}
.order-step-box .now .order-steps.step-2 { background-position: -190px -43px;}
.order-step-box .now .order-steps.step-3 { background-position: -380px -43px;}
.order-step-box .now .order-steps.step-4 { background-position: -570px -43px;}
.order-step-box h3 { font-size: 14px; color:#51463F;}
.order-step-box time { font-size: 12px; color: #999;}

.order-ask-list .sidebar-menu { margin: 0; padding: 0; list-style: none; border-collapse: collapse;}
.order-ask-list .sidebar-menu li { border: 1px solid #e4e4e4; border-top: none;}
.order-ask-list .sidebar-menu li:first-child { border-top: 1px solid #e4e4e4;}
.order-ask-list .sidebar-menu li > a { position: relative; z-index: 99; display: block; padding: 10px 10px 10px 50px; background: #fff; font-size: 16px; font-weight: bold; color: #444; line-height: 20px; text-decoration: none; box-shadow: none;}
.order-ask-list .sidebar-menu li > a:after { display: block; opacity: 0; position: absolute; left: 15px; bottom: 8px; content: ""; width: 10px; height: 10px; background-color: #fff; border: 2px solid #eaeaea; border-left: none; border-top: none; transform: rotate(45deg) translate(100%,50%); transition: 0.1s;}
.order-ask-list .sidebar-menu li > a.active:after { opacity: 1; bottom: 4px;}
.order-ask-list .sidebar-menu li > a > span { display: block;}
.order-ask-list .sidebar-menu li > a > span:before { display: block; position: absolute; left: 0; top: 0; content: "Q"; width: 50px; font-size: 20px; font-weight: bold; color: #FF952B; text-align: center; opacity: 0.5; transform: translateY(50%);}
.order-ask-list .sidebar-menu ul { position: relative; display: none; background-color: #F9F7F0; border-top: 1px solid #e4e4e4;}
.order-ask-list .sidebar-menu ul li { padding: 0; border: none;}
.order-ask-list .sidebar-menu ul:before { position: absolute; left: 0; top: 0; display: block; content:"A"; padding-top: 10px; width: 50px; font-weight: bold; font-size: 20px; color: #FF5C26; text-align: center; opacity: 0; transition: 0.1s; transform: translateX(-20%);}
.order-ask-list .sidebar-menu ul:before { opacity: 1; transform: translateX(0%);}
.order-ask-list .sidebar-menu ul .fck-box { padding: 15px 15px 0 50px;}
.order-ask-list .sidebar-menu ul .ask-meta { padding: 0 15px 15px 50px; font-size: 12px; color: #888;}
.order-ask-list .sidebar-menu ul .ask-meta u { margin-right: 15px;}

#hidden-print-invoice { width: 470px;}
.order-invoice { margin: 20px 0; min-width: 100%;}
.order-invoice .order-tips { margin: 20px 0 0; padding: 10px; background: #efefef;}

/* Group buying */
.group-buy-list { margin-top: -20px; padding: 20px; }
.date-range { display: flex; }
.date-range div { flex: 1; }
.date-range span { flex: 0 0 30px; text-align: center; }
.group-buy-meta { margin: 0; }
.group-buy-meta dt,
.group-buy-meta dd { display: inline-block; }
.group-buy-meta dt { width: 120px; }
.group-buy-table { margin-top: 20px; }
.group-buy-table table > thead { background: #f4f4f4; }
.group-buy-table table > thead > tr > th { padding: 5px 10px; }
.group-buy-table table > tbody > tr > td { padding: 10px; }
.group-buy-table table > tbody > tr > td > label { display: none; }

/* News */
.news-form { display: inline-block; width: auto; height: 40px; border-width: 2px;}
.news-list { margin: 20px 0 0;}
.news-item { position: relative; top: 0; margin-bottom: 20px; background-color: #fff; box-shadow: 0 1px 2px rgba(0,0,0,0.15); transition: 0.3s; cursor: pointer;}
.news-item:hover,
.news-item:focus,
.news-item:active { top: -10px; box-shadow: 0 10px 30px rgba(0,0,0,0.35);}
.news-item .meta-image { position: relative;}
.news-item .meta-image img { display: block;}
.news-item .meta-image .news-icons { position: absolute; top: 0; right: 0;}
.news-item .meta-content { padding: 10px 20px;}
.news-item .meta-content .meta-date { display: block; padding: 0 0 5px 0; font-size: 12px; color: #ccc; line-height: 20px; border-bottom: 1px solid #e4e4e4;}
.news-item .meta-content .meta-title { margin: 10px 0; padding: 0; color: #444; font-size: 16px; font-weight: 600; line-height: 20px; height: 40px; transition: 0.3s; overflow : hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.news-item:hover .meta-title,
.news-item:focus .meta-title,
.news-item:active .meta-title { color: #EB5F00;}
.news-icons span { display: block; float: left; padding: 5px; width: 36px; height: 36px; font-size: 12px; color: #fff; text-align: center;}
.news-icons .icon-news { background-color: #FD005D;}
.news-icons .icon-events { background-color: #97CA37;}

.news-detail-heading { position: relative; padding-right: 80px;}
.news-detail-heading .news-icons { position: absolute; top: 0; right: 0;}
.news-detail-heading code { background-color: #fff; font-family: inherit; color: #999;}
.news-detail-heading code em { font-style: normal;}
.news-detail-box { padding: 20px 8.333333333%;}
.news-detail-box .fck-box,
.news-detail-box .fck-box p { font-size: 16px; line-height: 1.6;}
.news-detail-box .fck-box center { margin: 40px;}
.news-detail-box .fck-box center em { display: block; margin: 10px 0; color: #999; font-size: 12px; line-height: 1.6; font-style: normal;}
.news-detail-box .fck-box a { display: inline-block; position: relative; margin: 0 5px; color: #FF7F00; text-decoration: none;}
.news-detail-box .fck-box a:after { display: block; content: ""; position: absolute; left: 0; right: auto; width: 0; border-top: 1px solid #FF7F00; transition: 0.2s;} 
.news-detail-box .fck-box a:hover:after,
.news-detail-box .fck-box a:focus:after,
.news-detail-box .fck-box a:active:after { right: 0; width: 100%;}

/* Swiper Slider */
.swiper-container { width: 100%; height: 100%;}
.swiper-slide {
	/* Center slide text vertically */
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	-webkit-justify-content: center;
	justify-content: center;
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;
}
.swiper-slide .list-item:focus,
.swiper-slide .list-item:hover,
.swiper-slide .list-item:active { top: 0; box-shadow: 0 1px 1px rgba(0,0,0,0.15);}
#mobile-swiper { display: none; }

/* user Dropmenu */
.user-dropdown { position: relative;}
.user-dropdown .user-name { float: left; padding: 0 10px;}
.user-dropdown .user-member { float: left; padding: 0 10px; border-width: 1px; border-style: solid; border-color: transparent; border-bottom: none;}
.user-dropdown .user-member .fa { padding: 0 0 0 5px;}
.user-dropdown.hover .user-member { background-color: #fff; border-color: #eaeaea;}

.user-dropmenu { display: none; position: absolute; top: 100%; right: 31px; z-index: 999; margin: 0; padding: 5px; width: 180px; background-color: #fff; border: 1px solid #eaeaea;}
.user-dropmenu li { display: block; width: 50%; height: auto !important; line-height: 20px !important;text-align: left;}
.user-dropmenu li:after { display: none !important;}
.user-dropmenu li a { display: block; padding: 5px;}
.user-dropdown.hover .user-dropmenu { display: block;}

/* Tooltip */
.hint { position: relative;}
.hint:before, .hint:after { position: absolute; opacity: 0; z-index: 1000000; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; pointer-events: none;}		
.hint:hover:before, .hint:hover:after { opacity: 1;}
.hint:before { content: ''; position: absolute; background: transparent; border: 6px solid transparent; position: absolute;}	
.hint:after {
	content: attr(data-hint);
	background: rgba(0, 0, 0, 0.8);
	color: white;
	padding: 8px 10px;
	font-size: 12px;
	white-space: nowrap;
	border-radius: 3px;
	box-shadow: 4px 4px 8px rgba(0, 0, 0, 0.3);
}
/* top */
.hint-top:before { bottom: 100%; left: 0%; margin: 0 0 -18px 0; border-top-color: rgba(0, 0, 0, 0.8);}		
.hint-top:after { bottom: 100%; left: 0%; margin: 0 0 -6px -10px;}
.hint-top:hover:before { margin-bottom: -10px;}
.hint-top:hover:after { margin-bottom: 2px;}
/* default: bottom */
.hint-bottom:before { top: 100%; left: 50%; margin: -14px 0 0 0; border-bottom-color: rgba(0, 0, 0, 0.8);}
.hint-bottom:after { top: 100%; left: 50%; margin: -2px 0 0 -10px;}
.hint-bottom:hover:before { margin-top: -6px;}
.hint-bottom:hover:after { margin-top: 6px;}
/* right */
.hint-right:before { left: 100%; bottom: 50%; margin: 0 0 -4px -8px; border-right-color: rgba(0,0,0,0.8);}		
.hint-right:after { left: 100%; bottom: 50%; margin: 0 0 -13px 4px;}
.hint-right:hover:before { margin: 0 0 -4px -0;}
.hint-right:hover:after { margin: 0 0 -13px 12px;}
/* nosytle */
.no-style,
.no-style li { margin: 0; padding: 0; list-style: none;}


.category-box { position: relative; margin-bottom: 15px; }
.category-box .cate-prev, .category-box .cate-next {
    background: #fff!important;
    text-align: center;
    line-height: 44px;
    position: absolute;
    top: 50%;
    width: 24px;
    height: 44px;
    margin-top: -22px;
    z-index: 10;
    cursor: pointer;
}
.category-box .cate-prev { left: 0; }
.category-box .cate-next { right: 0; }
.category-box .swiper-slide a { margin-bottom: 5px; padding: 5px; background: #fff; }

/* premium-purchaseb */
.premium-purchaseb-box{

}
.premium-purchaseb-box .btn{
	font-size: 14px;
    height: 34px;
}
.premium-purchaseb-box .meta-price{
	max-height: 45px;
    min-height: 45px;
}
.premium-purchaseb-box .btn-cart{
	margin-bottom: 0;
}
/*
@media (max-width: 768px) { 
  .premium-purchaseb-box .purchase-item{
	width: 100%;
}
*/
@media only screen and (min-width: 991px) and (max-width: 1199px) {
	.nav > li > a { padding: 10px; font-size: 15px;}
	.nav.nojs a.menu-news, .nav a.menu-news { margin: 4px 10px 4px 0 !important;}
	
	.box-coupon .coupon-form .form-control { width: 100%;}
	.box-coupon .coupon-form .btn-cart { margin: 0;}

	.order-step-box .order-steps { width: 140px;}
	.order-step-box .order-steps.step-1 { background-position: -25px 0;}
	.order-step-box .order-steps.step-2 { background-position: -215px 0;}
	.order-step-box .order-steps.step-3 { background-position: -405px 0;}
	.order-step-box .order-steps.step-4 { background-position: -595px 0;}
	.order-step-box .now .order-steps.step-1 { background-position: -25px -43px;}
	.order-step-box .now .order-steps.step-2 { background-position: -215px -43px;}
	.order-step-box .now .order-steps.step-3 { background-position: -405px -43px;}
	.order-step-box .now .order-steps.step-4 { background-position: -595px -43px;}

}

/* TABLET CSS*/
@media only screen and (min-width: 768px) and (max-width: 990px) {
	.custom-topic [class*="col-"]:nth-child(3),
	.custom-topic [class^="col-"]:nth-child(3) { clear: both;}
	.service-wrap .pull-left,
	.service-wrap .pull-right { padding: 0; width: 100%; float: none !important;}
	.service-wrap .pull-left { margin-bottom: 10px;}

	/* Product List */
	.meta-normal { display: none;}
	.meta-price,
	.meta-light { display: block;}

	.hotsales-box .list-item .list-image,
	.hotsales-box .list-item .list-content,
	.hotsales-box .list-item .list-price { float: none; width: 100%;}

	/* Product Detail */
	.detail-left,
	.detail-right { float: none; width: 100%;}

	/* Cart*/
	.cart-prod-item { display: block;}
	.cart-prod-item .list-image, .cart-prod-item .list-info { display: block; width: 100%;}
	.cart-prod-item .list-info { padding: 10px 0 0; text-align: left;}
	.cart-prod-item .list-info .meta-name { margin-right: 0;}
	.cart-prod-item .list-info .meta-desc li { padding: 0; color: #999}
	.cart-prod-item .list-info .meta-desc li span { position: static; display: block; color: #ccc;}

	.form-btn-groups [class*="col-"],
	.form-btn-groups [class^="col-"] { padding-left: 0; padding-right: 0;}
	.form-btn-groups [class*="col-"] .btn,
	.form-btn-groups [class^="col-"] .btn { text-align: center;}
	.form-btn-groups [class*="col-"] .btn-light,
	.form-btn-groups [class^="col-"] .btn-light { margin-bottom: 10px; height: 50px; line-height: 30px;}

	.box-coupon .coupon-form .form-control { margin-bottom: 10px; width: 100%;}

	/* v-cart tablet*/
	input.cart-form-input{display: inline; width: 170px;}

	/* Order */
	.order-step-box { border-left: none;}
	.order-step-box .order-steps { width: 140px;}
	.order-step-box .order-steps.step-1 { background-position: -25px 0;}
	.order-step-box .order-steps.step-2 { background-position: -215px 0;}
	.order-step-box .order-steps.step-3 { background-position: -405px 0;}
	.order-step-box .order-steps.step-4 { background-position: -595px 0;}
	.order-step-box .now .order-steps.step-1 { background-position: -25px -43px;}
	.order-step-box .now .order-steps.step-2 { background-position: -215px -43px;}
	.order-step-box .now .order-steps.step-3 { background-position: -405px -43px;}
	.order-step-box .now .order-steps.step-4 { background-position: -595px -43px;}
}


@media screen and (min-width: 970px) and (max-width: 1099px) {
	/* Header */
	.header.fixed-header .fixed-header-search { position: absolute; left: 47%; top: 3px; right: 0; transform:  translate(-60%,0); width: 33.2%;  padding:0 60px;}
     .search-form button.fixed-header-search-uni{width:100%; border-radius: 0 2px 2px 0; color: #fff; font-size: 15px; font-weight: 600;
	background: -moz-linear-gradient(180deg, #FF4D4D 0%, #D93600 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FF4D4D), color-stop(100%,#D93600));
	background: -webkit-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -o-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -ms-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);}
	
}


@media screen and (min-width: 1100px) and (max-width: 1499px)  {
	/* Header */
	.header.fixed-header .fixed-header-search { position: absolute; left: 50%; top: 3px; right: 0; transform:  translate(-60%,0); width: 33.333333%; padding:0 60px;}
	.search-form button.fixed-header-search-uni{width:100%; border-radius: 0 2px 2px 0; color: #fff; font-size: 15px; font-weight: 600;
	background: -moz-linear-gradient(180deg, #FF4D4D 0%, #D93600 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FF4D4D), color-stop(100%,#D93600));
	background: -webkit-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -o-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -ms-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);	}
}

@media screen and (min-width: 1500px) and (max-width: 1799px) {
	/* Header */
	.header.fixed-header .fixed-header-search { position: absolute; left: 44.5%; top: 3px; right: 0; transform:  translate(-60%,0); width: 25.333333%; padding:0 60px;}
    .search-form button.fixed-header-search-uni{width:100%; border-radius: 0 2px 2px 0; color: #fff; font-size: 15px; font-weight: 600;
	background: -moz-linear-gradient(180deg, #FF4D4D 0%, #D93600 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FF4D4D), color-stop(100%,#D93600));
	background: -webkit-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -o-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -ms-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);	}
}

@media screen and (min-width: 1800px) {
	/* Header */
	.header.fixed-header .fixed-header-search { position: absolute; left: 47.2%; top: 3px; right: 0; transform:  translate(-60%,0); width: 25.333333%;  padding:0 60px;}
	.search-form button.fixed-header-search-uni{width:100%; border-radius: 0 2px 2px 0; color: #fff; font-size: 15px; font-weight: 600;
	background: -moz-linear-gradient(180deg, #FF4D4D 0%, #D93600 100%);
	background: -webkit-gradient(180deg, left top, left bottom, color-stop(0%,#FF4D4D), color-stop(100%,#D93600));
	background: -webkit-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -o-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: -ms-linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);
	background: linear-gradient(180deg, #FF4D4D 0%,#D93600 100%);	}
}

.checkoutType-box { display: flex; gap: 20px;}
.checkoutType-box .prod-purchase  { padding: 30px;}
.checkoutType-box .prod-purchase center { margin-bottom: 20px;}
.checkoutType-box .prod-purchase .btn.btn-cart,
.checkoutType-box .prod-purchase .btn.btn-checkout { margin: 0; padding: 10px 30px !important; height: unset; font-size: 18px; line-height: 1.3333333; border-radius: 3px;}