/* The alert message box */
.alert {
    padding: 20px;
    background-color: #f44336; /* Red */
    color: white;
    margin-bottom: 15px;
}

/* 
.closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size: 22px;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}
 
    .closebtn:hover {
        color: black;
    }*/
/*.badge-orange {
    background-color: #eb6100;
    /*color: white;
    border-radius: 10px 10px;
    display: inline-block;
    border: 2px solid;
    font-size: 10px;menublue
     
}*/

.badge-orange :after {
    /*display: inline-block;
    border-radius: 50%;
    border: 2px solid;
    font-size: 10px;
    background-color: #eb6100;
    color: white;*/
    /*font-size: .7em;
    background: #eb6100;
    color: white;
    width: auto;
    padding: 2px;
    height: 18px;
    text-align: center;
    line-height: 18px;
    border-radius: 50%;
    box-shadow: 0 0 1px #333;
    font-size: 14px;*/
    background: red;
    border-radius: 30px;
    color: #fff;
    content: attr(badge);
    font-size: 11px;
    margin-top: -10px;
    min-width: 20px;
    padding: 2px;
    position: absolute;
    text-align: center;
}

[badge-orange^="-"]:after,
[badge-orange="0"]:after,
[badge-orange=""]:after {
    display: none;
}
 
.div-center {
    position: fixed;
    top: 50%;
    left: 48%;
    /*right: 0;*/
    /*z-index: 1030;*/
    -ms-transform: translate(-50%,-50%); /* IE 9 */
    -webkit-transform: translate(-50%,-50%); /* Chrome, Safari, Opera */
    transform: translate(-50%,-50%);
}


/*基督教-藍色按鈕*/
.button.style-blue {
    border-color: #5dd3e9;
    background: #5dd3e9;
    color: #fff;
    border: 1px #e0e0e0 solid;

    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    padding: 9px 18px;  
    min-width: 0;
}

    .button.style-blue:hover {
        background: transparent;
        color: #5dd3e9;
    } 

  
.button.style-blueAddshop {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
    background: #5dd3e9;
    /*display: inline-block;*/
    text-align: center;
    /*border: 2px #eb6100 solid;*/
    border-color: #5dd3e9;
    padding: 10px 5px;
    min-width: 0;
}
    .button.style-blueAddshop:hover {
        background: transparent;
        color: #000000;
    }
/*基督框*/
.style-blue-background {
    font-size: 12px;
    line-height: 16px;
    font-weight: 700;
    text-transform: uppercase;
    background-color:azure;
}
 

.menublue a:hover, .menublue a.active {
    background: #5dd3e9;
    border-color: #72aee1;
    color: #fff;
}

/*手機版基督教MENU*/
.sp_item .top-btn .cg-page2 {
    padding: 0;
    border-radius: 0;
    display: inline-block;
    margin-bottom: 0px;
}

.cg-page2 > li {
    display: inline;
}

.sp_item .top-btn .cg-page2 > li > a, .sp_item .top-btn .cg-page2 > li > span {
    position: relative;
    float: left;
    padding: 10px 13px;
    line-height: 1.42857;
    color: #666;
    text-decoration: none;
    background-color: #fafafa;
    border: 1px solid #eaeaea;
    font-size: 14px;
}


    .sp_item .top-btn .cg-page2 > li > a:hover, .sp_item .top-btn .cg-page2 > li > span {
        color: #fff;
        background-color: #5dd3e9;
    }

