@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/fangsong.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(all.css);
@import url(jquery.css);
@import url(jquery-ui.css);
@import url(fancybox.css);
@import url(slick.css);
@import url(slick-theme.css);
@font-face {font-family: '微軟正黑體修正'; unicode-range: U+7db0, U+78A7, U+7B75; font-style: normal; font-weight: bold; src: local(Yu Gothic), local(MS Gothic);}
@font-face {font-family: '微軟正黑體修正'; unicode-range: U+7db0, U+78A7, U+7B75; font-style: normal; font-weight: normal; src: local(微軟正黑體);}
html{font-size:15px; height: 100vh; overflow-x: hidden;}
html, body{margin:0; padding: 0; width:100vw;}
*, body, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, strong, button, span, .btn, select, select option{font-size:1rem; line-height:1.4; font-weight:normal; font-family:Arial, '微軟正黑體修正', '微軟正黑體', '微軟正黑體'; text-decoration:none; text-shadow:none; margin:0; padding:0; color:#333;}
a{text-decoration:none; font-weight:normal;}
a:hover{text-decoration:none; transition:All 0.2s ease;}
ul, ol, li{margin:0; padding:0;}
ul, ol{margin-left:1rem;}
[type=text], [type=password], textarea{width:100%; height:1.5rem; padding: 0.3rem 0.5rem; background-clip:padding-box;border:1px solid #ced4da; border-radius:.25rem;transition:border-color .15s ease-in-out,box-shadow .15s ease-in-out; margin-bottom: 1rem;}
[type=text]:focus, [type=password]:focus, textarea:focus{box-shadow: 0 0 6px #0C7FCC;}
textarea{resize:none; height: 8rem;}
.forms{max-width:500px;}
form strong{width:8rem; display: inline-block;vertical-align: top; text-align: justify;}
.hasTitle{max-width:calc(100% - 10rem);}
#captcha img{height: 2rem;}
.captcha{max-width:5rem; position: relative; top:-8px;}
img{max-width:100%; height:auto;}
hr{border:none; border-bottom:1px #E5E9EF solid; margin-bottom:15px;}
h1, h1 *, h2, h2 *, h3, h3 *, h4, h4 *, h5, h5 *, h6, h6 *, strong, strong *{font-weight:bold;}
h1, h1 *{font-size:2.18rem;}
h2, h2 *{font-size:1.36rem;}
h3, h3 *{font-size:1.26rem;}
h4, h4 *{font-size:1.16rem;}
h5, h5 *{font-size:1rem;}
table, .table, .table1, .tableDietitian{border-collapse:collapse;}
section{width:98vw; max-width:1200px; margin:0 auto; position:relative;}
section:after{content: ''; display: block; clear: both;}
select{background: #fff; border:none; font-size: 0.8rem; border-radius: 2px; padding: 2px 5px;}
select option{font-size: 0.6rem; border-radius: 2px;}
.sabrosus{text-align:center;}
.sabrosus a, .sabrosus a:visited{padding:5px; min-width:20px; margin:20px 0; color:#005580; display:inline-block;}
.sabrosus a .fa{color:#005580;}
.sabrosus a.current, .sabrosus a:hover, .sabrosus a:hover .fa{background:#005580; color:#fff;}
.bh{clear:both; text-align:right; margin:20px 20px 20px 0;}
.bh a{padding:3px 8px; line-height:30px; font-size:12px; color:#000;}
.medias{margin-bottom: 2rem;}
.medias iframe{width:100%; max-width: 680px; height: 383px;}
.btn{background: #870000; color:#fff; font-weight: bold; margin:1rem 0; padding: 5px 10px; border:1px #870000 solid;}
.btn:hover{background: #fff; color:#870000;}
#showNav{display: none; font-size: 1.4rem; color:#fff; position: absolute; z-index: 910; right: 0; top:1.1rem;}
#showNav.fa-times{left:auto; right:1rem; top:0rem; color:#870000;}
header{padding: 2rem 0 1rem 0; background: #870000;}
header .tools{position: absolute; right: 0; top:1rem;}
header .tools, header .tools *{color:#fff; font-weight: bold;}
header .tools a{margin-left:0.5rem; display: inline-block; margin-left:0.5rem;}
header .tools a img{height:1.5rem; position: relative; bottom:-0.3rem;}
nav{border-bottom: 3px #ddd solid; margin-top:1px;}
nav section{text-align: center;}
nav ul{margin:0 auto; padding: 0;}
nav ul li{display: inline-block; border-left:1px #ddd solid; margin:0 0 0 -0.3rem; padding: 0; position: relative;}
nav ul li:nth-child(1){border:none;}
nav ul li a{font-weight: bold; display: inline-block; padding: 5px 1.5rem;}
nav ul li a:hover, nav ul li a:hover *, .subnav a.active{background:#ddd; color:#870000;}
.subnav{position: absolute; z-index: 900; background: rgba(255,255,255,0.8); width:13rem; height: 0; overflow: hidden; transition: all .5s ease; opacity: 0; border:1px #ddd solid; border-top:none;}
nav ul li:hover .subnav{opacity: 1; height: auto;}
.subnav a{text-align: left; display: block;}
#indexBanners img{width:100%;}
aside{width:15rem; float:left; margin:1.5rem 0 2rem 0;}
aside .title{border-left:5px #870000 solid; padding-left: 1rem;}
aside a{display: block; margin:0 0 1rem 0.25rem; padding:5px 1rem; font-weight: bold;}
aside a.active, aside a:hover{background: #870000; color:#fff;}
#aside_nav{color:#870000; font-size: 1.5rem; line-height: 1; cursor: pointer; display: none; margin:0rem 0 0 -1rem;}
#aside_nav:hover{background: none;}
#aside_nav:after{content: 'more'; font-size: 0.9rem; line-height: 1; margin-left:0.2rem; top:-0.2rem; position: relative;}
article{width:calc(100% - 17rem); float: right; margin:2rem 0; min-height: 300px;}
article:after{content: ''; display: block; clear: both;}
#pageTitle{color:#870000; text-shadow: 1px 1px 1px #eee; margin-bottom: 2rem;}
#news_list{margin:2rem 0; padding:0;}
#news_list:after{content: ''; display: block; clear: left;}
#news_list li{list-style: none; width:calc(33% - 1.5rem); float: left; margin:0 0 2rem 1.5rem; position: relative; overflow: hidden;}
#news_list li:nth-child(1), #news_list li:nth-child(3n + 1){margin-left:0;}
#news_list li .img{background: no-repeat center; background-size: cover; width:100%; padding-bottom: 75%; display: block; margin-bottom: 0.5rem; transition: all .5s ease; opacity: 0.8;}
#news_list li:hover .img{opacity: 1;}
#news_list li .d{font-size: 0.8rem;}
#news_list li .more{float: right;}
#actives_list{margin:2rem 0;}
#actives_list li{list-style: none; margin-bottom: 2rem; padding-bottom: 1rem; border-bottom: 1px #aaa dashed;}
#actives_list li:after{content: ''; display: block; clear: both;}
#actives_list li .img{background: no-repeat center; background-size: cover; width:35%; padding-bottom: 25%; display: inline-block; float: left; margin:0 2rem 1rem 0;}
#actives_list li:nth-child(2n) .img{float: right; margin:0 0 1rem 2rem;}
#actives_list li .d{font-size: 0.8rem; margin-bottom: 1rem;}
#actives_list li .more{float: right; margin:1.5rem 0 0 0; color:#870000; font-weight: bold;}
#actives_list li .more *{color:#870000;}
#contactUsForm{width:350px; float: right;}
#contactUsForm strong{width:5rem;}
#contactUsForm .hasTitle{max-width:calc(100% - 7rem);}
#contactUsInfo{width:calc(100% - 400px); float: left;}
#footer_info{background: url('../images/footer_info_bg.jpg') center; margin-top:1.5rem; padding: 1.5rem 0;}
#footer_info section:after{content: ''; display: block; clear: both;}
#footer_info div.col3{width:calc(33% - 2rem); padding-right: 2rem; display: inline-block; vertical-align: top; line-height: 2; font-weight: bold;}
#footer_info div.col3 h3{margin-bottom: 0.5rem; font-size: 1.7rem;}
#footer_info div.col3 h3, #footer_info div.col3 h3 *{color:#870000;}
#footer_info div.col3 h3 img{bottom: -0.3rem; position: relative;}
#footer_info div.col3 .info{margin-left:48px; line-height: 2; font-weight: bold;}
footer{padding:1.5rem 0;}
h3.title{color:#870000; margin:1rem 0 1rem 0;}
.index_col3:after, .index_col2:after, .index1_col3:after{content: ''; display: block; clear: left;}
.index_col3 a, .index1_col3 a{width:calc(33% - 0.76rem); margin:0 0 2rem 1.5rem; display: inline-block; float: left; position: relative; padding-bottom: calc(33% - 1.2rem); overflow: hidden;}
.index_col3 a .img, .index1_col3 a .img{width:100%; display: inline-block; background: no-repeat center rgba(135,0,0,0.6); background-size: cover; height:100%; position: absolute;}
.index_col3 a:nth-child(1), .index1_col3 a:nth-child(1){margin-left:0;}
.index_col3 a .title{text-align: center; font-weight: bold; font-size: 3rem; position: absolute; z-index: 1; width:calc(100% - 30px); height: 50%; color:#fff; margin:10px; padding-top: calc(50% - 2rem); border:5px rgba(0,0,0,0) solid; transition:All 0.2s ease;}
.index_col3 a .title:before{content: ''; display: block; width:100%; height:0; background: url('../images/icon_logo.png') no-repeat center; opacity: 0;}
.index_col3 a.hover .img{background-blend-mode: multiply;}
.index_col3 a.hover .title{height: calc(50% + 2rem); padding-top: calc(50% - 4rem);}
.index_col3 a.hover .title:before{opacity: 1; height: 66px;}
.index_col3 a .title:hover{border-color:#fff;}
.index_col2 a{margin-left:1.5rem; display: inline-block; float: left; position: relative; padding-bottom: calc(33% - 1.5rem); overflow: hidden;}
.index_col2 a .img, .index1_col3 a .img{width:100%; height: 100%; background: no-repeat center rgba(135,0,0,0.6); background-size: cover; position: absolute; transition: all .5s ease; opacity: 0.7;}
.index_col2 a:hover .img, .index1_col3 a:hover .img{transform: scale(1.2); opacity: 1;}
.index_col2 a .title, .index1_col3 a .title{background: rgba(135,0,0,0.6); color:#fff; font-size: 1.5rem; font-weight: bold; text-align: center; position: absolute; z-index: 1; left:0; bottom:0; width:100%; padding: 8px 0;}
.index_col2 a{width:calc(50% - 0.75rem); float: left; margin-bottom: 2rem;}
.index_col2 a:nth-child(1){margin-left:0;}
.store_marquee div:after{content: ''; display: block; clear: left;}
.store_marquee div a{display: inline-block; background: no-repeat center; background-size: cover; width:calc(12.5% - 1.5rem); padding-top:calc(12.5% - 1.5rem); margin:0 0 1rem 1.5rem; float: left;}
.store_marquee div a:nth-child(1){margin-left:0;}
.hideit{display:none;}
.mobile{display: none;}
.mobile-x{display: inline-block;}
.fl{float:left;}
.fr{float:right;}
img.fl, div.fl{float:left; margin:0 1.4rem 1.4rem 0;}
img.fr, div.fr{float:right; margin:0 0 1.4rem 1.4rem;}
.clear{clear:both; height:0; line-height:0; display:block;}
.blue{color:#005594;}
.green{color:#9ECA65;}
.slick-dots{width:100%; margin: 0; text-align: center; position: absolute; bottom: 0.5rem;}
.slick-dots li{display: inline-block; list-style: none; width:1rem; height: 1rem; background: #fff; border-radius: 0.5rem; box-shadow: 0 0 0.4rem rgba(0,0,0,.5); border:1px rgba(0,0,0,0.6) solid; margin:0 5px;}
.slick-dots li button{display: none;}
.slick-dots li.slick-active{background: #870000; box-shadow: 0 0 0.4rem rgba(255,255,255,0); border:1px rgba(255,255,255,1) solid;}

@media screen and (max-width:1200px) {
	section#indexBannersBox{width:100vw; max-width: none;}
	.slick-prev:before, .slick-next:before{display: none;}
}
@media screen and (max-width:800px) {
	#footer_info div.col3{width:calc(50% - 3rem); margin-bottom: 2rem;}
	.index_col3 a, .index1_col3 a{width:calc(50% - 0.5rem); padding-bottom: calc(50% - 0.5rem); margin-left:1rem;}
	.index_col3 a:nth-child(2n + 1), .index1_col3 a:nth-child(2n + 1){margin-left: 0;}
	aside, article{float: none; width:92vw; margin:1rem auto;}
	aside{transition:All 0.5s ease;}
	aside a{display: none;}
	aside h3.title:nth-child(1){display: block;}
	aside.show{position: fixed; z-index: 900; left:0; top:0; width:100vw; height: 100vh; overflow-x: hidden; overflow-y: auto; background: #fff;}
	aside.show a{display: block;}
	#aside_nav{display: block;}
	#contactUsInfo{width:92vw; margin:1rem auto; float: none;}
	#contactUsForm{float: none;}
}
@media screen and (max-width:690px) {
	nav{display: none; position: fixed; z-index: 900; left:0; top:0; background: #fff; margin-top:0; width:100vw; height: 100vh; overflow-x: hidden; overflow-y: auto;}
	nav ul li{text-align: left; display: block;}
	nav ul li a{display: block;}
	.subnav{position: relative; width:calc(100% - 1rem); opacity: 1; margin-left:1rem;}
	header .tools{margin-right: 1rem;}
	.store_marquee div a{width:calc(25% - 20.2px); padding-top:calc(25% - 20.2px);}
	.store_marquee div a:nth-child(4n + 1){margin-left:0;}
	#actives_list li .img{float: none; width:100%; padding-bottom: 100%; margin:0 0 1rem 0;}
	#showNav{display: inline-block; cursor: pointer;}
	#footer_info div.col3{width:calc(100% - 2rem);}
}
@media screen and (max-width:660px){
	#logo img{max-width:50vw;}
	header .tools{position: absolute; right:1.5rem; top:0.6rem;}
	.fl, .fr, div.fl, div.fr, img.fl, img.fr, form.fl, form.fr{float:none;}
	div.fl, div.fr, img.fl, img.fr{margin:0 1rem 1rem 0;}
	.mobile{display: inline-block;}
	.mobile-x, header .tools .mobile-x{display: none;}
}
@media screen and (max-width:540px) {
}
@media print{
	html, body{width:100%; height:auto; overflow:auto;}
}