@charset "UTF-8";

/*購物車頁籤用*/
.shop-cart-tab {
    position: relative;
}
.shop-cart-tab ul.tabs {
    border-bottom: 2px solid #1f8dc9;
    margin: 16px 0;
}

.shop-cart-tab ul.tabs li {
    font-size: 1.125em;
    min-width: 125px;
    text-align: center;
    float: left;
}

.shop-cart-tab ul.tabs a {
    display: block;
    padding: 8px 16px;
    background: #efefef;
    border-top: 4px solid #efefef;
    margin-right: 1px;
    cursor: pointer;
	color: #000;
	font-weight: bold;
}

.shop-cart-tab ul.tabs .active a,
.shop-cart-tab ul.tabs a:hover {
    border-top: 4px solid #1f8dc9;
    border-left: 1px solid #ccc;
    border-right: 1px solid #ccc;
    border-bottom: 2px solid #8ccbed;
    background: #8ccbed;
    position: relative;
    bottom: -2px;
    color: #0d3152;
    font-weight: bold;
}

/*============================*/
.shop-main a.links, .links {
	color: #006ba8;
}
/*表單用*/
.shop-main select.form-control {
	background-image: linear-gradient(60deg, transparent 50%, #D4007B 50%),
	 linear-gradient(120deg, #D4007B 50%, transparent 50%),
	  linear-gradient(to right, #fff, #fff);
}

/*-----------------------------------按鈕--------------------------------*/

/*綠底樣式*/  
.shop-main a.btn-basic, .shop-main .btn-basic { 
    background: #006ba8;
	color: #fff
}
.shop-main a.btn-basic:hover, .shop-main .btn-basic:hover, .shop-main .btn-basic:active, .shop-main a.btn-basic:active {
    background: #00456d;
}

/*線框樣式*/ 
.shop-main .btn-line, .shop-main a.btn-line {  
    border: 1px solid #006ba8;
    color: #006ba8;
    background: transparent;
}

.shop-main .btn-line:hover, .shop-main a.btn-line:hover {
    background: #006ba8;
    color: #fff;
}

.shop-main .btn.btn-linear.icon-fa:before, .shop-main .btn.btn-linear.icon-fa:after {
    color: #D4007B;
}

/*------------------------大圖輪播----------------------------*/

.carousel-shop_wrap .carousel-inner {
    height: 350px;
}

.carousel-shop_wrap .carousel-inner .item {
	box-shadow: 0px -2px 3px rgba(0,0,0,0.3) inset;
}

.carousel-shop_wrap .carousel-inner>.item>a>img,
.carousel-shop_wrap .carousel-inner>.item>img {
    width: 100%;
}

.carousel-control {
    width: 5%;
}


.chevron-left:before {
    content: "\f104";
    left:15px;
}

.chevron-right:before {
    content: "\f105";
    right:15px;
}
.chevron-right:before, .chevron-left:before {
    font-family: FontAwesome;
    font-size: 3em;
	position: absolute;
	top:50%;
	margin-top: -40px;
}
.carousel-caption {
    width: 1170px;
	height: 50px;
	overflow: hidden;
    padding: 0 15px;
    background: #256fa0;
    color: #fff;
    text-align: left;
    right: inherit;
    top: 300px;
    z-index: 5;
    left: 50%;
    margin-left:-585px;
}
.carousel-caption .title-main {
    font-size: 1.375em;
    line-height: 50px;
    margin: 0;
    text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
	display: inline-block;
}
.carousel-caption .carousel-title .title-label {
    font-size: 1.375em;
    display: inline-block;
}

.carousel-caption a.more {
    font-size: 0.7em;
    color: #256fa0;
    text-decoration: underline;
    margin-left: 8px;
}

.carousel-text {
    font-size: 1em;
    margin-left: 8px;
}

.carousel-indicators li {
    background-color: rgba(34, 34, 34, 0.6);
    border: none
}

.carousel-indicators .active {
    background-color: #256fa0;
}

.carousel-indicators {
    bottom: -30px;
}

.carousel-shop_wrap {
	/*background: #ccc;*/
}

/*搜尋欄位*/
.shop-search-wrap {
	background: rgb(254,254,254); /* Old browsers */
	background: -webkit-linear-gradient(rgba(254,254,254,1) 74%, rgba(228,228,228,1) 100%);
	background: -o-linear-gradient(rgba(254,254,254,1) 74%, rgba(228,228,228,1) 100%);
	background: linear-gradient(rgba(254,254,254,1) 74%, rgba(228,228,228,1) 100%); /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fefefe', endColorstr='#e4e4e4',GradientType=0 ); /* IE6-9 */
	/*border-top: 1px solid #ccc;*/
	border-bottom: 1px solid #ccc;
	padding: 15px 0;
	margin-top: 0;
}
.shop-search-wrap .container {
	position: relative;
}

.shop-search-wrap-index {
	margin-top: 35px;
}
.search-bar .input-wrapper {

}
.search-bar .input-wrapper input {
	width: calc(100% - 2.2em);
}

select.sel-shop {
    cursor: pointer;
    background-image: linear-gradient(60deg, transparent 50%, #D4007B 50%), linear-gradient(120deg, #D4007B 50%, transparent 50%), linear-gradient(to right, #fff, #fff);
    background-position: calc(100% - 15px) calc(1.5em - 12px), calc(100% - 5px) calc(1.5em - 12px), 100% 0;
    background-size: 10px 15px, 10px 15px, 1.5em 1.5em;
    background-repeat: no-repeat;
    font-size: 1em;
	padding-right: 28px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
select.sel-shop::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

.shop-form-item {
    background: #fff;
    padding: 8px;
    border: 1px solid #b1b1b1;
    max-height: 42px;
    position: relative;
	float: left;
	margin-right: 5px;
}

.shop-form-item input{
    padding: 0;
	margin: 0;
	line-height: 26px;
	height: 26px;
    max-height: 26px;
	border: 0;
	outline: none;
}

.shop-form-item input.price{ width: 50px;}
.shop-form-item input.key{ width: 200px;}

.shop-form-gap{
	margin: 0 10px 0 5px;
	line-height: 42px;
	height: 42px;
    max-height: 42px;
	float: left;
}

.search-bar .input-wrapper,
.keywords-bar {
	display: inline-block;
}
.keywords-bar {
	margin-left: 15px;
}
.keywords-bar .head {
	margin-right: 5px;
}
.keywords-bar a {
	border: 1px solid #e43737;
	border-radius: 15px;
	color: #e43737;
	padding: 5px 10px;
	margin-right: 5px;
}
.keywords-bar a:hover {
	opacity:0.8;
}
.shop-search-wrap .btn-line-db{
	position: absolute;
	right: 0;
	top: 0;
}
.shop-search-wrap .icon-cart .amount {
	display: inline-block;
	width: 1.2em;
	height: 1.2em;
	font-size: 0.8em;
	line-height: 1.2em;
	background: #DE0042;
	border-radius: 50%;
	color: #fff;
	margin-left: 5px;
}
.shop-search-wrap .icon-cart:before {
	font-size: 1.2em;
}

.shop-search-wrap .icon-search:before {
	color: #D4007B;
    font-size: 1.625em;/*2018 added by Turtle */
    margin-top: -4px;/*2018 added by Turtle */
}

/*框線按鈕*/
.btn-line-db, a.btn-line-db {  
    border: 1px solid #006ba8;
    color: #006ba8;
    background: transparent;
}
.btn-line-db:hover, a.btn-line-db:hover {  
    border: 1px solid #006ba8;
    color: #fff;
    background: #006ba8;
}

/**----購物車訊息----**/

.shop-notice {
    background: #ededed;
	margin-left: -15px;
	margin-right:  -15px;
	margin-top: -15px;
	margin-bottom: 25px;
}

.shop-notice dt,
.shop-notice dd {
    float: left;
    display: block;
    line-height: 2;
    height: 2em;

    padding: 0 16px;
}

.shop-notice dt {
    background: #D4007B;
    color: #fff;
}

.shop-notice a {
    color: #0059C9;
    text-decoration: underline;
    margin-left: 16px;
}

/*左選單*/
.shopmenu-head {
	margin-top: -15px;
}
.shop-sidemenu>li {
	border-bottom: 1px solid #ccc;
	font-size: 1.125em;
    position: relative;
    padding: 10px 0 10px 15px;
}
.shop-sidemenu>li:before {
    display: inline-block;
    content: " ";
    width:3px;
    height:1.125em;
    line-height: 1.125em;
	position: absolute;
    top: 15px;
    left: 0;
    background: #D4007B;
    border-radius: 3px;
    margin-right:10px;
}
.shop-submenu {
	font-size: 0.889em;
	margin-top: 10px;
	margin-left: -15px;
}
.shop-submenu dl {
	border-top: 1px solid #ccc;
	border-left: 1px solid #ccc;
	border-right: 1px solid #ccc;
}
.shop-submenu dl:nth-last-child(1) {
	border-bottom: 1px solid #ccc;
}
.shop-sidemenu a, .shop-submenu dt {
	position: relative;
	display: block;
}
.shop-submenu dt {
	padding: 10px 24px 10px 20px;
	cursor: pointer;
}
.shop-submenu a {
	padding: 10px 10px 10px 30px;
}
.shop-sidemenu li>a {
	padding: 0 20px 0 0;
}
.shop-sidemenu li>a:hover {
	color: #D4007B;
}
.shop-sidemenu .icon-fa:after {
	position: absolute;
	right: 10px;
	color: #D4007B;
	font-size: 1.12em;
	height: 1.12em;
	top: 0;
	bottom: 0;
	margin: auto;
}
.shop-submenu dt.active, .shop-submenu dt.active:hover {
	background: #256fa0;
	color: #fff;
}
.shop-submenu dt:hover {
	background: #eee;
}
.shop-submenu dt.active.icon-fa:after {
	color: #fff;
}
.shop-submenu dd a:hover {
	color: #D4007B;
}
.shop-submenu dd a.active {
	background: #D4007B;
	color: #fff;
	border-top: 1px solid #fff;
}

/*品牌故事*/

.shop-about{
	text-align:center;
}

.shop-about img{
	margin:2em auto;
}


/*商品列表*/
.shop-item li {
	margin-bottom: 30px;
}
.shop-title {
	padding-bottom: 5px;
	border-bottom: 2px solid #D4007B;
	margin-top: 0;
	margin-bottom: 25px;
	font-size: 1.25em;
}

.shop-item .pro-title {
	margin-top: 5px;
	height: 2.5em;
	overflow: hidden;
	line-height: 1.25;
	text-align: center;
}
.shop-item  .pro-img {
	position: relative;
	
}
.shop-item li a:focus img {
	 outline: 4px #FF0004 dotted !important;
}


.shop-item li a:hover .pro-title {
	color: #006ba8;
}
.shop-item .pro-amount {
	text-align: center;
}
.shop-item .pro-amount strong {
	color: #D4007B;
	font-size: 1.25em;
	margin-left: 5px;
}
/*在購物車中的商品列表*/
.cart-item {
	margin: 5px;
}
.cart-item .ml {
	margin-left: 35px;
	margin-top: 5px;
}
.cart-item .zone-ground .zone {
	margin-right: 8px;
}

/*頁碼*/
.shop-page .pagination > .active > span {
	color: #fff;
}
.shop-page .pagination > li > a {
    color: #D4007B;
}
.shop-page .pagination > .active > a, .shop-page .pagination > .active > span, .shop-page .pagination > .active > a:hover, .shop-page .pagination > .active > span:hover, .shop-page .pagination > .active > a:focus, .shop-page .pagination > .active > span:focus {
    background-color: #D4007B;
    border-color: #D4007B;
}
/*進階篩選*/
.item-filter {
	position: relative;
	margin-bottom: 15px;
	margin-top: -15px;
}
.item-filter .total {
	position: absolute;
	left: 0;
}
.item-filter .sorting {
	text-align: right;	
}
.item-filter .sorting .zone{
	float: none;
	display: inline-block;

}
.item-filter .sorting .form-control {
	width: inherit;
}
.item-filter .tra_searchbox {
	margin-top: 10px;
}

/*商品輪播*/
#slideshow {
    width: 450px;
    min-height: 338px;
    overflow:hidden;
    position: relative;
}
#slideshow li {
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 5;
    width: 100%;
}

.slideshow-box li img {
    width: 100%;
    max-width: inherit;
    height: auto;
}
#slideNav {
    margin-top:5px;
}
#slideNav li {
    float: left;
    width: 20%;
    padding: 5px 1%;
}

.slideshow-box .activeSlide {
    background: #D4007B;
}

/*商品單頁-上方資訊*/
.pro-detail dt, .pro-detail dd {
	float: left;
}
.pro-detail dt {
	margin-right: 20px;
	font-weight: normal;
	font-size: 0.938em;
	color: #000;
}
.pro-detail dl {
	margin-bottom: 10px;
}
.pro-main-title h1 {
	margin-top: 0;
}
.item-price .money, .item-add table .cost .money {
	/*text-decoration: line-through;*/
}
.item-sale .money {
	font-size: 1.2em;
	font-weight: 600;
	color: #a90000;
	line-height: 1;
}
.sale-note {
	font-size: 0.938em;
	margin-left: 10px;
}
.item-amount .stock {
	font-size: 0.938em;
	color: #ED0000;
}
.item-btn-buy {
	margin-top: 20px;
}
.item-btn-buy a.btn-3d, .item-btn-buy .btn-3d {
	margin-left: 50px;
	width: 300px;
}
.item-add {
	margin-top: 40px;
}
.item-add table{
	font-size: 0.938em;
	width: 100%;
}
.item-add table th{
	padding-bottom: 10px;
	color: #555;
}
.item-add table td {
	background: #eee;
	padding: 5px;
	border-top: 2px solid #fff;
}
.item-add table td.check-way {
	text-align: center;
}
.item-add table .cost {
	color: #444444;
}
.item-add table .sale .money {
	color: #c70000;
}
.item-add+.item-content {
	margin-top: 30px;
}

.item-spec li {/*規格*/
	display: inline-block;
	margin-right: 5px;
	font-size: 0.875em;
	overflow: hidden;
	border: 1px solid #eee;
}
.item-spec li a.active {
	border: 2px solid #D4007B;
	width:50px;
	height: 50px;
	display: block;
}
.item-spec li img{
	width: 100%;
	height: auto;
}
.item-gift a {
	color: #006ba8;
}
.item-gift a:hover {
	text-decoration: underline;
}
.item-gift li {/*贈品*/
	height: 50px;
	line-height: 50px;
	margin-bottom: 2px;
}
.item-gift .img {
	margin-right: 10px;
}
.item-gift dd img {
	width: auto;
	height: 100%;
}
/*下方內容*/
.item-content {
	margin-bottom: 15px;
}
.item-content+.item-content {
	margin-top: 40px;
}
.item-content-inner {
	margin: 5px 10px;
}
.item-content-inner .row {
	margin-bottom: 15px;
}
.item-content-inner .img-side {
	text-align: right;
}

.item-content-inner .offer-add li{
	margin-bottom: 20px;
}
/*最新消息*/
.mag-table a.shop-news-block {  
    width:560px;
}
.mag-table a.shop-news-block:hover {
	color: #D4007B;
}
/*常見問題--改色*/
.shop-main .faq-side .q-head .qus-text {
    color: #006ba8;
}
.shop-main .faq-side .q-head .qus-text:before {
    background: #D4007B;
}

.shop-main .faq-side .answer-icon:before {
    color: #D4007B;
}
.shop-main .faq-side .file-list dt a, .shop-main .filedownload a {
    color: #ff8400;
}
.shop-main .icon:before, .shop-main .icon-a:after {
    color: #D4007B;
}

/*訂單總金額*/
.cart-total {
	padding: 15px 20px;
	width: 100%;
	border: 1px solid #ccc;
	position: relative;
	margin-bottom: 15px;
}
.cart-total button {
	position: absolute;
	right: 20px;
	top: 15px;
}
.cart-total .money {
	font-weight: bold;
	font-size: 1.5em;
	color: #ff0000;
	margin: 0 10px;
}

/*鐵路便當左選單*/
.bentoshop-menu {
	margin-top: 10px;
}
.bentoshop-menu a{
	font-size: 0.889em;
	border: 1px solid #ccc;
	border-bottom: none;
	padding: 10px 15px;
	display: block;
	margin-left: -15px;
	font-weight: 600;
}
.bentoshop-menu a.active, .bentoshop-menu a.active:hover {
	background: #256fa0;
	color: #fff;
}
.bentoshop-menu a:hover {
	background: #eee;
}
.bentoshop-menu a:last-child {
	border-bottom: 1px solid #ccc;
}

.bentoshop-sild-btn {
	margin-top: 15px;
}
.bentoshop-sild-btn a {
	display: block;
	margin-bottom: 15px;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
}
.bentoshop-sild-btn .btn + .btn {
    margin-left: 0;
}

/*外送店鋪*/
.store-list {
	margin: 15px 3%;
}
.store-list dl{
	margin-bottom: 10px;
	border-bottom: 1px dotted #ccc;
	padding-bottom: 10px;
}
.store-list dt ,.store-list dd {
	display: inline-block;
	vertical-align: top;
}
.store-list dt {
	margin-right: 25px;
	text-align: right;
	width: 6em;
}
.store-list .sublist {
	margin: 5px 0;
}
.store-list .sublist .sublist-title, .store-list .sublist ol {
	display: inline-block;
	vertical-align: top;
}
.store-list .sublist .sublist-title {
	padding: 5px;
	border:1px solid #ccc;
}
.store-list .sublist ol {
	margin-left: 0.5em;
	padding-top: 6px;
}
.store-list .sublist ol li {
	margin-bottom: 5px;
}
/*購物車上方的基本資料*/
.cart-top-info {
	padding: 15px;
}

/*加退訂便當*/
.additem-box {
	margin: 15px;
}
.additem-box .check-img input[type=checkbox].box-check ~ label:before {
	position: absolute;
	left:5px;
	top: 5px;
	background: #fff;
	padding-left: 3px;
	border-radius: 5px;
	width: 32px;
	text-align: center;
}
.additem-box .check-img {
	background: #000;
}
.additem-box .check-img input[type=checkbox].box-check ~ label {
	opacity: 0.9;
}
.additem-box .check-img input[type=checkbox].box-check:checked ~ label {
	opacity: 1;
}
.additem-box .btn {
    min-width: 25%;
    margin-right: 10px;
}

/*---------------------------------------便當地圖--------------------------------------*/
.bentoshopMap {
	position: relative;
}
.twMap {
	width: 500px;
	height: 830px;
	background: url(https://tip-tr4cdn.cdn.hinet.net/tra-tip-web/static/images/taiwan-map-bentoshop.png) no-repeat;
	margin: 50px auto;
	position: relative;
}

.addSea{
	background-color: #d7f2fb;
}

.twMap .fullcircle {
	position: absolute;
}
.twMap .fullcircle:before {
	color: #D4007B;
}

/*臺北-點*/
.twMap .point1 {
	top: 60px;
	left: 360px;
}

/*基隆-點*/
.twMap .point2 {
	top: 45px;
	left: 403px;
}
/*板橋-點*/
.twMap .point2b {
	top: 77px;
    left: 345px;
}

/*臺中-點*/
.twMap .point3 {
	top: 270px;
	left: 160px;
}

/*花蓮-點*/
.twMap .point4 {
	top: 305px;
	left: 370px;
}

/*高雄-點*/
.twMap .point5 {
top: 626px;
    left: 79px;
}

/*高雄左營-點*/
.twMap .point5b {
    top: 587px;
    left: 92px;
}

/*台東-點*/
.twMap .point6 {
	top: 577px;
	left: 270px;
}

.bentoStore {
	position: absolute;
	padding: 0 15px;
	border: 1px solid #ccc;
	border-radius: 5px;
	box-shadow: 2px 2px 1px rgba(0,0,0,0.2);
	background: rgba(255,255,255,0.8);
	width: 260px;
	background: -moz-linear-gradient(top, rgba(243,243,243,0.8) 0%, rgba(255,255,255,0.8) 3%, rgba(255,255,255,0.8) 96%, rgba(237,237,237,0.8) 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, rgba(243,243,243,0.8) 0%,rgba(255,255,255,0.8) 3%,rgba(255,255,255,0.8) 96%,rgba(237,237,237,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, rgba(243,243,243,0.8) 0%,rgba(255,255,255,0.8) 3%,rgba(255,255,255,0.8) 96%,rgba(237,237,237,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ccf3f3f3', endColorstr='#ccededed',GradientType=0 ); /* IE6-9 */
}

/*臺北-資訊*/
.bentoStore.siteBox1 {
	top: 55px;
	right:0px;
}

/*基隆-資訊*/
.bentoStore.siteBox2 {
	top: 15px;
	left:50px;
}

/*板橋-資訊*/
.bentoStore.siteBox2b {
	top: 15px;
	left:50px;
}

/*台中-資訊*/
.bentoStore.siteBox3 {
	top: 230px;
	left: 30px;
}

/*花蓮-資訊*/
.bentoStore.siteBox4 {
	top: 300px;
	right:10px;
}

/*高雄-資訊*/
.bentoStore.siteBox5 {
	top: 629px;
	left: 10px;
}

/*高雄左營-資訊*/
.bentoStore.siteBox5b {
	top: 438px;
    left: 10px;
}


/*台東-資訊*/
.bentoStore.siteBox6 {
	top: 558px;
	right: 106px;
}

.bentoStore:before {
	content: " ";
	position: absolute;
	height: 1px;
	background: #D4007B;
}

/*台北-線*/
.bentoStore.siteBox1:before {
	width: 48px;
	top: 17px;
	left: -48px;
}
/*板橋-線*/
.bentoStore.siteBox2b:before {
width: 252px;
    top: 74px;
    right: -255px;
}
/*基隆-線*/
.bentoStore.siteBox2:before {
	width: 320px;
	top: 41px;
	right: -321px;
}

/*台中-線*/
.bentoStore.siteBox3:before {
	width: 100px;
	top: 50px;
	right: -101px;
}

/*花蓮-線*/
.bentoStore.siteBox4:before {
	width: 26px;
	top: 8px;
	left: -26px;
}

/*高雄-線*/
.bentoStore.siteBox5:before {
	width: 25px;
	top: 8px;
	right: -26px;
}

/*高雄左營-線*/
.bentoStore.siteBox5b:before {
width: 39px;
    top: 160px;
    right: -40px;
}

/*台東-線*/
.bentoStore.siteBox6:before {
	width: 30px;
	top: 30px;
	left: -30px;
}