@charset "UTF-8";
@import url(//fonts.googleapis.com/earlyaccess/fangsong.css);
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
@import url(fontawesome.css);
@import url(jquery-ui.css);
@import url(fancybox.css);
@import url(slick.css);
html{font-size:15px; overflow-x: hidden; overflow-y: auto; margin:0; padding: 0; width:100%;}
body{margin:0; padding: 0; width:100%;}
*, body, div, p, input, button, a, strong, td, li, i, h1, h2, h3, h4, h5, h6, strong, button, span, .btn, select, select option, label, mark{font-size:1rem; line-height:1.8; font-weight:normal; font-family:Arial, 'Noto Sans TC', '微軟正黑體'; text-decoration:none; text-shadow:none; margin:0; padding:0; color:#333; letter-spacing: 1px;}
a{color:#2F2F2F; text-decoration:none; font-weight:normal;}
a:hover{color:#005594; text-decoration:none;}
ul, ol, li{margin:0; padding:0;}
ul, ol{margin-left:1rem;}
ul:after, ol:after{content: ''; display: block; clear: left;}
p{margin:1.2rem 0;}
textarea{resize:none; min-height:5rem;}
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:2rem;}
h3, h3 *{font-size:1.82rem;}
h4, h4 *{font-size:1.58rem;}
h5, h5 *{font-size:1.36rem;}
h6, h6 *{font-size: 1.14rem;}
mark{padding: 0.2rem 0.5rem;}
table, .table, .table1, .tableDietitian{border-collapse:collapse;}
[type=text], [type=number], textarea, select{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=number]:focus, textarea:focus, select:focus{box-shadow: 0 0 5px rgba(25,109,248,0.7);}
form strong{width:8rem; display: inline-block; vertical-align: top; text-align: right;}
.hasTitle{max-width:calc(100% - 10rem); display: inline-block;}
.inline{max-width:150px; display:inline-block;}
#card_no{max-width: 300px;}
#captcha img{height: 2rem;}
.captcha{max-width:5rem;}
.btn, button{cursor: pointer; border:1px #000 solid; border-radius: 5px; padding: 0.2rem 1rem; width:8rem; text-align: center; background: #000; color:#fff;}
.btn:hover, button:hover{color:#000; background: #fff;}
iframe{max-width: 100%;}
section{width:98vw; max-width:1280px; margin:0 auto; position:relative;}
section:after{content: ''; display: block; clear: both;}
.controlgroup{display:inline-block; position:relative; margin:0; padding:0; top:5px; }
.controlgroup label{background:#eee; border:1px #999 solid; font-size: 0.9rem; font-weight:normal; margin:0; padding:2px 5px; cursor:pointer; display:inline-block; float:left; color:#000; }
.controlgroup label:hover{ background:#ddd; }
.controlgroup label:nth-child(1){border-top-left-radius:5px; border-bottom-left-radius:5px;}
.controlgroup label:nth-last-child(1){border-top-right-radius:5px; border-bottom-right-radius:5px;}
.controlgroup label.active{background:#000; color:#fff; }
.controlgroup.radio label{ display:inline-block; }
.controlgroup input{ display:none; }
#contactUsBox{padding: 3rem 5rem; text-align: center;}
#contactUsBox form{width:90%; max-width:350px; float: left; display: inline-block; position: relative;}
#contactUsBox form strong{width:70px;}
#contactUsBox form [type=text], #contactUsBox form [type=number], #contactUsBox form textarea, #contactUsBox form select{max-width:calc(100% - 100px); display: inline-block;}
#contactUsInfo{width:100%; max-width:calc(100% - 480px); float: right; display: inline-block;}
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:0.3rem; min-width:2rem; border-radius: 1.4rem; margin:1.5rem 0.5rem; color:#8ABF1F; display:inline-block; text-align: center;}
.sabrosus a *{color:#8ABF1F;}
.sabrosus a.current, .sabrosus a:hover, .sabrosus a:hover *{background:#8ABF1F; color:#fff;}
.sabrosus a:nth-child(1), .sabrosus a:nth-last-child(1){display: none;}
.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; border:1px rgba(0,0,0,0.6) solid; margin:0 0.5rem;}
.slick-dots li.slick-active{background:rgba(0,0,0,0.6); border-color:#fff;}
.slick-dots li button{display: none;}
#banners, #banners .slider a{display: block; width:100%; height: 480px; background: no-repeat center; background-size: cover;}
.store_marquee{width:96%; margin:0 auto;}
.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(16.7% - 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;}
.store_marquee.albums{width:40%; float: left;}
.store_marquee.albums div a{width:calc(25% - 1rem); padding-top: calc(25% - 1rem); margin:0 0 1rem 1rem;}
#total, #car_cash{text-align: right;}
footer{padding: 1rem;}
footer section, footer section *{font-size: 0.9rem;}
ul.c2{margin:0; padding: 0;}
ul.c2 li{list-style: none; display: inline-block; width:calc(50% - 2rem); margin:0 0 2rem 0; padding: 1rem; float: left;}
ul.c3{margin:0;}
ul.c3:after{content: ''; display: block; clear: left;}
ul.c3 li{list-style: none; display: inline-block; width:calc(33% - 4rem); margin:0 2rem 2rem 2rem; text-align: center;}
ul.c3 li .img{width:100%;}
ul.c4{margin:0;}
ul.c4:after{content: ''; display: block; clear: left;}
ul.c4 li{list-style: none; display: inline-block; width:calc(25% - 4.3rem); margin:0 2rem 2rem 2rem; text-align: center;}
ul.c4 li .img{width:100%;}
ul.list{margin:1.5rem 0;}
ul.list li{list-style: none; margin-bottom: 0.5rem;}
ul.list li .d{margin-right: 1rem;}
.fr{float: right;}
.fl{float: left;}
img.fl{margin:0 2rem 2rem 0;}
img.fr{margin:0 0 2rem 2rem;}
.clear{clear: both;}
.mobile{display: none;}
.mobile-x{display: inline;}
.bh{clear:both; text-align:right; margin:20px 20px 20px 0;}
.bh a{padding:3px 8px; line-height:30px; font-size:12px; color:#000;}
.grayBox{background: #E7E7E7; padding: 2rem 0;}
.green{color:#8ABF1F;}
.red{color:#f00;}
#finish_title{text-align: center; border-bottom: 1px #000 solid;}
button.green{border:1px #8ABF1F solid; padding: 0.3rem 0.8rem; background: none; line-height: 1;}
.oringe{color:#EF9300;}
.btn.oringe{border:1px #EF9300 solid; padding: 0.3rem 0.8rem;}
.hideit{display:none;}
body{background:url('../gallery/images/Zing-e-Chen-artist-bg.jpg') no-repeat center top; background-size: cover}
header{text-align:center; margin:80px 0;}
header img{width:90%; max-width:500px;}
#contactUsBox form{margin:20px auto; float:none; text-align: left;}
.marquee{width:100%; margin:0 auto; padding:10px 1rem; overflow: hidden;}
.marquee .js-marquee-wrapper, .marquee .js-marquee-wrapper .js-marquee{font-size:1em; line-height:1;}
#index_banners a{width:100%; display: block; text-align: center;}
#index_banners a img{width:100%; max-width: none;}

@media screen and (max-width:700px) {
    #products_list .title{width:100%;}
    #contactUsBox{padding: 3rem 1rem;}
    #contactUsBox form{width:90%; max-width:none; margin:2rem auto; float: none;}
    #contactUsInfo{float: none; max-width: none;}
}
@media screen and (max-width:600px) {
    .fr{float: none;}
    .fl{float: none;}
    .mobile{display: inline;}
    .mobile-x{display: none;}
}
@media print{
    html, body{ width:100%; height:auto; overflow:auto; }
}