@charset "utf-8";
body{width:100%; height:100%; margin:0; padding:0; font-family:"微軟正黑體"; font-size:14px; line-height:1.8em;}
html{width:100%; height:100%; min-width:310px;}
.warpper{max-width:640px; margin:0 auto;}
.clearfix:after{content:"."; display:block; height:0; clear:both; visibility:hidden;}/* Hides from Ie-mac \*/
* html .clearfix{height:1%;}/* end hide from Ie-mac */
a{text-decoration:none;}
.slicknav_menu{display:block;}
img{border:0; width:100%;}
header{padding-top:0px;}
.head-tool{float:none; width:310px; position:static; margin:0 auto;}
.home{display:none;}
.home_w{display:block; width:30px; height:auto;}
.m-banner{width:100%; overflow:hidden; position:relative; z-index:1000;}
.m-banner img{position:absolute; top:-50%;}
.banner img{width:100%;}
.oproject{display:inline; color:#900;}

.l-o{ display:none;}
.l-o-m{ display:block;width:173px; margin:15px 0 0 0; }

.l-o-m .language-m{float: inherit; width: inherit;}
.l-o-m .language-m .list{ background:#efefef; border:1px #c7c7c7 solid;border-radius:3px; width:173px; line-height:32px; height:32px; font-family:微軟正黑體; font-size:15px; color:#414141; padding:0 10px;}

.slicknav_nav .l-o-m .outside-m{ display:block; padding:5px 0 0 0; float: inherit;width: inherit; margin:0; }
.slicknav_nav .l-o-m .outside-m ul{ list-style:none; padding:0; margin:0; text-align:right;border-top: none;}
.slicknav_nav .l-o-m .outside-m ul li{ display: inline-block; padding:0; margin:6px .3%;}
.outside-m a.outside001{ background:url(../images/fb-icon.png) no-repeat; width:32px; height:32px;-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;}
.outside-m a.outside001:hover{border-radius:20px; -webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;}
.outside-m a.outside002{ background:url(../images/pchome.png) no-repeat; width:135px; height:32px;-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;}
.outside-m a.outside002:hover{border-radius:20px;-webkit-transition:all 0.3s ease; -moz-transition:all 0.3s ease; -ms-transition:all 0.3s ease; -o-transition:all 0.3s ease; transition:all 0.3s ease;}


@media screen and (max-width:400px){
.head-main .logo{position:absolute; width:220px; height:30px; left:10px; top:17px; background:url(../images/logo-m.png) no-repeat; background-size:100%;}
.head-main .logo a{display: block;  width:220px; height:30px;}
.head-main .logo img{width:220px; height:auto;}

}


/** banner **/

.vision .vision-images{ background:url(../images/banner-img.png) no-repeat top center;min-height:280px; margin:-160px 0 0 0; background-size:160%;}
@media screen and (max-width:550px){
	.vision .vision-images{ background:url(../images/banner-img.png) no-repeat top center;min-height:270px; margin:-160px 0 0 0; background-size:180%;}
}
@media screen and (max-width:500px){
	.vision .vision-images{ background:url(../images/banner-img.png) no-repeat top center;min-height:250px; margin:-160px 0 0 0; background-size:180%;}
}
@media screen and (max-width:450px){
	.vision .v-title{width: 2em;left:49%;}
.kv_title {
    display: block;
    z-index: 1;
    position: absolute;
    opacity: 1;
    top: 60px;
}
	.vision .vision-bg{ background:url(../images/banner.jpg) no-repeat top center;min-height:450px;background-size:350%;}

	.vision .vision-images{ background:url(../images/banner-img.png) no-repeat top center;min-height:220px; margin:-260px 0 0 0; background-size:180%;}
}
@media screen and (max-width:400px){
		.vision .v-title{width: 2em;left:49%;}
.kv_title {
    display: block;
    z-index: 1;
    position: absolute;
    opacity: 1;
    top: 60px;
}
	.vision .vision-images{ background:url(../images/banner-img.png) no-repeat top center;min-height:200px; margin:-260px 0 0 0; background-size:180%;}
}
@media screen and (max-width:365px){
		.vision .vision-bg{ background:url(../images/banner.jpg) no-repeat top center;min-height:450px;background-size:400%;}

	.vision .vision-images{ background:url(../images/banner-img.png) no-repeat top center;min-height:180px; margin:-260px 0 0 0; background-size:180%;}
}
@media screen and (max-width:550px){
.banner{ background: url(../images/edm_bg.jpg) center center; float:right;width:100%; margin:0 0 25px 0; overflow:hidden; position:relative;border:5px #ffffff solid;border-radius:20px; padding:20px 0px 12% 0px;}
}


/** 首頁產品 **/
.run ul li { display: inline-table; width:48%; margin:1%; padding:0;}
.run-photo a{display:table-cell; height:197px; vertical-align:middle; text-align:center;}

@media screen and (max-width:450px){
.run ul li { display: inline-table; width:98%; margin:1%; padding:0;}
.run-photo a{display:table-cell; height:197px; vertical-align:middle; text-align:center;}
}


/** 關於 **/
.about-information .information-left{ float:left; width:98%; margin:1%;}
.about-information .information-right{ float:right; width:98%;margin:1%;}
.about ul li .about-left01{ float:left; width:98%; margin:1%;}
.about ul li .about-right01{ float:right; width:98%; margin:1%;}
.about ul li .about-left02{ float:left; width:98%; margin:1%;}
.about ul li .about-right02{ float:right; width:98%; margin:1%;}
.about ul li{ padding:10px 0; margin:15px 0; border-bottom:1px #ddd dashed;}

.certification-photo{ width:100%; position:relative; table-layout:fixed; height:360px; vertical-align:middle; text-align:center; display:flex;align-items:center;justify-content:center;/* border:2px #aaa dashed; */ padding:5px;}
@media screen and (max-width:500px){
.about-certification ul li{ padding:0; margin:1%; float:left; width:98%; }

.certification-photo{ width:100%; position:relative; table-layout:fixed; height: auto; vertical-align:middle; text-align:center; display:flex;align-items:center;justify-content:center; /* border:2px #aaa dashed; */padding:5px;}
}


/** 大紀事 **/
.chronicle-list>li .date{ text-align:center; color:#3d8008; font-size:20px; font-weight:bold;float:left; width:100%; margin:0 15px 0 0; text-align:left; padding:10px 0;}
.chronicle-list>li .chronicle-lis-cont{ float:left;width:100%;}


/** 山葵 **/
.wasabi .wasabi-left-001{ float:left; width:90px; margin:0 15px 0 0;}
.wasabi .wasabi-right-001{float:right; width: calc(100% - 105px);}
.wasabi .wasabi-left-002{ float:left; width:140px; margin:0 15px 0 0;}
.wasabi .wasabi-right-002{float:right; width: calc(100% - 155px);}
.wasabi .wasabi-left-003{ float:left; width:230px; margin:0 15px 0 0;}
.wasabi .wasabi-right-003{float:right; width: calc(100% - 245px);}
.wasabi .wasabi-left-005{ float:left; width:120px; margin:0 15px 0 0;}
.wasabi .wasabi-right-005{float:right; width: calc(100% - 135px);}

.wasabi .wasabi-left-006{ float:left; width:100%; margin:0 0 20px 0;}
.wasabi .wasabi-right-006{float:right; width:100%; margin:10px 0 0px 0;}
.wasabi .wasabi-left-006 .left006-01{ float:left; width:140px; margin:0 15px 0 0;}
.wasabi .wasabi-left-006 .right006-01{float:right; width: calc(100% - 155px);}
.wasabi .wasabi-right-006 .left006-02{ float:left; width:140px; margin:0 15px 0 0;}
.wasabi .wasabi-right-006 .right006-02{float:right; width: calc(100% - 155px);}
.wasabi .wasabi-block007 ol li .wasabi-block007-contect .left007-01{ float:left; width:200px;margin:0 15px 0 0;}
.wasabi .wasabi-block007 ol li .wasabi-block007-contect .right007-01{ float:right; width: calc(100% - 215px);}
.wasabi .wasabi-block007 ol li .wasabi-block007-contect .left007-02{ float:right; width:230px;margin:0 0 0 15px ;}
.wasabi .wasabi-block007 ol li .wasabi-block007-contect .right007-02{ float:left; width: calc(100% - 245px);}


@media screen and (max-width:550px){
.wasabi .wasabi-left-001{ float:left; width:20%; margin:5px 40% 20px 40%;}
.wasabi .wasabi-right-001{float:right; width:100%;}
.wasabi .wasabi-left-002{ float:left; width:40%; margin:5px 30% 20px 30%;}
.wasabi .wasabi-right-002{float:right; width:100%;}
.wasabi .wasabi-left-003{ float:left; width:80%;margin:5px 10% 20px 10%;}
.wasabi .wasabi-right-003{float:right; width:100%;}
.wasabi .wasabi-left-005{ float:left; width:40%; margin:5px 30% 20px 30%;}
.wasabi .wasabi-right-005{float:right; width:100%;}
.wasabi .wasabi-left-006 .left006-01{ float:left; width:60%; margin:5px 20% 20px 20%;}
.wasabi .wasabi-left-006 .right006-01{float:right; width:100%;}
.wasabi .wasabi-right-006 .left006-02{ float:left; width:60%;  margin:5px 20% 20px 20%;}
.wasabi .wasabi-right-006 .right006-02{float:right; width: 100%;}
.wasabi .wasabi-block007 ol li .wasabi-block007-contect .left007-01{ float:left; width: 80%; margin:5px 10% 20px 10%;}
.wasabi .wasabi-block007 ol li .wasabi-block007-contect .right007-01{ float:right; width: 100%;}
.wasabi .wasabi-block007 ol li .wasabi-block007-contect .left007-02{ float:right; width: 80%; margin:5px 10% 20px 10%;}
.wasabi .wasabi-block007 ol li .wasabi-block007-contect .right007-02{ float:left; width: 100%;}

}
@media screen and (max-width:400px){
.wasabi-title{ font-weight:bold; background:url(../images/wasabi-title.png) no-repeat left center; font-size:18px; color:#5d2912; padding:30px 0 20px 40px; margin:20px 0 5px 0;}
}


/** 芥末 **/
.mustard-left-001 img{ width:100%;}

.mustard .mustard-mid-001{float:left; width: calc(100% - 265px);}
.mustard .mustard-right-001{float:right; width:250px; margin:0 0 0 15px ; }

.mustard .mustard-left-002 img{ width:100%;}

.mustard .mustard-right-002{float:right; width:100%; }

.mustard .mustard-block003-left{ float:right; width:60%; margin:20px 20% 20px 20%;}
.mustard .mustard-block003-right{float:left; width: 100%;}
@media screen and (max-width:550px){
.mustard .mustard-left-001{ float:left; width:80%; margin:0 10% 20px 10%;}
.mustard .mustard-mid-001{float:left; width: 100%;}
.mustard .mustard-right-001{float:right; width:100%; margin:0; display:block;}
.mustard .mustard-left-002{ float:left; width: 80%; margin:0 10% 20px 10%;}
.mustard .mustard-right-002{float:right; width: 100%;}
.mustard .mustard-block003-left{ float:right; width:100%; margin:20px 0 20px 0;}

}

/** 辣跟 **/
.spicy-left-001 img{ width:100%;border-radius:50px; box-shadow: 1px 1px 3px #999;}

.spicy .spicy-right-001{float:right; width:100%;}
.spicy .spicy-left-002 img{ width:100%;}

.spicy .spicy-right-002{float:right; width:100%;}
.spicy .spicy-block004{display:block;font-size:15px; color:#333; line-height:1.8em; clear:both; padding:10px 0; margin:0 ;}
.spicy .spicy-block005-left{ float:right; width:70%; margin:0 15% 20px 15% ;}
.spicy .spicy-block005-right{float:left; width:100%;}
@media screen and (max-width:550px){
.spicy .spicy-left-001{ float:left; width:70%; margin:0 15% 20px 15%;}
.spicy .spicy-right-001{float:right;  width:100%;}
.spicy .spicy-right-002{float:right; width:100%;}

}

/** 製作流程 **/
.story-title{ display: block; font-size:26px; color:#8d9926; font-weight:bold; padding:5px 0; margin:5px 0;}
.story-title{ font-size:24px; color:#7b8c20; font-weight:bold; font-family:微軟正黑體, 'Play', sans-serif; margin:10px 0; line-height:1.8em; position:relative;clear:both;}
.story-title:before{ display:block;  content:""; height:2px; background:#7b8c20; margin: 0; width:40px; position:absolute; bottom:-5px; left:0;}
.story-title:after{ display:block;background:url(../images/brand-title_bg.png) no-repeat 100px center; content:""; height:29px; margin:-35px 0 0 0;}

.story-contect{ line-height:1.8em; font-size:15px; color:#333; padding:20px 0 0 0; height: auto;overflow-x:inherit;overflow-y:inherit; margin:10px 0;}
.story_bg001{ background: none; height:auto;}
.story_bg002{ background: none; margin:0px 0 0 0; }
.story_bg003{background: none; margin:0px 0 0 0; }
.production-contect{ padding:20px 0 0 0; margin:10px 0;}
.test-contect{ padding:20px 0 0 0; margin:10px 0;}

/* news-list  最新消息 */
.news-list li span{ text-align:center; color:#fff; font-size:14px; padding:5px 10px ; float:right; width:100%; margin:5px 0 15px 15px; background:#e51b29;border-radius:5px; }
.news-list li .news-lis-cont{ float:left;width:100%; background:url(../images/news-icon.png) no-repeat 4px 7px; padding:0 0 0 25px;}

/* 訂單列表 */
.order-search{padding-left:0px;}
ul.order-list li.th{display:none;}
.order-list{padding-left:0px;}
.order-list-img, .order-list-img02{float:left; width:100%; font-size:15px; text-align:center;}
.order-list-img{height:auto;}
.order-list-img img.pro-photo{width:86%; max-width:180px; height:auto; padding:2%; border:1px #ccc solid; margin:5%; text-align:center;}
.order-list .order-list-td{font-size:15px; color:#333; text-align:left; padding:10px 15px; line-height:2em;}
.order-list-name{float:; width:100%; padding-top:0PX; font-size:15px; text-align:center;}
.order-list-price{float:left; width:100%; padding-top:0PX; font-size:15px; text-align:center;}
.order-list-quantity, .order-list-quantity02{float:left; width:100%; padding-top:0PX; font-size:15px; text-align:center;}
.order-list-subtotal, .order-list-subtotal02{float:left; width:100%; padding-top:0PX; font-size:15px; text-align:center;}
.order-list-del{float:left; width:100%; padding:20PX 0; font-size:15px; text-align:center;}
.order-list-del a{padding:5px 10%;}
.order-list .portal{width:100%; text-align:center;}
.order-list .freight{width:100%; text-align:center;}
.order-list .oproject{font-size:15px; color:#fff; background:#333; display:inline; padding:5px; margin:10px 10px 10px 0;border-radius:5px;}
.order-ditaile-info{padding:0;}

/* 購物車 */
ul.shopping-car-list li.th{display:none;}
.shopping-car{padding-left:0;}
.shop-car-img{width:100%; height:auto; text-align:center; border-bottom:1px #d3d3d3 dotted; margin-bottom:10px; display:block;}
.shop-car-img img.pro-photo{width:86%; max-width:180px; height:auto; padding:10px; border:1px solid #ccc; margin:10px; text-align:center;}
.shop-car-name{float:none; display:block; width:100%; padding-top:0PX; font-size:15px; text-align:center;}
.shop-car-price{width:100%; padding-top:0PX; font-size:15px; text-align:center;}
.shop-car-quantity{width:100%; padding-top:0PX; font-size:15px; text-align:center;}
.shop-car-subtotal{width:100%; padding-top:0PX; font-size:15px; text-align:center;}
.shop-car-del{width:100%; padding:20PX 0; font-size:15px; text-align:center;}
.shop-car-del a{padding:5px 10%;}
.shopping-car .portal{width:100%; text-align:center;}
.shopping-car .freight{width:100%; text-align:center;}
.shopping-car .oproject{font-size:15px; color:#000; display:inline;}
.checkout-box{background:#f4f3f0; padding:10px; margin-left:0px; border-bottom:2px dotted #fff;}

/* 產品專區 */
.pro-store-info{padding:10px 0 10px 0px;}
.pro-list ul li{width:48%; padding:1%;margin:30px 1%;}
.pro-photo a{display:table-cell; height:192px; vertical-align:middle; text-align:center;}

.pro-detaile{padding-left:0px;}

.pro-qr-code{text-align:center; padding-bottom:20px;}
.pro-qr-code img{width:200px; height:auto;}
.cart-info .price{font-size:28px; text-align:center; display:block; padding:10px 0 20px;}
.cart-info .quantity{text-align:center;}
.cart-info .check-out{text-align:center; clear:both; display:block;}
.cart-info .check-out a{font-size:15px; width:100%; padding:10px 0px; margin-left:0px; display:block;}

@media screen and (max-width:500px){
.pro-list ul li{width:98%; padding:1%;margin:20px 1%;}
.pro-photo a{display:table-cell; height:293px; vertical-align:middle; text-align:center;}

}
@media screen and (max-width:450px){
.pro-photo a{display:table-cell; height:258px; vertical-align:middle; text-align:center;}
}
@media screen and (max-width:400px){
.pro-photo a{display:table-cell; height:222px; vertical-align:middle; text-align:center;}
}
@media screen and (max-width:350px){
.pro-photo a{display:table-cell; height:186px; vertical-align:middle; text-align:center;}
}


/* 聯絡我們 */
.contact-body{padding:0;}
.contact-left{max-height:200px; overflow:hidden; -webkit-border-radius:10px; -moz-border-radius:10px; border-radius:10px;}
.contact-left img{width:100%; height:auto; margin-top:10px;}
a.btn-send{padding:5px 0; width:49%; margin:5px 1% 0 0; display:block; float:left;}
a.btn-reset{padding:5px 0; width:49%; margin:5px 0 0 1%; display:block; float:left;}
a.btn-send-over{padding:3px 0px; color:#fff; width:100%; display:block; float:left; margin-top:5px;}

/* 內頁架構 */
.page-main{padding:0;}
.left-menu-title{font-size:15px; border-top:1px dotted #999;}
.page-main03{ margin:0; padding:0;font-size:15px; color:#333; line-height:1.8em;}

/* 首頁產品 */
.index-pro ul li{width:98%; padding:1%; text-align:center; float:left;}

/* 首頁連結 */
.index-link ul li{float:left; width:50%; margin:0; padding:0; border:0;}

/** 首頁最新消息 **/
@media screen and (max-width:420px){
.i-news ul li{ float:left; width:98%;margin:5.5px 1%; padding:0; text-align:center;}
.i-news-photo a{display:table-cell; max-height:207px; vertical-align:middle; text-align:center; padding:3px;}

}

/* 會員登入 */
h3.login-title{margin:10px 0 10px 0; font-family:"Times New Roman"; font-size:30px; line-height:30px; color:#9B9B9B; text-align:center;}
.login-tool{text-align:center;}
.icon-tool{width:40px; height:auto; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.member-signup{font-size:14px; color:#828282; line-height:20px; padding:5px 0; text-align:center;}

/* 版面欄位 */
.main{padding:0px;}
.col-m{width:100%; margin-right:0%; float:none;}
.col-015, .col-020, .col-025, .col-030, .col-035, .col-040, .col-045, .col-050, .col-055, .col-060, .col-065, .col-070, .col-075, .col-080, .col-085{width:100%; margin-right:0%;}
.cor-015, .cor-020, .cor-025, .cor-030, .cor-035, .cor-040, .cor-045, .cor-050, .cor-055, .cor-060, .cor-065, .cor-070, .cor-075, .cor-080, .cor-085{width:100%;}

/* 訂位區塊 */
.info-box{font-size:14px; color:#7e7e7e; line-height:20px;}

/*** 定位-選項-時段 ***/
.order-opinion{width:100%; margin-right:0; float:none;}
.time{width:100%; float:none;}
.time ul li{margin:1% 1% 0 0; width:24%;}

/* 表單欄位 */
.form-box{min-width:280px;}
.form-style01{font-size:14px; font-family:"微軟正黑體"; color:#4e4e4e; padding:5px 3%; line-height:20px; width:93%;}
.input-main-style02{background:#eee; float:left; width:100%; border:1px solid #cbcbcb; margin:0; padding:8px 3%; font-size:14px; font-family:"微軟正黑體"; color:#4e4e4e; line-height:2em; clear:both;}
.opinion{margin-bottom:20px;}
.opinion-left01{background:#fff; float:left; width:100%; border: none; border-right:0; padding:5px ; font-size:16px; font-family:"微軟正黑體"; color:#333; line-height:1.8em; font-weight:bold; }
.opinion-left02{ display:block;background:#fff; float:left; width:100%; border: none; border-right:0; padding:5px ; font-size:16px; font-family:"微軟正黑體"; color:#333; line-height:1.8em; font-weight:bold; }

.opinion-right01{float:left; width:7.5%; padding:0 2%;}
.input-main-style01{float:left; width:81%; margin:0; padding:5px 3%; -webkit-border-radius:5px 0 0 5px; -moz-border-radius:5px 0 0 5px; border-radius:5px 0 0 5px;}
.select-style{font-size:15px; width:96%; line-height:20px; padding:5px 2%; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px;}
.input-style01, .input-main-style02, .input-main-style03{float:none; width:100%;}
.checkout-box h3{margin-right:0;}

/* 頁次 */	
.page{height:100px;}
.page br{display:block;}
.page a{background:#333; color:#fff; padding:2px 10px; -webkit-border-radius:5px; -moz-border-radius:5px; border-radius:5px; margin:10px 0;}

/* 底部資訊 */
.icon005{ width:98%;}
.icon006{ width:98%;}

@media screen and (max-width:400px){
footer{background:#000000; height:66px;}
footer .footer{max-width:1200px; margin:0 auto; padding:8px 0;}
.bottom-info-main .f-logo{ background:url(../images/f-logo.png) no-repeat ; background-size:100%; display:block; width:300px; height:40px; float: inherit; margin:0 auto 25px auto;}
footer .footer .copyright{ float: inherit; width:98%; color:#989898; font-size:12px; margin:0 1% ; text-align:center;}
footer .footer .wd{ color:#bc3737; font-size:13px; float: inherit; width:98%;margin:0 1% ; text-align:center;}
footer .footer .wd a{ color:#bc3737; }
footer .footer .wd a:hover{ text-decoration:underline; }
}