/*google web fonts*/
/*繁中*/
@import url('https://fonts.googleapis.com/earlyaccess/notosanstc.css');
@import url('https://fonts.googleapis.com/css?family=Raleway:100,200,300,400,500,600,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Roboto:100,200,300,400,500,600,700,800,900');

html {min-height: 100%; font-size: 16px} /*16px x 93.75% = 15px 網站字型大小預設值*/
body {
    height: 100%;
    background color: #fff;
    background: url(../images/bg-ind.png) 50% bottom;
    font-family: 'Roboto', 'Noto Sans TC', 'Noto Serif TC', 'Noto Sans SC', 'Noto Serif SC', 'Noto Sans JP', 'Noto Serif JP', 'Font Awesome\ 5 Brands', 'Font Awesome\ 5 Free', 'Font Awesome\ 5 Pro', sans-serif;
    font-size: 1rem;
    font-weight: 400;
    color: #000;
    letter-spacing: .05rem
}
* { /*使用邊框不影響 div or table 本身寬度設定*/
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box
}

/*font awesome setting*/
::before, ::after {margin-right: .5rem; margin-left: .5rem}

input, select, textarea {
    width: 100%;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: .2rem;
    color: #221e1f;
    padding: .5rem .5rem
}
select {padding-bottom: .75rem}
input:hover, select:hover, textarea:hover {
    border: 1px solid #e4e4e4;
    outline: none
}
input:focus, select:focus, textarea:focus {
    border: 1px solid #82bf6d;
    outline: none
}
input::placeholder, textarea::placeholder {font-weight: 300; color: #afafaf}
textarea {resize:none}
input[type="checkbox"], input[type="radio"] {width: auto !important}

button {
    background: #54a83d;
    border: 1px solid #54a83d;
    border-radius: .2rem;
    font-weight: 400;
    color: #fff;
    padding: .2rem 1rem;
}
button.red{
    background: #ff3939;
    border: 1px solid #ff3939;
    border-radius: .2rem;
    font-weight: 400;
    color: #fff;
}
button.orange{
    background: #ff7f1f;
    border: 1px solid #ff7f1f;
    border-radius: .2rem;
    font-weight: 400;
    color: #fff;
}
button.red:hover {
    background: #e82d2d;
    border-color: #e82d2d;
    color: #fff
}
button.orange:hover {
    background: #e8701f;
    border-color: #e8701f;
    color: #fff
}

button:hover {
    background: #468930;
    border-color: #468930;
    color: #fff
}
button[type="submit"] {background: #f9263f;
    text-align: center;
    font-size: 16px;
    border: none !important;
    border-radius: .2rem;
    font-weight: 400;
    color: #fff !important;
    padding: .5rem 1rem !important;}

button[type="reset"] {background: #898989;
    font-size: 16px;
    border: none !important;
    border-radius: .2rem;
    font-weight: 400;
    color: #fff !important;
    padding: .5rem 1rem !important;}

button.addCart {background: #f9263f;
    font-size: 20px;
    border: none !important;
    border-radius: .2rem;
    font-weight: 400;
    color: #fff !important;
    padding: .2rem .2rem !important;}

button[type="submit"]:hover, button.addCart:hover {background: #c12913; border-color: #c12913}
button[type="reset"]:hover {background: #54a83d; border-color: #54a83d}

a:link, a:visited {color: #221e1f; text-decoration: none; padding: 1px}
a:hover {background: none; color: #3d7c28 !important; text-decoration: none}
a, button {
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
    outline: none
}

img {
    width: 100%;
    max-width: 100%;
    height: auto!important;
    border: none
}

*[onclick], button {cursor: pointer}

h1 {font-size: 1.73rem}
h2 {font-size: 1.5rem}
p, li {font-size: 1rem}
li {list-style: none}

div.clearfix {clear: both}

/*goTOP use only*/
.cd-top {
    width: 2rem;
    height: 2rem;
    background: url(../images/layout/cd-top-arrow.svg) no-repeat center 50% #5273a6;
    border-radius: .5rem;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
    text-indent: 100%;
    white-space: nowrap;
    visibility: hidden;
    display: inline-block;
    position: fixed;
    bottom: 40px;
    right: 10px;
    z-index: 9999;
    /* image replacement properties */
    overflow: hidden;
    opacity: 0;
    -webkit-transition: opacity .3s 0s, visibility 0s .3s;
    -moz-transition: opacity .3s 0s, visibility 0s .3s;
    transition: opacity .3s 0s, visibility 0s .3s;
}
.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
    -webkit-transition: opacity .3s 0s, visibility 0s 0s;
    -moz-transition: opacity .3s 0s, visibility 0s 0s;
    transition: opacity .3s 0s, visibility 0s 0s
}
.cd-top.cd-is-visible {visibility: visible; opacity: .75}
/* the button becomes visible */
/* .cd-top.cd-fade-out {opacity: .25} */
/* if the user keeps scrolling down, the button is out of focus and becomes less visible */
.cd-top:hover {background: url(../images/layout/cd-top-arrow.svg) no-repeat center 50% #ff3a1e; opacity: 1} /*改變按鈕顏色*/
@media only screen and (min-width: 1024px) {
    .cd-top {right: 30px; bottom: 30px}
}
@media only screen and (min-width: 768px) {
    .cd-top {right: 1.5rem; bottom: 6.5rem}
}

/*header*/
header {background: rgba(255, 255, 255, 1)}
div.logo>button {
    background: none !important;
    border: none;
    border-radius: 0;
    outline: none;
    padding: 0
}
a.navbar-brand>img {
    width: 25vw;
    max-width: 200px;
}
.Headericon i{
    font-size: 2rem;
    color: #9e9e9e;
}
.Headericon a{
    text-align: center;
    padding-right: 10px;
}

/*for the fxxking internet explorer*/
@media all and (-ms-high-contrast:none) {
    a.navbar-brand>img {width: 100%}
}

/*nav*/
.bg-light {
    background: #54a83d !important; 
}
li.nav-item{border-right:1px #fff solid}
li.nav-item:nth-of-type(5){border-right:none}

/*選單設定*/
.navbar-light .navbar-nav .nav-link {
    font-size: 1.25rem;
    color: #fff;
/*
    letter-spacing: .25rem;
    text-align: center;
*/
    line-height: 1rem;
    padding: 1rem;
}


.navbar-light .navbar-nav .nav-link>span {font-size: .75rem; letter-spacing: 0}
li.nav-item {}
.navbar-light .navbar-nav .active>.nav-link, .navbar-light .navbar-nav .nav-link.active, .navbar-light .navbar-nav .nav-link.show, .navbar-light .navbar-nav .show>.nav-link {
    background: #509b37;
    color: #fff;
}
.dropdown-menu {
    width: 100%;
    background: #54a83d ;
    border: none;
    border-radius: 0;
    text-align: center;
    padding: 1rem;
    top: 2.9rem
}
.dropdown:hover>.dropdown-menu {display: block}
a.dropdown-item {
    border-bottom: #fff 1px solid;
    color: #fff;
    padding-top: .5rem;
    padding-bottom: .5rem
}
.dropdown-item:focus, .dropdown-item:hover {
    background: rgba(255, 255, 255, 0.8);
    color: #54a83d !important
}
a.dropdown-item:last-of-type {border-bottom: none}

/*選單設定滑鼠滑過效果*/
.navbar-light .navbar-nav .nav-link:focus, .navbar-light .navbar-nav .nav-link:hover {
    background:#509b37;
    color: #fff !important
}

/*moblie nav
.navbar-light .navbar-toggler {border: #fff 1px solid !important}
button.navbar-toggler>i {color: #fff}
button.navbar-toggler>i::before, button.navbar-toggler>i::after {margin: 0}
.navbar-light .navbar-toggler:hover {background: none; border-color: #ff3a1e !important}
.navbar-light .navbar-toggler:hover>i {color: #ff3a1e}

div.slidebars {
    color: #fff !important;
    width: 100vw;
    background: rgba(84, 168, 61, 0.85);
    color: #54a83d !important;
    padding: 1rem
}
div.closeBtn {text-align: right}
div.closeBtn>button {background: none; border: none; color: #fff}
dl.slidebarNav {text-align: center; margin-bottom: 0}*/

/*moblie nav*/
.navbar-light .navbar-toggler {border: #fff 1px solid !important}
button.navbar-toggler>i {color: #fff}
button.navbar-toggler>i::before, button.navbar-toggler>i::after {margin: 0}
.navbar-light .navbar-toggler:hover {background: 44912a; border-color: #fff !important}
.navbar-light .navbar-toggler:hover>i {color: #fff}

div.slidebars {
    color: #fff !important;
    width: 100vw;
    background: rgba(84, 168, 61, 0.85);
    box-shadow: rgba(0, 0, 0, .15) 1px 0 5px;
    padding: 1rem
}
div.closeBtn {text-align: right}
div.closeBtn>button {background: none; border: none; color: #fff}
dl.slidebarNav {text-align: center; margin-bottom: 0}
dl.slidebarNav>dd {
    border-bottom: #ccc 1px solid;
    margin-bottom: 2rem;
    padding-bottom: 2rem
}
dl.slidebarNav>dd>a {
    font-size: 2rem;
    font-weight: 300;
    color: #fff;
    line-height: 1.15rem;
}
dl.slidebarNav>dd>a>span {font-size: 1rem}
dl.slidebarNav>dd:last-of-type {border: none; margin-bottom: 0; padding-bottom: 0}



/*footer*/
footer {background: #e8e8e8}
section.fNav{background: #fff}
dd.addInfo>p {margin-bottom: .5rem}
dd.addInfo>p>span {color: #54a83d; margin-right: .3rem}
/*dd.addInfo>p:last-of-type {text-align: center}*/
dd.footNav>p {line-height: 2rem}
dd.qrcode>img{width: 120px}
dd.addInfo>img{width: 457px}

section.copyright {background: #54a83d; color: #fff; text-align: center}