.sp_item .top-btn .cg-page2 > li:first-child > a, .sp_item .top-btn .cg-page2 > li:first-child > span {
    margin-left: 0px;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

.sp_item .top-btn .cg-page2 > li > a i {
    padding: 3px 7px 0 0;
}

.sp_item .top-btn .cg-page2 > li > a.active {
    background: #5dd3e9;
    border-color: #72aee1;
    color: #fff;
}
/*END 手機版基督教*/

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/
    @media (min-width: 1281px) {
        .divmap {
            width: 100%;
            height: 360px;
            border: 0;
        }

        .divmapMax {
            width: 100%;
            height: 800px;
            border: 0;
        }
    }
    /* 
  ##Device = Laptops, Desktops
  ##Screen = B/w 1025px to 1280px
*/
    @media (min-width: 1025px) and (max-width: 1280px) {
        .divmap {
            width: 100%;
            height: 300px;
            border: 0;
        }

        .divmapMax {
            width: 100%;
            height: 800px;
            border: 0;
        }
    }
    /* 
  ##Device = Tablets, Ipads (portrait)
  ##Screen = B/w 768px to 1024px
*/
    @media (min-width: 768px) and (max-width: 1024px) {

        .divmap {
            width: 100%;
            height: 100px;
            border: 0;
        }

        .divmapMax {
            width: 100%;
            height: 600px;
            border: 0;
        }
    }
    /* 
  ##Device = Tablets, Ipads (landscape)
  ##Screen = B/w 768px to 1024px
*/
    @media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {

        .divmap {
            width: 100%;
            height: 100px;
            border: 0;
        }

        .divmapMax {
            width: 100%;
            height: 600px;
            border: 0;
        }
    }
    /* 
  ##Device = Low Resolution Tablets, Mobiles (Landscape)
  ##Screen = B/w 481px to 767px
*/
    @media (min-width: 481px) and (max-width: 767px) {

        .divmap {
            width: 100%;
            height: 200px;
            border: 0;
        }

        .divmapMax {
            width: 100%;
            height: 200px;
            border: 0;
        }
    }
    /* 
  ##Device = Most of the Smartphones Mobiles (Portrait)
  ##Screen = B/w 320px to 479px
*/
    @media (min-width: 320px) and (max-width: 480px) {

        .divmap {
            width: 280px;
            height: 200px;
            border: 0;
        }

        .divmapMax {
            width: 100%;
            height: 200px;
            border: 0;
        }
    }
.divmap3 {
    width: 100%;
    height: 300px;
    border: 0;
}


.label {
    border-radius: 0;
    text-shadow: none;
    font-size: 10px;
    font-weight: normal;
    padding: 3px 1px 3px;
    background-color: #abbac3 !important
}

    .label[class*="span"][class*="arrow"] {
        min-height: 0
    }

.badge {
    text-shadow: none;
    font-size: 10px;
    padding: 1px 8px; 
    font-weight: normal;
    line-height: 15px;
    background-color: #ABBAC3 !important;
}

.label-transparent,
.badge-transparent {
    background-color: transparent !important
}

.label-grey,
.badge-grey {
    background-color: #a0a0a0 !important
}

.label-info,
.badge-info {
    background-color: #3a87ad !important
}

.label-primary,
.badge-primary {
    background-color: #2283c5 !important
}

.label-success,
.badge-success {
    background-color: #82af6f !important
}

.label-important,
.badge-important {
    background-color: #d15b47 !important
}
.label-error,
.badge-error {
    background-color: #b00 !important
}
.label-inverse,
.badge-inverse {
    background-color: #333 !important
}

.label-warning,
.badge-warning {
    background-color: #f89406 !important
}

.label-pink,
.badge-pink {
    background-color: #d6487e !important
}

.label-purple,
.badge-purple {
    background-color: #9585bf !important
}

.label-yellow,
.badge-yellow {
    background-color: #fee188 !important
}

.label-light,
.badge-light {
    background-color: #e7e7e7 !important
}

.badge-yellow,
.label-yellow {
    color: #963 !important;
    border-color: #fee188
}

.badge-light,
.label-light {
    color: #888 !important
}

.label.arrowed,
.label.arrowed-in {
    position: relative;
    margin-left: 9px
}

    .label.arrowed:before,
    .label.arrowed-in:before {
        display: inline-block;
        content: "";
        position: absolute;
        left: -14px;
        top: 0;
        border: 9px solid transparent;
        border-width: 9px 7px;
        border-right-color: #abbac3
    }

    .label.arrowed-in:before {
        border-color: #abbac3;
        border-left-color: transparent !important;
        left: -9px
    }

.label.arrowed-right,
.label.arrowed-in-right {
    position: relative;
    margin-right: 9px
}

    .label.arrowed-right:after,
    .label.arrowed-in-right:after {
        display: inline-block;
        content: "";
        position: absolute;
        right: -14px;
        top: 0;
        border: 9px solid transparent;
        border-width: 9px 7px;
        border-left-color: #abbac3
    }

    .label.arrowed-in-right:after {
        border-color: #abbac3;
        border-right-color: transparent !important;
        right: -9px
    }

.label-info.arrowed:before {
    border-right-color: #3a87ad
}

.label-info.arrowed-in:before {
    border-color: #3a87ad
}

.label-info.arrowed-right:after {
    border-left-color: #3a87ad
}

.label-info.arrowed-in-right:after {
    border-color: #3a87ad
}

.label-primary.arrowed:before {
    border-right-color: #2283c5
}

.label-primary.arrowed-in:before {
    border-color: #2283c5
}

.label-primary.arrowed-right:after {
    border-left-color: #2283c5
}

.label-primary.arrowed-in-right:after {
    border-color: #2283c5
}

.label-success.arrowed:before {
    border-right-color: #82af6f
}

.label-success.arrowed-in:before {
    border-color: #82af6f
}

.label-success.arrowed-right:after {
    border-left-color: #82af6f
}

.label-success.arrowed-in-right:after {
    border-color: #82af6f
}

.label-warning.arrowed:before {
    border-right-color: #f89406
}

.label-warning.arrowed-in:before {
    border-color: #f89406
}

.label-warning.arrowed-right:after {
    border-left-color: #f89406
}

.label-warning.arrowed-in-right:after {
    border-color: #f89406
}

.label-important.arrowed:before {
    border-right-color: #d15b47
}

.label-important.arrowed-in:before {
    border-color: #d15b47
}

.label-important.arrowed-right:after {
    border-left-color: #d15b47
}

.label-important.arrowed-in-right:after {
    border-color: #d15b47
}

.label-inverse.arrowed:before {
    border-right-color: #333
}

.label-inverse.arrowed-in:before {
    border-color: #333
}

.label-inverse.arrowed-right:after {
    border-left-color: #333
}

.label-inverse.arrowed-in-right:after {
    border-color: #333
}

.label-pink.arrowed:before {
    border-right-color: #d6487e
}

.label-pink.arrowed-in:before {
    border-color: #d6487e
}

.label-pink.arrowed-right:after {
    border-left-color: #d6487e
}

.label-pink.arrowed-in-right:after {
    border-color: #d6487e
}

.label-purple.arrowed:before {
    border-right-color: #9585bf
}

.label-purple.arrowed-in:before {
    border-color: #9585bf
}

.label-purple.arrowed-right:after {
    border-left-color: #9585bf
}

.label-purple.arrowed-in-right:after {
    border-color: #9585bf
}

.label-yellow.arrowed:before {
    border-right-color: #fee188
}

.label-yellow.arrowed-in:before {
    border-color: #fee188
}

.label-yellow.arrowed-right:after {
    border-left-color: #fee188
}

.label-yellow.arrowed-in-right:after {
    border-color: #fee188
}

.label-light.arrowed:before {
    border-right-color: #e7e7e7
}

.label-light.arrowed-in:before {
    border-color: #e7e7e7
}

.label-light.arrowed-right:after {
    border-left-color: #e7e7e7
}

.label-light.arrowed-in-right:after {
    border-color: #e7e7e7
}

.label-grey.arrowed:before {
    border-right-color: #a0a0a0
}

.label-grey.arrowed-in:before {
    border-color: #a0a0a0
}

.label-grey.arrowed-right:after {
    border-left-color: #a0a0a0
}

.label-grey.arrowed-in-right:after {
    border-color: #a0a0a0
}

.label-large {
    font-size: 13px;
    padding: 3px 8px 4px
}

    .label-large.arrowed,
    .label-large.arrowed-in {
        margin-left: 12px
    }

        .label-large.arrowed:before,
        .label-large.arrowed-in:before {
            left: -16px;
            border-width: 11px 8px
        }

        .label-large.arrowed-in:before {
            left: -12px
        }

    .label-large.arrowed-right,
    .label-large.arrowed-in-right {
        margin-right: 11px
    }

        .label-large.arrowed-right:after,
        .label-large.arrowed-in-right:after {
            right: -16px;
            border-width: 11px 8px
        }

        .label-large.arrowed-in-right:after {
            right: -12px
        }



/*查詢退貨鈕-紫*/
.article-container .article-container-btn .btn2 {
    width: 183px;
    padding: 17px 0;
    background-color: darkslateblue;
    border-color: darkslateblue;

}

.article-container .article-container-btn .btn2 {
    font-size: 1rem;
    margin-right: 20px;
}


.btn2 {
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    color: #373737;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 10px;
    display: inline-block;
    margin-bottom: 12px;
    cursor: pointer;
    min-width: 127px;
    border: 2px #dadada solid;
    background: transparent;
    position: relative;
    border-radius: 4px;
}

    .btn2.style-tt {
        font-size: 16px;
        line-height: 18px;
        padding: 14px 55px;
        text-transform: uppercase;
        font-weight: 700;
        color: #fff;
        border: 2px #0f51a3 solid;
        background: darkslateblue;
        letter-spacing: 2px;
    }

        .btn2.style-tt:hover {
            background: #fff;
            color: #262626;
        }
/*商品到達鈕-土黃*/
.article-container .article-container-btn .btn3 {
    width: 183px;
    padding: 17px 0;
    background-color: #a6700c;
    border-color: #a6700c;
}

.article-container .article-container-btn .btn3 {
    font-size: 1rem;
    margin-right: 20px;
}

.btn3 {
    font-weight: 700;
    font-size: 12px;
    line-height: 14px;
    color: #373737;
    text-transform: uppercase;
    text-align: center;
    padding: 8px 10px;
    display: inline-block;
    margin-bottom: 12px;
    cursor: pointer;
    min-width: 127px;
    border: 2px #dadada solid;
    background: transparent;
    position: relative;
    border-radius: 4px;
}

    .btn3.style-t2 {
        font-size: 16px;
        line-height: 18px;
        padding: 14px 55px;
        text-transform: uppercase;
        font-weight: 700;
        color: #fff;
        border: 2px #0f51a3 solid;
        background: #a6700c;
        letter-spacing: 4px;
    }

        .btn3.style-t2:hover {
            background: #fff;
            color: #262626;
        }

/*加入購物車紅色鈕*/
.button.style-red {
    border: 1px #d6487e solid;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    padding: 11px 25px;
    background: #ca1515;
    color: white;
    min-width: 0;
}
/*公里數計算淺藍色鈕*/
.button.style-blue-km {
    border: 1px #5dd3e9 solid;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    padding: 11px 25px;
    background: #5dd3e9;
    color: white;
    min-width: 0; 
}


/**20190507-購物清單列表跑版用*/
.article-container ul li {
    padding: 4px 0 0 10px;
    /* font-size: 1em;
    font-weight: 600; */
    font-size: 1rem;
    color: #4c4c4c;
    font-weight: bold;
}


/*20190801購物車(前端)*/
.notify {
    position: relative;
}

.badge2 {
    display: inline-block;
    padding: .3em .32em;
    font-size: 75%;
    font-weight: 700;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 30px;
    box-shadow: 0 2px 3px rgba(0,0,0,.08);
}

.badge-pill {
    padding-right: .5em;
    padding-left: .5em;
}

.notify .noti-icon-badge {
    display: inline-block;
    position: absolute;
    right: -5px;
    top: -30px;
    background: #b00;
}
/*全國資訊網按鈕*/

.button.style-blue2019 {
    border: 1px #184588 solid;
    font-size: 14px;
    font-weight: 700;
    line-height: 18px;
    padding: 11px 25px;
    background: #184588;
    color: #fff;
    min-width: 0;
}

    .button.style-blue2019:hover {
        background: transparent;
        border-color: #184588;
        color: #333;
    }
/*商品明細-評價內容鈕*/
.btn.style-orange {
    font-size: 14px;
    line-height: 14px;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 700;
    color: #fff;
    border: 2px #eb6100 solid;
    background: #eb6100;
    letter-spacing: 2px
} 

    .btn.style-orange:hover {
        background: #fff;
        color: #eb6100;
    }

    /*建議購買設定*/
    @media (min-width: 767px) {
        .div-suggess {
            width: 84px;
        }
    }

    @media (max-width: 767px) {
        .div-suggess {
            width: auto;
        }
    }
.div-suggess-label {
    font-size: calc(12px + 0.2vw);
    line-height: 1.2em;
}