/**共用-----------------------------------**/
/** fix button display improperly via bootstrap reboot.scss **/
[type=reset], [type=submit], button, html [type=button] {
    -webkit-appearance: unset;
}

body, html {
    width: 100%;
    height: 100%;
    display: block;
}

body {
    font-family: "Microsoft JhengHei";
}

a {
    color: #666;
}

a:hover {
    color: #000;
    text-decoration: none;
}

div#root {
    max-width: 100% !important;
    min-height: 100%;
    overflow-x: hidden;
}

div.page-padding {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    background: none;
    min-height: 0;
    line-height: 0;
}

/*圖像替換增加指定a*/
.text-hide a {
    font: 0/0 a;
    color: #0000;
    text-shadow: none;
    background-color: #0000;
    border: 0;
}

/*by ie11 吃不到寬度*/
_:-ms-fullscreen, :root [class*="col-"] {
    min-width: 1rem
}

/** Vue 載入前隱藏元素 **/
[v-cloak] {
    display: none;
}

/** Vue placeholder block 過場效果 **/
.block-placeholder-enter-active, .block-placeholder-leave-active {
    transition: opacity 0.5s ease;
    -webkit-transition: opacity 0.5s ease;
}

.block-placeholder-enter, .block-placeholder-leave-to {
    opacity: 0;
}

/* 資料顯示控制 */
/* 當有第二個以上時自動隱藏第一個項目，否則顯示 */
.hide-show-first > *:first-of-type {
    display: none;
}

.hide-show-first > *:last-of-type {
    display: block;
}

/* 當有第二個以上時自動隱藏最後一個項目，否則顯示 */
.hide-show-last > *:last-of-type {
    display: none;
}

.hide-show-last > *:first-of-type {
    display: block;
}

/*表單/按鈕 :focus顏色調整*/
.form-control:focus, .btn.focus, .btn:focus {
    border-color: #80bdff !important;
    box-shadow: none !important;
}

/**排版共用-----------------------------------**/
.container-fluid + .container-fluid {
    margin-top: 1rem;
}

.container-fluid > .row + .row {
    margin-top: 1rem;
}

.page {
    margin-right: -15px;
    margin-left: -15px;
    /*overflow-x: hidden;*/
    overflow: hidden;
}

/*上方header區logo置中/左樣式*/
.navbar.style-1 {
    padding: 0;
}

/*組合區*/
.row.group.control-w {
    padding-left: 0;
    padding-right: 0;
}

.row.group.control-w .control-w {
    padding: 0;
}

.row.group.control-w .list-prod, .row.group.control-w .list-grid .prod-box {
    padding-top: 0;
}

@media (min-width: 768px) {
    .row.group .page {
        margin-right: 0;
    }
}

@media (max-width: 991px) {
    /*組合四欄式*/
    .row.group.control-w .wg.list.list-columns.four.control-w .prod-box {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

.container-fluid.block-2 {
    min-height: 50vh;
}

.container-fluid.block-2 > div[class*="page-"]:first-of-type {
    padding-top: 1rem;
}

.container-fluid.block-2 > div:last-of-type {
    margin-bottom: 2rem;
}

.row.group > div > div:only-child { /*組合框架內部div高撐開，有多組時則顯示原高度*/
    height: 100%;
}

/*麵包屑*/
.full-breadcrumb, .breadcrumb {
    background-color: #f7f7f7 !important;
}

.breadcrumb {
    font-size: 0.9rem;
}

.breadcrumb .breadcrumb-item:last-of-type a {
    color: #000;
}

.breadcrumb .breadcrumb-item:last-of-type a:hover {
    color: #666;
}

/*針對頁面內預設第一個div有寫入padding-top為貼齊全版麵包屑與nav列用*/
.container-fluid > .page .full-breadcrumb {
    margin-top: -1rem;
}

/*若頁面內麵包屑前有插入其他模組則不需*/
.wg ~ .page .full-breadcrumb {
    margin-top: 0;
}

/*表單篩選*/
.form-filter {
    /*margin-bottom: 1rem;*/
}

.form-filter .sortby-display .btn-text {
    padding-left: 0;
    padding-right: 0;
    color: #666;
    text-decoration: underline;
}

.form-filter .sortby-display .btn-text:hover {
    color: #000;
}

.form-filter .sortby-display .btn-text.active {
    color: #000;
    text-decoration: none;
}

.form-filter .col-form-label {
    white-space: nowrap;
}

.form-filter .select {
    max-height: 20px;
    border: none;
    border-radius: 0;
    border-bottom: 1px solid #999;
    padding: 0 .5rem 0 0;
    margin-top: 7px;
}

/*版面架構內page裡的區塊與wg同層*/
.block {
    margin-bottom: 1rem;
}

/*區塊內容置中用*/
.box-center {
    display: table;
    height: 100%;
    width: 100%;
}

.box-center .middle {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    height: 100%;
    width: 100%;
}

@media (max-width: 767px) {
    .page .form-filter {
        padding: 0 0.5rem;
    }

    .page > .control-w {
        padding-left: 15px;
        padding-right: 15px;
    }
}

.w-33 {
    width: 33.333333% !important;
    margin-right: -0.4%;
}

@media (min-width: 768px) {
    .w-md-33 {
        width: 33.333333% !important;
        margin-right: -0.4%;
    }
}

/*模組滿版共用-使用於container-fluid block-2之下一層的模組，若需滿版*/
.wg.full {
    margin-right: -15px;
    margin-left: -15px;
}

/*限制滿版區頁面內容不要滿版，注意control-w只會在.container-fluid內、.page內及wg上使用(針對單區塊/模組)*/
/*page上使用full-control主要為框架滿版內容不滿版使用(下一層所有區塊不滿版)；若不加則表示全部為滿版呈現，此時可配合control-w穿插使用*/
.control-w, .full-control > div, .full-control > .breadcrumb {
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
    margin-right: auto;
    margin-left: auto;
}

.container-fluid .control-w, .full-control > div, .full-control > .breadcrumb {
    max-width: 650px;
}

@media (min-width: 768px) {
    .container-fluid .control-w, .full-control > div, .full-control > .breadcrumb {
        max-width: 820px;
    }
}

@media (min-width: 992px) {
    .container-fluid .control-w, .full-control > div, .full-control > .breadcrumb {
        max-width: 960px;
    }
}

@media (min-width: 1200px) {
    .container-fluid .control-w, .full-control > div, .full-control > .breadcrumb {
        max-width: 1140px;
    }
}

@media (min-width: 1440px) {
    .container-fluid .control-w, .full-control > div, .full-control > .breadcrumb {
        max-width: 1280px;
    }
}

/*nav 導覽區*/
.navbar-nav .nav-link {
    padding: 0.5rem 1rem;
}

.nav-img {
    display: block;
}

@media (max-width: 767px) {
    .navbar.no-gutters {
        padding: 0;
    }

    .navbar-nav .nav-img {
        padding: 0.5rem 0.5rem;
    }
}

@media (min-width: 768px) {
    .menu-store > .menu-vh {
        border-bottom: 2px solid #eee;
    }

    .navbar-nav .level2 .nav-link {
        display: inline-block;
        min-width: 32%;
    }
}

@media (max-width: 767px) {
}

/*模組高度設定-測試*/
/**備註
if
   Awg > Bwg > 50vw 則取 Bwg 高度做最大值
   wg + wg + wg wg第2高 > 33.333333vw 則依第2高wg 高度做最大值
else
   wg + wg 組合使用最大高 50vw
   wg + wg + wg 組何使用最大高 33.333333vw
bn + wg or bn + wg + wg 時（只要有bn）
if
  bn > vw值 取bn高為最大值 若 wg > 最大值使用滑動bar
**/
@media (min-width: 768px) {
    .container-fluid > .row > .col-12.col-md-6 {
        /*max-height: 50vw;*/
        /*overflow: hidden;*/
    }

    .container-fluid > .row > .col-12.col-md-4 {
        /*max-height: 33.333333vw;*/
        /*overflow: hidden;*/
    }
}

/*form 表單*/
.form-row .col,
.form-row [class*="col-"] {
    padding-right: 5px;
    padding-left: 5px;
}

.input-group ~ .form-text { /*input組合增加說明*/
    margin-bottom: 1rem;
}

.input-group:hover ~ .form-text {
    text-shadow: 1px 1px 2px white;
}

/*文字列表呈現*/
.list-unstyled li {
    padding: 5px 5px 5px 0;
}

.form-control {
    /*padding: 0.5rem 0.75rem; 影響form-control-sm
    line-height: 1.25;*/
}

/*水平title*/
.list-title {
    display: -ms-flexbox;
    display: flex;
    -ms-align-items: center !important;
    align-items: center !important;
    width: 100%;
}

/*頁面主title-最大的標題title,模組大title*/
.titlebar {
    -webkit-box-pack: center !important;
    -ms-flex-pack: center !important;
    justify-content: center !important;
    text-align: center;
    margin-bottom: 2rem;
}

.titlebar .title-img {
    display: none;
}

@media (min-width: 768px) {
    .titlebar .title-img {
        display: none;
    }

    .titlebar .title-text {
        display: block;
    }
}

/*內容列表文字摺疊展開*/
.contact-list .card {
    border: none;
    border-radius: inherit;
}

.contact-list .card + .card {
    border-top: 1px solid #000;
}

/*使用編輯器嵌入的內容設定*/
.edit img {
    max-width: 100% !important;
    height: auto !important;
}

/*直立式圖文列表 一列*/
.wg.list.scrollx .item {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.wg.list.scrollx .item:first-of-type {
    margin-left: auto;
}

.wg.list.scrollx .item:last-of-type {
    margin-right: auto;
}

.wg.list.scrollx .item, .wg.list.scrollx .card {
    width: 20vmax;
}

.wg.list.scrollx .card-img-top {
    border: 1px solid #eee;
}

.wg.list.scrollx .card:hover .card-img-top {
    transition: 1s;
    transform: scale(1.1);
}

.wg.list.scrollx .card-body {
    padding: 0.5rem 0;
}

.wg.list.scrollx .card-title {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .wg.list.scrollx .item, .wg.list.scrollx .card {
        width: 10vmax;
    }
}

/*card 圖文組合*/
.card.hover:hover {
    background-color: #f7f7f7;
}

.card.hover:hover .image-link {
    overflow: hidden;
    display: block;
}

.card.hover:hover .image-link img {
    transition: 1s;
    transform: scale(1.1);
}

.card-header {
    background-color: unset;
    border-bottom: none;
}

.card-body {
    position: relative;
}

.card-footer {
    background-color: unset;
}

.card-subtitle.top {
    margin-top: 0;
}

.card-list {
    margin-bottom: 0;
}

.card-columns {
    -webkit-column-count: 2;
    column-count: 2;
    -webkit-column-gap: 0.5rem;
    column-gap: 0.5rem;
}

.card-float .card {
    margin-bottom: 0.75rem;
    display: inline-block;
}

.card-scrollx { /*card 滾動*/
    display: -ms-flexbox;
    display: flex;
    /*margin-right: -15px;
    margin-left: -15px;*/
    /* overflow-x: auto;*/
    overflow-y: hidden;
}

.card-scrollx .card {
    border: none;
    text-align: center;
    /*-ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;*/
}

.card-scrollx .card:first-of-type {
    margin-left: auto;
}

.card-scrollx .card:last-of-type {
    margin-right: auto;
}

.card-columns .card {
    display: inline-block;
    width: 100%;
    margin-bottom: 0rem;
}

.card .btnbar {
    /*margin-left: -1.25rem;*/
    /*margin-right: -1.25rem;*/
}

.card.btn-text {
    padding: .5rem 1.25rem;
}

@media (min-width: 576px) {
    .card-deck {
        display: -ms-flexbox;
        display: flex;
    }

    .card-scrollx .card { /*card 滾動*/
        -ms-flex: 0 0 auto;
        flex: 0 0 auto;
        width: auto;
        max-width: none;
        /*margin-right: 15px;
        margin-left: 15px;*/
    }

    .card-columns {
        -webkit-column-count: 4;
        column-count: 4;
    }

    .card-columns .card {
        /*display: block;影響瀑布流*/
    }

    /*暫訂需修*/
    .card-float .card {
        width: 50%;
        min-height: 200px;
        float: none;
        overflow: hidden;
    }

    .card-float .card:first-child {
        min-height: 400px;
        float: left;
    }
}

/*列表群組-文字列表*/
.wg.list.article {
    background-color: #f7f7f7;
    padding: 3rem 1rem;
}

.wg.list.article .list-group-item {
    border: none;
    border-bottom: 1px solid #ccc;
    border-radius: 0;
    margin-bottom: 0;
    padding: 4px 5px 4px 0;
    background-color: transparent;
}

.wg.list.article .list-group-item:hover {
    background-color: #eee;
}

.wg.list.article .list-group-item .title-text {
    height: 1.3rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0;
}

@media (min-width: 768px) {
    .wg.list.article .date {
        float: right;
    }
}

/*列表群組-文字列表(組合呈現)*/
.row.group .wg.list.article {
    background-color: #fff;
}

/*列表群組-文字列表無框+時間*/
.wg.list.article.time li:hover {
    background-color: #eee;
    border-radius: 0.25rem;
}

.wg.list.article.time .title-text {
    margin-bottom: 0;
}

/*列表群組-圖文列表*/
.wg.list.list-imgtext {
    padding: 3rem 0;
}

.wg.list.list-imgtext .list-group-item {
    border: none;
    border-bottom: 1px solid #00000020;
    margin-bottom: 0;
    padding-top: 1.2rem;
}

.wg.list.list-imgtext .list-group-item .title-text {
    font-size: 1.5rem;
}

@media (min-width: 768px) {
    .wg.list.list-imgtext {
        padding: 3rem 1rem;
    }

    .wg.list.list-imgtext .list-group {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        -ms-flex-direction: row;
        flex-direction: row;
    }

    .wg.list.list-imgtext .list-group-item {
        width: 50%;
    }

    .wg.list.list-imgtext .list-group-item .list-link {
        padding-top: 0;
    }
}

/*列表群組-圖文列表(組合呈現)*/
@media (min-width: 768px) {
    .row.group .wg.list.list-imgtext .list-group {
        max-height: 495px;
        overflow-y: auto;
    }

    .row.group .wg.list.list-imgtext .list-group-item {
        width: 100%;
        height: 165px;
        overflow: hidden;
    }

    .row.group .wg.list.list-imgtext .info {
        max-height: calc(165px - 2rem);
        overflow: hidden;
    }
}

/*card 圖文組合-文章列表*/
.card-info {
    margin-bottom: .75rem;
}

.card-body .border, .card-info .border {
    padding: 0.2rem 0.7rem 0.3rem;
    border-radius: 0.25rem;
    display: inline-block;
}

.card-body .border img {
    width: auto;
    max-height: 15px;
}

.card-tags {
    font-size: 80%;
    font-weight: 400;
}

/*瀑布流-圖片浮動title*/
.card-columns .card {
    overflow: hidden;
    min-height: 100px;
}

.card-columns .card-img-overlay {
    background-color: rgba(0, 0, 0, 0.7);
    top: auto;
    padding: 1rem;
    transition: height 1s;
    height: 3rem;
    overflow: hidden;
}

.card-columns .card-img-overlay .card-text {
    color: #fff;
    font-size: 0.9rem;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (min-width: 768px) {
    .card-columns .hover .card-img-overlay .content-box {
        display: table;
        height: 100%;
        width: 100%;
    }

    .card-columns .hover .card-img-overlay .middle {
        display: table-cell;
        vertical-align: middle;
        text-align: center;
        height: 100%;
        width: 100%;
    }

    .card-columns .hover .card-img-overlay .btn-text {
        background-color: rgba(255, 255, 255, 0.9);
        color: #000;
        font-size: 0.8rem;
        border-radius: 0;
    }

    .card-columns .hover:hover .btn-text:hover {
        background-color: #000;
        color: #fff;
    }

    .card-columns .hover:hover .card-img-overlay {
        height: 100%;
    }
}

/*內容頁*/
.content-header {
    padding: 0.75rem 0;
    margin-bottom: 0;
}

.content-header .info-article {
    font-size: 0.9rem;
    line-height: 2rem;
    color: #666;
}
.content-header .title {
    max-width: 100%;
}
.content-header .date {
    font-size: 1rem;
}
.content-header .sharebar * {
    /*line-height: 2.5rem !important;*/
    vertical-align: middle !important;
}
.content-header .sharebar span {
    /*height: auto !important;*/
}

.content-header .sharebar > .row > * {
    padding-left: 0.5rem;
}
.content-header .sharebar *.fb_iframe_widget {
    display: inherit;
}
.content-header .sharebar .col-auto:first-of-type {
    max-width: 82px;
    max-height: 20px;
    margin-top: .2rem;
}

.content-header .btnbar {
    margin-bottom: 0;
    text-align: left;
}

.content-header .track {
    border: 1px solid #ccc;
}

.content-header .list-tags {
    padding-left: 0;
    padding-right: 0;
}

.content-body .prev-next .oi {
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.content-body .prev-next .linkblock-full {
    background-color: #f7f7f7;
    padding: 1rem;
    text-align: center;
}

@media (max-width: 767px) {
    .title-text {
        /*white-space: nowrap;*/
        /*text-overflow: ellipsis;*/
        /*overflow: hidden;*/
    }
}

@media (min-width: 768px) {
    .content-body .prev-next .linkblock-full {
        padding: 1.5rem 2rem;
    }
}

/*商品box*/
.prod-box {
    position: relative;
    word-wrap: break-word;
    background-color: #fff;
    background-clip: border-box;
    padding: 1.25rem;
}

.prod-box .hover a {
    overflow: hidden;
}

.prod-box .info {
    paddig-top: 0.5rem;
}

.prod-box .original-price {
    text-decoration: line-through;
    font-size: 0.9rem;
    color: #666;
}

.prod-box .additem {
    color: #f78a76;
    margin: 0.5rem 0;
}

.prod-box .custom-checkbox .custom-control-label:before {
    border-radius: 0;
}

.prod-box .custom-control-label:before {
    border: 1px solid #f78a76;
    background-color: #fff;
}

.prod-box .custom-checkbox .custom-control-input:checked ~ .custom-control-label:before {
    background-color: #f78a76;
}

.prod-box .custom-control-input:checked ~ .custom-control-label:before {
    color: #fff;
    background-color: #f78a76;
}

.prod-box .btnbar {
    margin-bottom: 0;
}

.prod-box .btn-text.addcart, .prod-box .btn-text.addcart:hover {
    color: #fff;
}

.prod-box .list-category {
    font-size: .9rem;
}

.prod-box .list-category dl {
    margin-bottom: 0;
    padding-top: 1rem;
}

@media (max-width: 767px) {
    .prod-box .card-body {
        padding: 1rem 0.5rem;
    }

    .prod-box .name {
        font-size: 1rem;
    }

    .prod-box .btn-text .icon {
        display: none;
    }
}

@media (min-width: 768px) {
    .prod-box .list-category dd {
        margin-bottom: 0;
    }
}

/*商品box style樣式-預設*/
.list-prod.style .card {
    border: none;
}

/*商品box style樣式-框*/
.list-prod.style-1 .card .card-img-top {
    padding: 1rem;
}

.list-prod.style-1 .card .btnbar.other {
    background-color: transparent;
    width: 3rem;
}

.list-prod.style-1 .card .image-link ~ div {
    background-color: #eee;
    padding-bottom: .5rem;
    margin-bottom: 0 !important;
}

/*商品box fancybox規格選單*/
.fancy-form.product-view .title {
    border-bottom: 1px solid #ccc;
    margin-bottom: 1rem;
}

.fancy-form.product-view .pic-item {
    padding-left: 0.2rem;
    padding-right: 0.2rem;
    margin-bottom: 0.3rem;
}

.fancy-form.product-view .more .text-link {
    color: #f78a76;
    font-size: 0.9rem;
}

.fancy-form.product-view .brand, .fancy-form.product-view .name-en {
    color: #666;
}

.fancy-form.product-view .special-price .context {
    padding-left: 0;
    font-size: 2rem;
}

.fancy-form.product-view .amount .btn-icon {
    background-color: #000;
    color: #fff;
    border-radius: 0;
    margin-top: -1px;
    margin-bottom: 1px;
    padding: 0.5rem 0.75rem;
}

.fancy-form.product-view .amount .input-text {
    border-radius: 0;
}

/*多組box群組使用*/
.list-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 1.25rem;
}

@media (min-width: 768px) {
    .list-prod.list-grid .carousel-control-prev {
        margin-left: -5%;
    }

    .list-prod.list-grid .carousel-control-next {
        margin-right: -5%;
    }
}

/*資訊box*/
.info-box, .btn-box {
    padding: 1.25rem;
    position: relative;
}

.info-box + .btn-box {
    padding-top: 0px;
    margin-top: -1.25rem;
}

.btn-box .btn-img {
    margin-bottom: 0.5rem;
}

/*連結空白區塊*/
.link-block {
    display: block;
    height: 100%;
}

/*連結區塊*/
.linkblock-full {
    display: block;
    height: 100%;
}

/*圖像替換-文換圖*/
.text-hide a {
    font: 0/0 a;
    color: transparent;
    text-shadow: none;
    background-color: transparent;
    border: 0;
}

/*模組間隔*/
.container-fluid div[class*="wg"] {
    margin-bottom: 2rem;
}

.container-fluid div[class*="wg"] div[class*="wg"] {
    margin-bottom: 1rem;
}

/*館別下第一個模組的title增加間隔*/
.container-fluid div[class*="wg"]:first-of-type .title-text {
    padding-top: 2rem;
}

/*模組標題bar圖*/
.wg .titlebar img {
    margin: auto;
}

/*商品模組頁籤*/
.wg.list-prod .list-tabs {
    padding-top: 3rem;
    padding-left: 0;
    list-style: none;
    border-bottom: 1px solid #999;
}

.wg.list-prod .tab-item {
    padding: 0;
    margin-bottom: -1px;
    text-align: center;
}

.wg.list-prod .tab-item .nav-link {
    border: none;
}

.wg.list-prod .tab-item.active, .wg.list-prod .tab-item .nav-link.active {
    border-bottom: 4px solid #000;
}

.wg.list-prod .linkblock-full {
    padding: 1rem 1.5rem;
}

@media (max-width: 767px) {
    .wg.list-prod .tab-item {
        font-size: 1rem;
        border-bottom: 1px solid #999;
    }

    .wg.list-prod .linkblock-full {
        padding: 0.5rem;
    }
}

/*gotop回到最上方*/
.gotop.fixedrb {
    right: 3%;
    bottom: 80px;
}

/*hr水平分隔線*/
.hr:after {
    content: "";
    display: block;
    position: absolute;
    top: 50%;
    width: 100%;
    border-bottom: 1px solid #ccc;
}

.hr {
    text-align: center;
    position: relative;
    margin: 1em 0 2em;
}

.hr span {
    position: relative;
    z-index: 1;
    background-color: #fff;
    padding: 0 10px;
}

/*資料表格-多格*/
.data-title {
    padding: 0.5rem 0.5rem 0;
}

.data-title .title-text {
    display: inline-block;
}

.data-title .title-text + .title-text {
    padding-left: 1rem;
}

.block-data {
    /*margin-bottom: 1rem;*/
    font-size: 0.9rem;
    /*border: 1px solid #eee;*/
    /*border-top: 1px solid #eee;*/
}

.block-data .title-bar {
    background-color: #ddd;
}

.block-data > div {
    padding-left: .5rem;
    padding-right: .5rem;
}

.block-data > div:not(.title-bar) {
    border-left: 1px solid #eee;
    border-right: 1px solid #eee;
    /*height: 100%; 20190723 annie 註解 */
}

.block-data .title-list:first-of-type {
    border-top: 1px solid #eee;
    background-color: #ddd;
}

.block-data .data-list:last-of-type {
    border-bottom: 1px solid #eee;
}

.block-data .title-text, .block-data .data-grid {
    margin-bottom: 0;
}

.block-data .data-list {
    /*padding-top: 1rem;*/
    /*padding-bottom: 1rem;*/
}

.block-data .data-list:nth-of-type(odd) {
    background-color: #f1f1f1;
}

.block-data .data-list:hover {
    background-color: #f7f7f7;
}

.block-data .data-list .form-group {
    margin-left: 0.5rem;
    margin-right: 0.5rem;
}

.block-data .data-list .form-group a[data-toggle="collapse"] {
    position: absolute;
    right: 0;
}

.block-data .data-list .data-grid fb-like fb_iframe_widget{
    word-wrap: break-word;
    word-break: break-all;
}
.block-data .data-list .data-grid.data {
    white-space: nowrap;
}

.block-data .data-list .btn-text {
    width: 96%;
    margin: auto;
}

.block-data .data-list .context.edit {
    padding: 1rem 1.7rem 0.1rem;
}

.block-data .block-footer .data-list, .block-footer .data-grid {
    background-color: #eee;
}

.block-footer .number.sum {
    color: #f00;
}

@media (max-width: 767px) {
    .data-title .title-text + .title-text {
        padding-left: 0;
    }

    .block-data .data-list {
        border-bottom: 1px solid #eee;
    }

    .block-data .title-text, .block-data .data-grid {
        padding: .5rem .3rem;
    }

    .block-footer .number {
        text-align: right;
    }
}

@media (max-width: 991px) {
    .block-data .title-list ~ .data-list:nth-of-type(2) {
        border-top: 1px solid #eee;
    }
}

@media (min-width: 768px) {
    .data-title {
        border: 1px solid #eee;
        border-bottom: none;
    }

    .block-data > div {
        padding: 0;
    }

    .block-data .data-list + .block-data .data-list .data-grid {
        border-top: 1px solid #eee;
    }

    .block-data .title-text, .block-data .data-grid {
        padding: .5rem;
    }
}

@media (max-width: 767px) {
    .block-data .data-list .data-grid[data-title]:before {
        content: attr(data-title) " ";
        width: 32%;
        height: auto;
        display: block;
        white-space: nowrap;
        text-align: left;
        float: left;
    }

    .block-data .data-grid strong {
        font-size: 1.2rem;
    }

    .block-data .data-grid .small {
        font-size: .9rem;
        color: #666;
    }

    .block-data .data-grid.big {
        font-size: 2rem;
        font-weight: lighter;
        line-height: 1;
        letter-spacing: -1px;
    }

    .block-data .data-grid.small {
        font-size: .9rem;
        color: #666;
        line-height: 2;
    }

    .block-data .data-grid .icon {
        display: inline-block;
        background-color: #13beb0;
        width: 10px;
        height: 10px;
        border-radius: 1rem;
        position: absolute;
        left: 0;
        top: .5rem;
    }
}

/*資料表格-兩欄*/
.data-item {
    margin-bottom: 1rem;
}

.data-item > div {
    padding: 0.2rem !important;
}

.data-item .btn-text {
    text-align: left;
}

/*資料表格-max混合*/
.block-data .data-box {
    border-top: 1px solid #eee;
    /*border-bottom: none;*/
}

.block-data .data-box .title-text {
    font-weight: bold;
    white-space: nowrap;
    overflow: hidden;
    background-color: #f7f7f7;
}

.block-data .data-box .data-grid {
    border-bottom: 1px solid #eee;
}

/*注意文字*/
.note-text {
    display: block;
}

/**效果共用-----------------------------------**/
/*loading區塊動態*/
.prod-box.show-loading {
    min-height: 360px;
}

.show-loading .block-w {
    height: 100%;
    min-height: 320px;
    position: relative;
}

.show-loading .animated-bg {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
    -webkit-animation-name: placeLoading;
    animation-name: placeLoading;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    background: #f6f7f8;
    background: #eee;
    background: -webkit-gradient(linear, left top, right top, color-stop(8%, #eee), color-stop(18%, #ddd), color-stop(33%, #eee));
    background: -webkit-linear-gradient(left, #eee 8%, #ddd 18%, #eee 33%);
    background: linear-gradient(to right, #eee 8%, #ddd 18%, #eee 33%);
    -webkit-background-size: 800px 104px;
    background-size: 800px 104px;
    min-height: 1rem;
    margin-bottom: 0.5rem;
}

.show-loading .animated-bg.pic {
    margin-bottom: 1rem;
}

.show-loading .p-t {
    padding-top: 100%;
}

@keyframes placeLoading {
    0% {
        background-position: -468px 0
    }
    100% {
        background-position: 468px 0
    }
}

.fancy-form.show-loading .animated-bg {
    width: 100%;
    min-height: 1.5rem;
    margin-bottom: 1rem;
}

.fancy-form.show-loading .info {
    padding-left: 1rem;
}

.list-prod.show-loading .pic {
    margin-bottom: 0.2rem;
}

.list-prod.show-loading .title-h {
    min-height: 1.5rem;
    margin-bottom: 0.5rem;
}

.list-prod.show-loading .form-block {
    min-height: 2rem;
    margin-bottom: 0.2rem;
}

.product-basic.show-loading .title-h {
    min-height: 3rem;
    margin-bottom: 1rem;
}

.product-basic.show-loading .pic.thumbnail .animated-bg {
    width: 20%;
    padding-top: 20%;
    margin-left: 1rem;
}

.product-basic.show-loading .info {
    padding-left: 1rem;
    padding-right: 1rem;
}

.product-basic.show-loading .info .animated-bg {
    min-height: 1.8rem;
    margin-bottom: 1rem;
}

.box-fixed.show-loading .animated-bg {
    min-height: 1.8rem;
    margin: 0 0.5rem;
}

.show-loading .block-data .animated-bg.title-h {
    min-height: 2.5rem;
}

.show-loading .block-data .info {
    padding-left: 1rem;
}

.show-loading .block-data .animated-bg {
    min-height: 2rem;
    margin-bottom: 1rem;
}

.form-content-itemlist.show-loading .animated-bg {
    margin: 0 0.2rem 0.3rem;
}

.form-content-itemlist.show-loading .form-group .info {
    padding-left: 1rem;
}

.form-content-itemlist.show-loading .form-group .animated-bg {
    margin: 0;
    min-height: 2rem;
}

/*loading區塊+文字-等待時間較長時使用*/
.block-loading {
    display: table;
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
}

.preloader {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    color: #000;
    margin: 0.5rem 0;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 2px;
}

.preloader .line {
    width: 2px;
    height: 12px;
    background: #000;
    margin: 0 1px;
    display: inline-block;
    animation: opacity-1 1000ms infinite ease-in-out;
}

.preloader .line-1 {
    animation-delay: 800ms;
}

.preloader .line-2 {
    animation-delay: 600ms;
}

.preloader .line-3 {
    animation-delay: 400ms;
}

.preloader .line-4 {
    animation-delay: 200ms;
}

.preloader .line-6 {
    animation-delay: 200ms;
}

.preloader .line-7 {
    animation-delay: 400ms;
}

.preloader .line-8 {
    animation-delay: 600ms;
}

.preloader .line-9 {
    animation-delay: 800ms;
}

@keyframes opacity-1 {
    0% {
        opacity: 1;
        height: 21px;
    }
    50% {
        opacity: 0;
        height: 12px;
    }
    100% {
        opacity: 1;
        height: 21px;
    }
}

/*標籤*/
.badge-position {
    position: absolute;
    display: inline-block;
    padding: 0.3em 0.7em 0.5em;
    font-size: 75%;
    font-weight: bold;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: 0.25rem;
}

.badge-bgorange {
    color: #fff;
    background-color: #ff6300;
}

.badge-bgpink {
    color: #fff;
    background-color: #FF4295;
}

/*標籤-商品數量*/
.badge-position.badge-total {
    padding: .2em .4em;
    border-radius: 1em;
}

@media (max-width: 767px) {
    .badge-position.badge-total {
        top: .5rem;
        right: .5rem;
    }
}

/*列表標籤-如關鍵字/文章tag標籤等等*/
.list-tags {
    background-color: #f7f7f7;
    border-radius: 5px;
    padding: 0.5rem 1rem;
}

.list-tags.text { /*文字呈現*/
    background-color: #0000;
    padding-top: 0;
    padding-bottom: 0;
}

.list-tags.tag-basket {
    text-align: center;
}

.list-tags.tag-basket .tag { /*文字+背景區塊呈現*/
    border: 1px solid #999;
    border-radius: 5px;
}

.list-tags.tag-basket .tag:hover {
    background-color: #fff;
    border: 1px solid #000;
}

.list-tags.tag-basket .list-link {
    padding-top: 0.1rem;
    padding-bottom: 0.1rem;
}

@media (min-width: 768px) {
    .list-tags.tag-basket {
        text-align: left;
    }
}

/*列表組合內的標籤*/
.list-group .list-tags {
    padding-left: 0;
}

.list-group .list-tags .list-link {
    background-color: #f7f7f7;
    border: 1px solid #eee;
    border-radius: 0.25rem;
    padding: 0.2rem 0.5rem;
}

/*dropdown 下拉選單*/
.show > a {
    outline: 0;
}

@media (min-width: 576px) {
    .dropdown-toggle::after { /*使用於media 576px之上，隱藏icon*/
        display: none;
    }
}

/*dropdown 下拉+頁籤式展開選單*/
.dropdown-tabs .dropdown-menu { /*本css設定與bootstrap衝突，建議之後增加js判斷當多層下拉選單 無使用"館別廣告"且下拉項目未滿3個則不使用此設定*/
    left: 5% !important;
    right: 5% !important;
    top: auto !important;
    transform: none !important;
}

/*expand 展開列表呈現*/
.expand-menu {
    /*min-width: 10rem;*/
    padding: 0.5rem 0;
    margin: 0.125rem 0 0;
    font-size: 1rem;
    color: #212529;
    text-align: left;
    list-style: none;
}

.expand-item {
    display: block;
    width: 100%;
    font-weight: normal;
    color: #212529;
    text-align: inherit;
    white-space: nowrap;
}

.expand-menu .nav-link {
    padding-top: 0;
    padding-bottom: 0;
}

.expand-item .input-group {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
    padding-bottom: 0.5rem;
}

/*頁籤切換*/
.nav-tabsl {
    border-right: 1px solid #ddd;
    height: 100%;
}

.tab-content > .tab-pane {
    display: none;
}

.tab-content > .active {
    display: block;
}

/*頁籤列表*/
.tabs {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.list-link {
    display: block;
    padding: 0.5rem 1rem;
}

/*頁籤列表-圓形圖*/
.author .tag.icon {
    margin-top: -20%;
}

.author .tag.icon .img-outer {
    padding: 0.1rem;
}

.author .tag.icon .img-outer .list-link {
    border-radius: 50%;
    background-color: #FFF;
    padding: 0;
    display: inline-block;
    overflow: visible;
}

.author .tag.icon img {
    width: 100%;
    border-radius: 50%;
    box-shadow: 0 0 0.5em #999;
}

.author .tag.icon img:hover {
    transition: 1s;
    transform: scale(1.1);
}

/*列表呈現切換 icon*/
.list-toggle .toggle {
    border: 1px solid #fff;
}

.list-toggle .toggle:hover {
    border: 1px solid #999;
}

.list-toggle .toggle.active, .list-toggle .toggle.active:hover {
    border: 1px solid #eee;
    background-color: #eee;
}

/*列表呈現切換區(橫/格/文)*/
.list-horizontal, .list-grid, .list-text {
    padding-top: 1rem;
}

.list-horizontal .list-group-item, .list-text .list-group-item, .list-grid .list-grid-item {
    margin-bottom: 1rem;
    border-radius: .25rem;
    padding: 0.75rem;
}

.list-horizontal .list-group-item:hover, .list-text .list-group-item:hover, .list-grid .hover:hover, .list-group .list-group-item:hover {
    background-color: #f7f7f7;
}

.list-grid .list-grid-item .card {
    height: 100%;
}

/*列表呈現切換區-商品(橫/格/圖)*/
.list-horizontal .prod-box {
    border: none;
    border-radius: 0;
}

.list-horizontal .prod-box + .prod-box {
    border-top: 1px solid #ccc;
}

.list-horizontal .prod-box .track {
    position: initial;
}

/*列表呈現-共用(橫/格)*/
.list-horizontal .list-group-item:hover .image-link, .list-grid .list-grid-item:hover .image-link {
    overflow: hidden;
    display: block;
}

.list-horizontal .list-group-item:hover .image-link img, .list-grid .list-grid-item:hover .image-link img {
    transition: 1s;
    transform: scale(1.1);
}

.list-horizontal .breadcrumb, .list-grid .breadcrumb {
    background: transparent;
    padding: 0;
    margin-bottom: 0.2rem;
}

/*列表呈現-橫式*/
.list-horizontal .list-group-item {
    border: 1px solid #ccc;
    border-radius: 0.25rem;
}

.list-horizontal div:not([class=""]) ~ .info {
    padding-left: 1rem;
}

.list-horizontal .btnbar {
    text-align: left;
}

.list-horizontal .btnbar.other {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

.list-horizontal .btnbar.other .btn-text {
    background-color: rgba(247, 247, 247, 0.7);
    border: 1px solid #eee;
    font-size: 0.9rem;
}

.list-horizontal .btnbar.other .btn-text:hover {
    background-color: rgba(247, 247, 247, 1);
}

.list-horizontal .note-text {
    min-height: 3rem;
}

.list-horizontal .context {
    margin-bottom: 0.3rem;
}

.list-horizontal .data .border {
    border: none !important;
}
@media (max-width:575px) {
    .list-horizontal div:not([class=""]) ~ .info .data ~ div, .list-horizontal div:not([class=""]) ~ .info .data ~ p {
        display: none;
    }
}

/*列表呈現-文橫式*/
.list-horizontal.list-text .btnbar.other {
    position: absolute;
    right: 0.75rem;
    padding-top: 0;
}

.list-horizontal.list-text .info {
    /* padding-left: 1rem; */
}

@media (min-width: 767px) {
    .list-horizontal.list-text .btnbar.other {
        top: 0.75rem;
    }
}

/*列表呈現-格式*/
.list-grid .btnbar.other {
    /*position: absolute;*/
    /*right: 0;*/
    /*top: 0;*/
    /*z-index: 1;*/
    /*margin-bottom: 0;*/
    margin-left: auto;
    -ms-flex-order: -1;
    order: -1;
}

.list-grid .card > .image-link:first-child ~ .btnbar.other {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
    margin-bottom: 0;
}

.list-grid.list-prod .card > div, .list-grid.list-prod .card > h6, .list-grid.list-prod .card > p {
    padding: 0.3rem .5rem 0;
}

.list-grid .btnbar.other .btn-text {
    background-color: rgba(247, 247, 247, 0.7);
    border: 1px solid #eee;
    font-size: 0.9rem;
}

.list-grid .btnbar.other .btn-text:hover {
    background-color: rgba(247, 247, 247, 1);
}

/*格式文字高限制*/
.text-height-1, .text-height-2, .text-height-3, .text-height-4 {
    overflow: hidden;
}

.text-height-1 {
    height: 1.5rem;
}

.text-height-2 {
    height: 2.8rem;
}

.text-height-3 {
    height: 4rem;
}

.text-height-4 {
    height: 5rem;
}

.text-height-auto-max {
    position: relative !important;
}

.text-height-auto-max > * {
    display: none !important;
}

.text-height-auto-max > *:first-child {
    position: absolute !important;
    float: left;
    display: block !important;
}

.text-height-auto-max > *:last-child {
    opacity: 0 !important;
    display: block !important;
}

/*整頁頁籤切換*/
.tabs-pagetoggle {
    /*border-bottom: 1px solid #ddd;*/
    /*margin-right: -15px;*/
    /*margin-left: -15px;*/
    margin-bottom: 15px;
    width: auto;
}

.tabs-pagetoggle:after {
    content: "";
    display: block;
    width: 100%;
    border-bottom: 1px solid #ddd;
    margin-top: -1px;
}

.tabs-pagetoggle .nav-link.active, .tabs-pagetoggle .nav-item.show .nav-link {
    color: #495057;
    background-color: #fff;
    border: 1px solid #0000;
    border-color: #ddd #ddd #fff;
    border-top-left-radius: 0.25rem;
    border-top-right-radius: 0.25rem;
}

.tabs-pagetoggle .nav-item {
    /*margin-bottom: -1px;*/
    text-align: center;
    white-space: nowrap;
    padding-left: 0.7rem;
    padding-right: 0.7rem;
}

.tabs-pagetoggle .nav-item:not(.active) {
    border-bottom: 1px solid #ddd;
}
.tabs-pagetoggle.responsive .nav-link {
    color: #555;
    background-color: #f3f3f3;
    border-radius: inherit;
    border-bottom: 2px solid #485486;
}
.tabs-pagetoggle.responsive .nav-link:hover:not(.active) {
    background-color: #2c396d;
    color: #fff;
}
.tabs-pagetoggle.responsive .nav-link.active {
    background-color: #485486;
    color: #fff;
    border: 1px solid #485486;
    border-bottom: none;
}
@media (max-width: 767px) {
    .tabs-pagetoggle.responsive {
        overflow-x: auto;
        -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    }
}

@media (min-width: 768px) {
    .page .tabs-pagetoggle {
        /*border: none;*/
        /*margin-left: auto;*/
        /*margin-right: auto;*/
        /*width: 100%;*/
        /*padding: 0;*/
    }

    .tabs-pagetoggle .nav-item {
        /*color: #fff;*/
        /*background-color: #999;*/
        /*border-radius: 0.25rem;*/
    }

    .tabs-pagetoggle .nav-item:hover {
        /*color: #fff;*/
        /*background-color: #000;*/
        /*border-color: #000;*/
    }

    .tabs-pagetoggle .nav-item.show .nav-link {
        display: none;
    }

    /*底線呈現*/
    .tabs-pagetoggle.tabline {
        margin-left: initial;
        margin-right: initial;
        border-bottom: 1px solid #314f8d;
    }

    .tabs-pagetoggle.tabline .nav-link.active {
        border: none;
        border-radius: 0;
        border-bottom: 3px solid #314f8d;
        background: transparent;
    }

    .tabs-pagetoggle.tabline .nav-link {
        background-color: transparent;
        color: #000;
    }
}

@media (min-width: 1200px) {
    .tabs-pagetoggle {
        margin-bottom: 2rem;
    }
}

/*scroll 滾動區塊*/
.scrollx-auto {
    max-width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
}

.scrolly-auto {
    max-height: 385px;
    overflow-y: auto;
    overflow-x: hidden;
}

@media (min-width: 768px) {
    .scrolly-md-hidden {
        max-height: none;
        overflow-y: hidden;
    }
}

/*輪播區塊*/
.carousel-outside {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-pack: center;
    justify-content: center;
    list-style: none;
    text-align: center;
    padding: 0;
}

.carousel-outside li {
    position: relative;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    background-color: #eee;
    cursor: pointer;
}

.carousel-outside .active {
    background-color: #f7f7f7;
}

.vert .carousel-item-next.carousel-item-left,
.vert .carousel-item-prev.carousel-item-right { /*捲動*/
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.vert .carousel-item-next,
.vert .active.carousel-item-right {
    -webkit-transform: translate3d(0, 100%, 0);
    transform: translate3d(0, 100%, 0);
}

.vert .carousel-item-prev,
.vert .active.carousel-item-left {
    -webkit-transform: translate3d(0, -100%, 0);
    transform: translate3d(0, -100%, 0);
}

.control-w.carousel-inner {
    padding: 0;
}

.carousel-control-next, .carousel-control-prev {
    width: 5%;
    color: #000;
}

.carousel-control-next:hover, .carousel-control-prev:hover {
    color: #000;
}

/*float 浮動按扭*/
.float-btnbar {
    float: right;
}

.float-img {
    display: block;
    min-width: 20px;
}

.float-link {
    display: inline-block;
    font-weight: normal;
    text-align: center;
    white-space: nowrap;
    vertical-align: middle;
    padding: 0.3rem;
    font-size: 1rem;
    line-height: 1.25;
}

/*fixed 固定位置*/
.fixedb {
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    background-color: #fff;
}

.fixedrb {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 1000;
}

/*position 浮動方式*/
@media (min-width: 576px) {
    .position-sm-relative {
        position: relative !important;
    }

    .position-sm-absolute {
        position: absolute !important;
    }
}

@media (min-width: 768px) {
    .position-md-relative {
        position: relative !important;
    }

    .position-md-absolute {
        position: absolute !important;
    }
}

@media (min-width: 992px) {
    .position-lg-relative {
        position: relative !important;
    }

    .position-lg-absolute {
        position: absolute !important;
    }
}

@media (min-width: 1200px) {
    .position-xl-relative {
        position: relative !important;
    }

    .position-xl-absolute {
        position: absolute !important;
    }
}

/*position 浮動絕對位置*/
.pos-topl {
    top: 0;
    left: 0;
}

.pos-topr {
    top: 0;
    right: 0;
}

.pos-btmcenter {
    bottom: 0;
    left: 50%;
    -ms-transform: translate(-50%);
    -moz-transform: translate(-50%);
    -webkit-transform: translate(-50%);
    -o-transform: translate(-50%);
    transform: translate(-50%);
}

/*共用按鈕區*/
.btnbar { /*頁面用*/
    margin-bottom: 1rem;
    text-align: center;
}

.btnbar .btn-block.btn-text.more {
    border: 1px solid #eee;
    background-color: #f7f7f7;
}

.btn-bar { /*模組區域用*/
    margin-bottom: 1rem;
}

.btn-bar.fixed-bottom ~ div:last-of-type {
    margin-bottom: 3rem;
}

.control-w .btn-bar {
    /*margin-left: -15px;*/
    /*margin-right: -15px;*/
}

/*btn 按鈕(文字、button、input使用btn；img圖片使用btn-img)*/
.btn {
    font-weight: normal;
    padding: 0.5rem 0.75rem;
    line-height: 1.25;
}

.btn-img {
    text-align: center;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 0.2rem 0.3rem;
}

.btn-img img {
    max-height: 100%;
    max-width: 100%;
    width: auto;
    height: auto;
}

.btn-img:hover img {
    opacity: 0.6;
}

.btn-send {
    color: #fff;
    background-color: #999;
    border-color: #999;
}

.btn-send:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

.btn-create, .btn-save {
    color: #fff;
    background-color: #17a2b8;
    border-color: #17a2b8;
}

.btn-create:hover, .btn-save:hover {
    color: #fff;
    background-color: #999;
    border-color: #999;
}

.btn-general {
    color: #fff;
    background-color: #999;
    border-color: #999;
}

.btn-general:hover {
    color: #fff;
    background-color: #000;
    border-color: #000;
}

/*btn共用style*/
.btn-fb {
    color: #fff;
    background-color: #2e609b;
}

.btn-gfb {
    color: #fff;
    background-color: #dc4e40;
}

.btn-t {
    color: #fff;
    background-color: #00c3f3;
}

.btn-l {
    color: #fff;
    background-color: #4ad138;
}

.btn-y {
    color: #fff;
    background-color: #8f25a9;
}

.btn-fb:hover {
    color: #fff;
    background-color: #254b79;
}

.btn-gfb:hover {
    color: #fff;
    background-color: #b34034;
}

.btn-t:hover {
    color: #fff;
    background-color: #38a8c3;
}

.btn-l:hover {
    color: #fff;
    background-color: #30a020;
}

.btn-y:hover {
    color: #fff;
    background-color: #781790;
}

@media (max-width: 767px) {
    .btnbar-btnbox .btn {
        height: 25vw;
        line-height: 4.5;
    }

    /*btn-blog*/
    .btnbar-blog .btn {
        /*font-size: 0.8rem;*/
        width: 60px;
        height: 60px;
        margin: auto;
        padding: .5rem;
        border-radius: 1rem;
    }
}

@media (min-width: 768px) {
    .btnbar-blog > div {
        margin: 0 .5rem;
    }
}

/*資料上傳區*/
.upload-box {
    background-color: #f7f7f7;
    border: 1px solid #ccc;
    border-radius: .25rem;
    display: -ms-flexbox;
    display: flex;
}

.upload-box .pic {
    border: 1px solid #ccc;
    border-radius: .25rem;
    overflow: hidden;
    margin: 1rem 1.2rem;
    padding: 2px;
}

.upload-box .block-upload {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
    cursor: pointer;
}

.upload-box .block-upload .js-drop.drop-image {
    width: 100%;
    height: 100%;
    line-height: 8.5;
}

.upload-box .block-upload .js-drop.drop-image > div {
    display: inline-block;
}

.block-upload .note-text {
    position: absolute;
    left: 50px;
    top: 50%;
    transform: translateY(-50%);
}

/*重傳圖片*/
.block-upload .upload-preview {
    width: 100%;
}

.block-upload .upload-preview .pic {
    position: absolute;
    left: 15px;
    top: 0;
    width: 107px;
    background-color: #f7f7f7;
}

.block-upload .upload-preview .btnbar {
    position: absolute;
    bottom: 0;
}

/*重傳圖片-暫*/
.block-upload .upload-other {
    position: absolute;
    bottom: 16px;
    right: 30px;
}

@media (max-width: 767px) {
    .upload-box .block-upload .js-drop.drop-image > div {
        font-size: .9rem;
        letter-spacing: -1px;
    }
}

/*icon*/
span[class*="icon-"] {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    background-position: center;
    background-size: cover;
}

/*menu列表浮動方式變換*/
.inherit-absolute {
    position: inherit;
}

.absolute-inherit {
    position: absolute;
    z-index: 1000;
    float: left;
    min-width: 10rem;
    /*padding: .5rem 0;*/
    /*margin: .125rem 0 0;*/
    background-color: #fff;
    background-clip: padding-box;
}

header .absolute-inherit, nav.absolute-inherit {
    width: 100%;
}

header .absolute-inherit.show, nav.absolute-inherit.show {
    box-shadow: 0px 4px 3px 0px #00000030;
}

@media (min-width: 768px) {
    .inherit-absolute {
        position: absolute;
        z-index: 1000;
        float: left;
        min-width: 10rem;
        padding: .5rem 0;
        margin: .125rem 0 0;
        background-color: #fff;
        background-clip: padding-box;
        border: 1px solid rgba(0, 0, 0, .15);
        border-radius: .25rem;
    }

    .absolute-inherit {
        position: inherit;
        z-index: 1000;
        float: none;
        min-width: auto;
        padding: inherit;
        margin: inherit;
        background-color: #fff;
        background-clip: padding-box;
    }

    .positionx5-md {
        left: 5%;
        right: 5%;
    }
}

/*menu列表直橫變換*/
.menu-vh {
    width: 100%;
    position: relative;
    display: -ms-flexbox;
    display: flex;
}

@media (min-width: 768px) {
    .menu-vh {
        -ms-flex-direction: row;
        flex-direction: row;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

/*使用編輯器之區塊*/
.edit {
    padding-top: 1rem;
    padding-bottom: 1rem;
    line-height: 1.5;
    text-align: justify;
}

/*進度條*/
.progress {
    margin-bottom: 4rem;
}

/*fancybox套用調整*/
.fancy-form .fancy-title {
    padding: 24px;
    margin: -24px -24px 0;
    border-bottom: 1px solid #ccc;
    text-align: center;
}

.fancy-form .fancy-body {
    padding: 24px 0;
}

.fancy-form .title-text {
    font-weight: bold;
    margin-bottom: 2rem;
}

.fancy-form p {
    line-height: 2;
}

.fancy-form a {
    color: #2e73ba !important;
}

.fancy-form a:hover {
    color: #666 !important;
}

.fancy-form .btn-primary {
    background-color: #000;
    border: 1px solid #000;
    color: #fff !important;
}

.fancy-form .btn-primary:hover {
    background-color: #333;
    border: 1px solid #000;
    color: #fff !important;
}
.fancy-form {
    max-width: 80vw;
    width: 100%;
    font-size: 1.2rem;
}
.fancy-form .row {
    display: contents;
}
.fancy-form .icon {
    display: inline-block;
}
@media (min-width: 768px) {
    .fancy-form {
        max-width: 60vw;
    }
}
@media (min-width: 1200px) {
    .fancy-form {
        max-width: 40vw;
    }
}

/**widg mod模組-----------------------------------**/
/*漢堡式區*/
.navbar.no-gutters .ham-menu {
    /*padding-left: 1rem;*/
    text-align: center;
}

.ham-menu .storelogo img {
    max-width: 40vw;
}

@media (max-width: 767px) {
    .navbar.no-gutters .ham-menu {
        border-bottom: 2px solid #eee;
    }
}

/*館別選單-搜尋*/
.menu-store .input-group .input-group-append .btn {
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
    background-color: #fff;
    border-color: #ced4da;
    border-left: none;
}

/*全站上方搜尋bar*/
.wg.form-search.top .input-group .keyword {
    border-right: none;
}

.wg.form-search.top .input-group .btn-icon {
    background-color: #fff;
    border: 1px solid #ccc;
    border-left: none;
    border-top-right-radius: .25rem;
    border-bottom-right-radius: .25rem;
}

.wg.form-search.top .remove {
    position: relative;
}

.wg.form-search.top .remove .btn-icon {
    position: absolute;
    top: 50%;
    right: 3.3rem;
    z-index: 50;
    transform: translate(0, -50%);
    border: none;
    border-radius: 2rem;
    padding: 0.2rem 0.45rem;
}

.wg.form-search.top .remove .btn-icon:hover {
    background-color: #666;
    color: #fff;
}

.wg.form-search.top .input-group .btn-icon:hover .icon {
    opacity: 0.5;
}

@media (max-width: 767px) {
    .wg.form-search.top {
        padding: 1rem;
    }
}

/* 上方搜尋 auto-complete 搜尋關鍵字顯示提示項目*/
ul.search-keyword-list {
    z-index: 1000;
    font-family: "Microsoft JhengHei";
    font-size: .8rem;
    text-align: left;
    border: none !important;
    width: calc(100% - 2px) !important;
    margin: 0 1px;
    max-height: 50vh;
    overflow-y: auto;
}

ul.search-keyword-list .search-keyword-item {
    border: none;
    border-radius: 0;
    padding: .7rem 1rem;
    background-color: #eee;
}

ul.search-keyword-list .badge-class {
    display: inline-block;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .25rem;
    padding-right: .4em;
    margin-right: .5rem;
}

/*館別列導覽區*/
.menu-store {
    position: relative;
    padding: 0;
}

/*.menu-store .level1 {*/
/*background-color: #f7f7f7;*/
/*}*/
/*.menu-store .level1 .level1 {*/
/*background-color: #eee;*/
/*}*/
.menu-store .nav-item .nav-link {
    position: relative;
}

.menu-store .nav-item .nav-link[aria-expanded]:after {
    font-family: FontAwesome;
    position: absolute;
    top: 50%;
    right: 1rem;
    display: block;
    transform: translate(0, -50%);
}

.menu-store .nav-item .nav-link[aria-expanded="false"]:after {
    content: " \f0da";
}

.menu-store .nav-item .nav-link[aria-expanded="true"]:after {
    content: " \f0d7";
}

@media (min-width: 768px) {
    .menu-store > .navbar-nav {
        -ms-justify-content: center;
        justify-content: center;
    }

    .menu-store .level1, .menu-store .level1 .level1 {
        background-color: #fff;
    }

    .menu-store .nav-item:hover:after {
        width: calc(100% - 2rem);
    }

    .menu-store .nav-item:after {
        content: "";
        display: block;
        transition: 0.5s;
        width: 0;
        height: 3px;
        background-color: #000;
        margin-left: 1rem;
    }

    .menu-store .nav-item .nav-link[aria-expanded]:after {
        right: 0;
    }

    .menu-store .bn-store + .level1 {
        order: -1;
        text-align: left;
    }

    .menu-store .bn-store + .level1 .menu-vhbn {
        width: 100%;
        position: relative;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }

    .menu-store .bn-store + .level1 .menu-vhbn .nav-item {
        -ms-flex: 0 0 33.333333%;
        flex: 0 0 33.333333%;
        max-width: 33.333333%;
    }
}

/*頁面標頭購物車*/
.wg.shopping-car {
    margin: 0 0.5rem;
}

/*全版full搜尋功能模組*/
.searchbar .form-control {
    border: none;
}

.searchbar .input-group {
    border: 1px solid #314f8d;
    background: #FFF;
}

.searchbar.full {
    position: relative;
}

.wg.searchbar.full {
    /*height: 25vw;*/
}

.wg.searchbar.full .content {
    /*position: relative;
    top: 50%;
    transform: translate(0 , -50%);
    padding-left: 1rem;
    padding-right: 1rem;*/
}

.wg.searchbar.full.bg {
    /*background-repeat: no-repeat;
    background-size: 100% auto;
    -webkit-background-size: 100% auto;
    -moz-background-size: 100% auto;
    -o-background-size: 100% auto;*/
}

.searchbar.full .underbg-bg ~ .content {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 90%;
    transform: translate(-50%, -50%);
}

.searchbar.full .underbg-bg ~ .content .input-group {
    border: none;
    background: inherit;
}

@media (max-width: 767px) {
    .searchbar.full .underbg-bg ~ .content {
        min-width: 90%;
    }
}

/* 進階搜尋選單 */
/*漢堡區*/
.wg.form-search.top .btn.advanced {
    text-align: left;
}

.wg.form-search.top .btn.advanced .oi {
    padding-left: .5rem;
}

.wg.form-search.top .wg.form-search.advanced {
    margin-left: -15px;
    margin-right: -15px;
}

/*搜尋區*/
.wg.form-search.advanced {
    background-color: #eee;
    padding: 1rem 0;
}

.wg.form-search.advanced .box.list.collapsed > *:not(.title-text) {
    display: none;
}

.wg.form-search.advanced .btnbar .btn {
    padding: .1rem .6rem 0;
    background-color: transparent;
}

.wg.form-search.advanced .btn-text {
    border: 1px solid #ccc;
}

.wg.form-search.advanced .btn-text:hover {
    opacity: .7;
}

.wg.form-search.advanced .btn-text.search {
    background-color: #fff;
}

.wg.form-search.advanced .box {
    padding: 1rem 0;
}

.wg.form-search.advanced .box + .box {
    border-top: 1px solid #ccc;
}

.wg.form-search.advanced .box.btnbar {
    margin-bottom: 0;
}

.wg.form-search.advanced .box > div, .wg.form-search.advanced .title-text {
    padding: 0 1rem;
}

.wg.form-search.advanced .item {
    padding: .5rem 1rem;
}

.wg.form-search.advanced .item:hover {
    background-color: rgba(187, 187, 187, .5);
}

.wg.form-search.advanced .item .btn {
    padding: 0 .5rem;
    max-width: 28px;
    border: none;
    position: absolute;
    top: 1px;
    bottom: 1px;
    right: 0;
}

.wg.form-search.advanced .item .btn:hover {
    background-color: #eee;
}

.wg.form-search.advanced .item .form-check-label {
    width: calc(100% - 28px);
    cursor: pointer;
}

.wg.form-search.advanced .level-2 {
    padding-left: 3px;
    background-color: rgba(187, 187, 187, .5);
}

.wg.form-search.advanced .more {
    color: #666;
    border-radius: 0;
    margin-top: 1rem;
    margin-bottom: -1rem;
    height: 2rem;
    line-height: 2;
}

.wg.form-search.advanced .more:hover {
    background-color: rgba(204, 204, 204, .5);
}

.wg.form-search.advanced .more .oi {
    padding-left: .5rem;
}

.wg.form-search.advanced ul.show-5-item > li.item:not(.input) {
    display: none;
}

.wg.form-search.advanced ul.show-5-item > li.item:not(.input):nth-child(-n + 5) {
    display: block;
}

.toggle-first-on > *:not(:first-of-type) {
    display: none;
}

.toggle-first-off > *:first-child {
    display: none;
}

.toggle-last-on > *:not(:last-child) {
    display: none;
}

.toggle-last-off > *:last-child {
    display: none;
}

@media (min-width: 768px) {
    .wg.form-search.advanced .item {
        padding: 0 1rem;
    }

    .wg.form-search.advanced .level-2 {
        background-color: inherit;
    }

    .wg.form-search.advanced .more {
        margin-top: .5rem;
        height: auto;
        line-height: normal;
    }
}

/*作者簡介輪播模組*/
.content.full {
    width: 100%;
}

.wg.content.content-slider.author .img {
    min-height: 55vh;
    max-height: 400px;
}

.wg.content.content-slider.author .edit {
    height: 300px;
    overflow: hidden;
}

.wg.content-slider .carousel-control-next, .wg.content-slider .carousel-control-prev {
    width: 5%;
}

.wg.content.content-slider.author .point .control-w {
    padding-top: 3rem;
}

.wg.content.content-slider.author .position-absolute {
    z-index: 1;
    margin-left: 1rem;
}

.wg.content.content-slider.author .point .title-text {
    font-weight: bold;
    color: #666;
}

.wg.content.content-slider.author .list-img-item {
    width: 90px;
    height: 90px;
    text-align: center;
    vertical-align: middle;
    margin-bottom: 0.5rem;
    margin-right: 0.45rem;
}

.wg.content.content-slider.author .border {
    border: 2px solid #fff !important;
    border-radius: 0.4rem;
    overflow: hidden;
}

.wg.content.content-slider.author .border:before {
    content: "";
    display: inline-block;
    vertical-align: middle;
    width: 0;
    height: 100%;
}

.wg.content.content-slider.author .more .btn-text {
    background-color: #fff;
    border-radius: 0.4rem;
    font-size: 0.9rem;
    line-height: 5;
    height: 100%;
}

.wg.content.content-slider.author .point small {
    margin-bottom: 1rem;
    display: block;
}

.wg.content.content-slider.author .moreinfo {
    border-radius: 0.45rem;
    color: #fff;
}

.wg.content.content-slider.author .moreinfo > div {
    min-height: 4rem;
    padding: 1.5rem 1rem 1rem;
}

.wg.content.content-slider.author .moreinfo .right {
    background-color: #fff;
}

.wg.content.content-slider.author .moreinfo .btn-text {
    background-color: #fff;
    font-size: 0.8rem;
    color: #6c757d;
}

.wg.content.content-slider.author .moreinfo .btn-text:hover {
    color: #000;
}

@media (min-width: 768px) {
    .wg.content.content-slider.author .moreinfo {
        position: relative;
        top: -4.5rem;
        border-radius: 0.45rem;
        color: #fff;
        height: 360px;
        overflow: hidden;
    }
}

/*h1模組*/
.mod-prom-h1 .group-box {
    border: 1px solid #ccc;
    padding: 0;
}

.mod-prom-h1 .list-box {
    border-top: 1px solid #ccc;
}

.mod-prom-h1 .list-box .pic:nth-child(2) {
    border-left: 1px dotted #ccc;
    border-right: 1px dotted #ccc;
}

.mod-prom-h1 .pic.active {
    border: 1px dotted #ccc;
    text-align: center;
}

@media (min-width: 768px) {
    .mod-prom-h1 .group-box {
        margin-right: 15px;
        margin-left: 15px;
    }
}

/*商品加購滑動模組*/
@media (min-width: 768px) {
    .wg.list-prod.add .prod-box + .prod-box {
        border-left: 1px solid #eee;
    }
}

/*評鑑評分模組*/
.wg.rating .rating {
    display: block;
    margin-bottom: 0.5rem;
}

.wg.rating .titlebar {
    color: #666;
}

.wg.rating .btnbar .btn-text {
    background-color: #fff;
    border: 1px solid #f78a76;
    color: #f78a76;
}

.wg.rating .btnbar .btn-text:hover {
    border-width: 2px;
    margin: -1px;
}

.wg.rating .data-title {
    border: none;
    color: #666;
}

.wg.rating .data-title .number {
    padding-left: 0.5rem;
}

.wg.rating .data-grid {
    padding: 1rem 1.5rem 0;
}

.wg.rating .info-rating, .wg.rating .review_share {
    color: #666;
}

.wg.rating .list-blog .list-inline {
    display: inline-block;
}

.wg.rating .list-blog .list-inline-item {
    padding-top: 0;
}

@media (max-width: 767px) {
    .wg.rating {
        padding: 0;
    }
}

/*Star Rating評價*/
.star-rating {
    unicode-bidi: bidi-override;
    color: #eee;
    font-size: 0;
    height: 25px;
    margin: 0;
    position: relative;
    display: table;
    padding: 0;
    text-shadow: 0px 1px 0 #ccc;
}

.star-rating span {
    padding: 2px;
    font-size: 20px;
}

.star-rating-top {
    color: #FFD700;
    padding: 0;
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}

.star-rating-bottom {
    padding: 0;
    display: block;
    z-index: 0;
}

.star .icon-star-off, .star .icon-star-on {
    /*background-size: contain;*/
    /*background-position: left top;*/
}

.star .icon-star-off {
    /*width: 80px;*/
}

.star .icon-star-on {
    /*display: block;*/
}

/*追蹤*/
.prod-box .track {
    /*position: absolute;*/
    /*right: 0;*/
}

/*欄式廣告模組共用*/
@media (min-width: 768px) {
    .wg.bn.bn-col-4 picture, .wg.bn.bn-col-3 picture {
        overflow: hidden;
        display: block;
    }

    .wg.bn.bn-col-4 .image-link img:hover, .wg.bn.bn-col-3 .image-link img:hover {
        /*-webkit-animation: bnhover 1s 1;!* Safari 4.0 - 8.0 *!*/
        /*animation: bnhover 1s 1;*/
        transition: 1s;
        transform: scale(1.02);
    }
}

/* Safari 4.0 - 8.0 */
@-webkit-keyframes bnhover {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

/* Standard syntax */
@keyframes bnhover {
    0% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.03);
    }
    100% {
        transform: scale(1);
    }
}

/*圖文廣告-區塊交疊廣告*/
.wg.overlap {
    position: relative;
    height: auto !important;
    padding-bottom: 1rem;
}

.wg.overlap .text-overlap {
    position: absolute;
    bottom: -1rem;
    left: 1rem;
    right: 1rem;
    z-index: 1;
    background-color: #fff;
    border: 1px solid #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.wg.bn.bn-text {
    border: 1px solid #ddd;
    border-radius: .25rem;
}

.wg.bn.bn-text .image-link img {
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
}

.wg.bn.bn-text .info {
    padding: .5rem 1rem;
    max-height: 45%;
    overflow: hidden;
}

.wg.overlap .text-overlap .edit {
    margin-bottom: .5rem;
    padding: .5rem 0;
}

.wg.bn.bn-text .info .btnbar {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: .5rem 1rem;
    background-color: #fff;
    margin-bottom: 0;
    text-align: left;
}

/*原圖不裁切廣告*/
.wg.bn.bn-col-no-crop > div {
    padding: 0;
}

/*一欄式廣告模組*/
.wg.bn.bn-col-12 {
    height: 60vh;
    overflow: hidden;
    border: 1px solid #f7f7f7;
}

.wg.bn.bn-col-12 .image-link {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
}

/*一欄式廣告模組-視差*/
.wg.bn.bn-col-12.parallax-bg {
    height: 60vh;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.wg.bn.bn-col-12.parallax-bg .info {
    position: absolute;
    left: 60%;
    top: 50%;
    padding-right: 2rem;
    text-align: center;
}

.wg.bn.bn-col-12.parallax-bg .title-text {
    font-weight: 500;
}

.wg.bn.bn-col-12.parallax-bg .image-link {
    display: none;
}

@media only screen and (max-device-width: 1366px) {
    .wg.bn.bn-col-12.parallax-bg {
        background-attachment: scroll; /* 手機平板有些不支援 */
    }

    .wg.bn.bn-col-12.parallax-bg .info {
        width: 100%;
        left: 0;
        padding-left: 2rem;
    }
}

/*二欄式廣告模組*/
.wg.bn.bn-col-6 > div {
    padding-left: 5%;
    padding-right: 5%;
}

@media (max-width: 767px) {
    .wg.bn.bn-col-6 > div {
        margin-bottom: .5rem;
    }
}

@media (min-width: 768px) {
    .wg.bn.bn-col-6 > div:nth-of-type(2) ~ div {
        padding-top: 1rem;
    }
}

/*三欄式廣告模組*/
.wg.bn.bn-col-4 {
    background-color: #f7f7f7;
    padding: 3rem 1rem;
}

@media (max-width: 767px) {
    .wg.bn.bn-col-4 > div + div {
        padding-top: 0.5rem;
    }
}

@media (min-width: 767px) {
    .wg.bn.bn-col-4 > div {
        padding-left: 2%;
        padding-right: 2%;
    }
}

/*四欄式廣告模組*/
.wg.bn.bn-col-3 {
    background-color: #f7f7f7;
    padding: 2rem 1rem;
}

.wg.bn.bn-col-3.focus-box .info {
    position: absolute;
    z-index: 1;
    bottom: 0;
    left: 15px;
    right: 15px;
    height: 60px;
    background-color: rgba(102, 102, 102, 0.2);
    padding: 0.5rem 1rem;
}

.wg.bn.bn-col-3.focus-box .info .title-text {
    text-align: center;
    font-size: 1.1rem;
    line-height: 2.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wg.bn.bn-col-3.focus-box > div:hover .info {
    background-color: #0009;
}

.wg.bn.bn-col-3.focus-box > div:hover .title-text {
    color: #fff;
}

@media (max-width: 767px) {
    .wg.bn.bn-col-3.focus-box > div + div {
        padding-top: 0.5rem;
    }
}

/*置頂廣告模組*/
.wg.bn.bn-fixed.top {
    position: relative;
    margin-top: -0.5rem;
}

.wg.bn.bn-fixed.top .bn-edit {
    padding: 0.5rem;
    font-size: 0.9rem;
}

.wg.bn.bn-fixed.top .carousel-indicators, .wg.bn.bn-fixed.top .carousel-control-prev, .wg.bn.bn-fixed.top .carousel-control-next {
    display: none;
}

.wg.bn.bn-fixed.top .close {
    position: absolute;
    top: 50%;
    right: 1%;
    transform: translate(0, -50%);
    font-size: 1rem;
}

/*頁籤輪播式廣告模組*/
.carousel-inner.list-slide {
    overflow: initial;
    overflow: inherit;
}

.carousel-inner.list-slide .list-tagbn {
    position: initial;
    position: inherit;
    margin: 0;
}

/*頁籤輪播式廣告模組-水平頁籤*/
.carousel-inner.list-slide.horizontal .list-tagbn {
    border-bottom: 1px solid #eee;
}

.carousel-inner.list-slide.horizontal .list-item {
    max-width: 20%;
}

/*文字*/
.carousel-inner.list-slide.horizontal .bn-title .text {
    padding: 1rem;
    margin: 0;
    position: relative;
    top: 50%;
    transform: translate(0, -50%);
}

.carousel-inner.list-slide.horizontal .bn-title.active {
    color: #f78a76;
    border-top: 4px solid #f78a76;
}

.carousel-inner.list-slide.horizontal .bn-title.active .text {
    top: calc(50% - 0.1rem);
}

/*圖片*/
.carousel-inner.list-slide.horizontal .bn-img.active img {
    width: calc(100% - 1rem) !important;
    margin: 0.45rem auto 0;
    opacity: 0.7;
}

/*頁籤輪播式廣告模組-垂直頁籤*/
.carousel-inner.list-slide.vertical {
    position: absolute;
    top: 50%;
    right: 5%;
    z-index: 15;
    transform: translate(0, -50%);
    width: 16.666667%;
    box-shadow: 1px 1px 8px 0px rgba(162, 162, 162, 0.7);
}

.carousel-inner.list-slide.vertical .list-tagbn {
    display: block;
}

.carousel-inner.list-slide.vertical .list-item.active {
    color: #f78a76;
    border: 2px solid #f78a76;
}

/*文字*/
.carousel-inner.list-slide.vertical .bn-title .text {
    background-color: #fff;
    padding: 1rem;
    margin: 0;
}

/*圖片*/
.carousel-inner.list-slide.vertical .bn-img.active img {
    opacity: 0.7;
}

.carousel-inner.list-slide.vertical .list-control-prev, .carousel-inner.list-slide.vertical .list-control-next {
    position: absolute;
    width: 100%;
    text-align: center;
}

.carousel-inner.list-slide.vertical .list-control-next {
    bottom: -1.5rem;
}

.carousel-inner.list-slide.vertical .list-control-prev {
    top: -1.5rem;
}

/*組合輪播式廣告模組*/
.wg.bn .title-bar {
    text-align: center;
}

.wg.bn.bn-groupcarousel {
    position: relative;
}

.list-slide .change-other {
    visibility: hidden;
    position: absolute;
    top: 0;
    left: 0;
}

.list-slide .list-item:hover .change-main {
    visibility: hidden;
}

.list-slide .list-item:hover .change-other {
    visibility: initial;
    visibility: inherit;
}

@media (min-width: 768px) {
    .list-slide .list-bn {
        margin-left: 15px;
        margin-right: 15px;
    }

    .list-slide .list-bn .list-item img {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /*有背景*/
    .bn-groupcarousel .underbg-bg .bn-title {
        position: absolute;
        top: 15%;
        left: 0;
        right: 0;
        color: #fff;
    }

    .bn-groupcarousel .underbg-bg ~ .carousel {
        position: absolute;
        top: 50%;
        width: 100%;
    }
}

/*組合輪播式廣告模組-N列N欄*/
.wg.bn.bn-groupcarousel.custom .control-bar {
    text-align: right;
}

.wg.bn.bn-groupcarousel.custom .control-bar > a {
    position: initial !important;
    position: inherit !important;
    display: inline-block;
    width: 1.5rem;
}

.wg.bn.bn-groupcarousel.custom .list-slide .list-bn {
    margin-left: 0;
    margin-right: 0;
}

.wg.bn.bn-groupcarousel.custom .list-item {
    margin-bottom: 1rem;
}

/*流動式廣告模組*/
.wg.bn.bn-flow .list-float {
    text-align: center;
}

.wg.bn.bn-flow .list-item {
    display: inline-block;
}

.wg.bn.bn-flow .list-item:first-of-type {
    float: left;
}

/*組合式廣告模組-1+2N列*/
.wg.bn.bn-groupcarousel.oneandtwo {
    background-color: #f7f7f7;
    padding: 1rem;
}

.wg.bn.bn-groupcarousel.oneandtwo .list-item {
    padding-left: 6px;
    padding-right: 6px;
    margin-bottom: 12px;
}

.bn-title.bn-float {
    position: absolute;
    padding: 1.5rem 1rem 1rem;
    background-color: rgba(255, 255, 255, 0.8);
}

.big .bn-title.bn-float {
    top: 15%;
    width: 65%;
}

.small .bn-title.bn-float {
    left: 50%;
    bottom: 0;
    width: 80%;
    transform: translate(-50%, 0);
    text-align: center;
}

@media (min-width: 768px) {
    .wg.bn.bn-groupcarousel.oneandtwo {
        padding: 2% 3% 3%;
    }
}

/*熱門關鍵字*/
.wg.Keyp.Keyp-text {
    max-width: 800px;
    margin: 4rem auto;
}

.wg.Keyp.Keyp-text .key-item {
    margin: 0 0.25rem 0.8rem;
}

.wg.Keyp.Keyp-text .btn-text {
    border: 1px solid #eee;
}

.wg.Keyp.Keyp-text .btn-text:hover {
    border-color: #000;
    background-color: #fff;
    color: #000;
}

/*相片輪播式模組-單列4個*/
.wg.album .title-bar {
    text-align: center;
    margin-bottom: 1.5rem;
}

.wg.album .title-bar .title-text {
    font-weight: 500;
}

.wg.album .list-photo .photo-img {
    max-height: 50vh;
    overflow: hidden;
}

.wg.album .list-photo .box-center {
    padding: 0 0.5rem 0.5rem;
}

.wg.album .list-photo .middle {
    background-color: #f7f7f7;
}

@media (min-width: 768px) {
    .wg.album .list-photo a {
        margin-bottom: 0;
    }
}

/*相簿輪播式模組-N列N欄*/
.wg.album.album-groupcarousel.custom .title-bar .text {
    margin-bottom: 0;
}

.wg.album.album-groupcarousel.custom .title-bar .control-bar > a {
    position: initial !important;
    position: inherit !important;
    display: inline-block;
    width: 1.5rem;
}

.wg.album.album-groupcarousel.custom .list-item {
    margin-bottom: 1rem;
}

.list-album .album-img {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.wg.album.album-groupcarousel.custom .content-box {
    overflow: hidden;
    position: relative;
}

.wg.album.album-groupcarousel.custom .img-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding: 1.25rem;
    background-color: rgba(0, 0, 0, 0.7);
    color: #fff;
    transition: 1s;
}

.wg.album.album-groupcarousel.custom .hover:hover .img-overlay {
    opacity: 0;
}

/*瀑布流模組*/
.wg.masonrylayout {
    padding: 2rem 1rem 0;
    margin-bottom: 0 !important;
}

.wg.masonrylayout .hover:hover {
    box-shadow: 0px 0px 6px 0 #999;
}

/*瀑布流模組-相片*/
.wg.album.photo-columns.masonrylayout {
    background-color: #f7f7f7;
}

/*瀑布流模組-文章*/
.wg.list.article-columns .btnbar.other {
    position: absolute;
    right: 0.75rem;
    top: 0;
    z-index: 1;
    padding-top: 85%;
    margin-bottom: 0;
}

.wg.list.article-columns .btnbar.other .btn-text {
    background-color: #f7f7f7b3;
    border: 1px solid #eee;
    font-size: 0.9rem;
}

.wg.list.article-columns .btnbar.other .btn-text:hover {
    background-color: #f7f7f7;
}

/*側邊浮動廣告global float left & right ad */
.wg.fixed-side {
    position: fixed;
    z-index: 1000;
    transition: .5s;
    top: 20vmin;
    left: auto;
    bottom: auto;
    width: auto;
    max-width: 210px;
    overflow: hidden;
    background-color: rgba(255, 255, 255, .1);
    border-radius: .25rem;
    box-shadow: 1px 1px 6px -2px black;
    transform: none;
}

.wg.fixed-side:hover {
    background-color: rgba(255, 255, 255, .9);
}

.wg.fixed-side.right {
    right: .5rem;
}

.wg.fixed-side.left {
    left: .5rem;
}

.wg.fixed-side.right .scrollbar {
    max-height: calc(100vh - 20vmin);
    overflow-y: auto;
}

.wg.fixed-side.right .scrollbar {
    padding-left: 21px;
}

.wg.fixed-side.left .scrollbar {
    padding-right: 21px;
}

.wg.fixed-side .item {
    max-width: 180px;
    overflow: hidden;
    text-align: center;
    margin: auto;
    padding-bottom: 1.2rem;
}

.wg.fixed-side .close {
    position: absolute;
    top: 0;
    height: 100%;
    width: 18px;
    text-align: center;
    display: table;
    background-color: rgba(204, 204, 204, .1);
}

.wg.fixed-side.right .close {
    left: 0;
    border-right: 1px solid #ccc;
}

.wg.fixed-side.left .close {
    right: 0;
    border-left: 1px solid #ccc;
}

.wg.fixed-side .close i {
    display: table-cell;
    vertical-align: middle;
    font-size: .9rem;
}

/* end global float left & right ad */
/**專屬頁面-----------------------------------**/
/*開通頁*/
.anzoo-open {
    background-image: url(//fs1.shop123.com.tw/center/upload/preset/anzoo_open_bg.jpg);
    background-size: cover;
    background-position: top;
    min-height: 80vh;
    margin-top: -1rem;
    margin-bottom: 0 !important;
    padding-top: 10vh;
}

.anzoo-open .form-open {
    background-color: rgba(255, 255, 255, 0.9);
    margin-bottom: 3rem;
}

.anzoo-open .note-block {
    text-align: center;
    padding-top: 1rem;
    text-shadow: 1px 1px 2px white;
}

.anzoo-open .btn-primary, .anzoo .btn-primary {
    background-color: #000;
    border: 1px solid #000;
}

.anzoo-open .btn-primary:hover, .anzoo .btn-primary:hover {
    background-color: #333;
    border: 1px solid #000;
}

.anzoo-open .text-link {
    color: #000;
    border-bottom: 1px solid #000;
}

.anzoo-open .text-link:hover {
    font-weight: bold;
}

.fancy-form.anzoo .title-text {
    font-weight: bold;
}

@media (max-width: 767px) {
    .anzoo .btn-primary {
        height: 38vw;
    }
}

@media (min-width: 768px) {
    .anzoo-open {
        padding-top: 15vh;
    }

    .anzoo-open .form-open {
        max-height: 500px;
    }
}

/*fancybox-開通調整*/
.fancy-form.open {
    padding: 0;
}

.fancy-form.open .title-text {
    padding-top: 2rem;
    margin-bottom: 3rem;
}

.fancy-form.open .image {
    padding-top: 1rem;
}

@media (max-width: 767px) {
    .fancy-form.open .image {
        max-width: 200px;
        margin: auto;
    }
}

@media (min-width: 768px) {
    .fancy-form.open {
        min-width: 560px;
        min-height: 460px;
        max-width: 35vw;
        max-height: 35vw;
    }
}

/*welcome頁面*/
.welcome-image {
    height: 100%;
    background-size: cover;
    background-position: center;
}

.welcom-text {
    position: fixed;
    bottom: 45px;
}

/*18禁頁面*/
.block-bg {
    text-align: center;
    width: 100vw;
    height: 100vh;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

.age-limit .title {
    font-weight: bold;
    margin-bottom: 1rem;
}

.age-limit .btn-text {
    background-color: #bb1222;
    color: #fff;
    width: 100px;
    height: 60px;
    font-size: 1.5rem;
}

.age-limit .btn-text:hover {
    background-color: #8c0f1b;
}

.age-limit .btn + .btn {
    margin-left: 1rem;
}

.age-limit .text-link {
    text-decoration: underline;
    padding: 0 0.2rem;
}

@media (max-width: 767px) {
    .age-limit .block-logo {
        position: fixed;
        top: 2rem;
        left: 8vw;
        right: 8vw;
    }

    .age-limit .title {
        font-size: 1.7rem;
        line-height: 1.2;
    }

    .age-limit p {
        text-align: left;
        position: fixed;
        bottom: 0;
        left: 8vw;
        right: 8vw;
    }
}

@media (min-width: 768px) {
    .age-limit .block-logo {
        margin-bottom: 3rem;
    }

    .age-limit .title {
        margin-bottom: 5rem;
    }

    .age-limit .btn-text {
        width: 200px;
    }

    .age-limit p {
        max-width: 415px;
        margin: auto;
    }
}

/*登入註冊頁*/
@media (max-width: 767px) {
    .form-login .btnbar-blog > div, .form-register .btnbar-blog > div {
        /*padding: 0 0.3rem;*/
        margin-bottom: 1rem;
    }

    .form-login .btnbar-blog .btn, .form-register .btnbar-blog .btn {
        /*height: 25vw;*/
        /*line-height: 1.5;*/
    }

    .form-login .btnbar-blog .btn-icon, .form-register .btnbar-blog .btn-icon {
        /*max-width: 25px;*/
    }

    /*暫時寫這 20181026之後要改寫*/
    .page-register .buttonbar.text-center .btn, .page-login .buttonbar.text-center .btn {
        display: block;
        width: 100% !important;
    }
}

@media (min-width: 768px) {
    .form-login .btnbar-blog .btn-icon, .form-register .btnbar-blog .btn-icon {
        position: absolute;
        left: 2rem;
        height: auto;
    }

    .page-login .tabs-pagetoggle .nav-link.active, .page-register .tabs-pagetoggle .nav-link.active {
        /*display: none;*/
    }

    .form-login .btnbar-blog .btn-icon, .form-register .btnbar-blog .btn-icon {
        max-width: 20px;
    }
}

/*商品明細頁*/
.product-basic {
    padding-top: 2.5rem;
    margin-bottom: 1rem;
}

.product-basic .info-rating {
    font-size: 0.9rem;
    color: #666;
}

.product-basic .info-rating .list-link {
    padding-left: 0;
    padding-right: 0;
}

.rating .voted {
    vertical-align: text-bottom;
}

.info-rating .number {
    padding-left: 0.5rem;
}

.product-basic .zoom-window {
    position: absolute;
    top: 0;
    left: 100%;
    z-index: 1;
    width: 40vw;
    height: 100%;
}

.small-pic .pic-item img {
    border: 2px solid #fff;
    cursor: unset;
}

.small-pic .pic-item:hover img {
    opacity: 0.7;
    border: 2px solid #999;
}

.small-pic .pic-item.active img {
    border: 2px solid #000;
}

.icon-blog {
    font-size: 0.9rem;
}

.icon-blog .blog-item {
    padding: 0.5rem 0.3rem;
}

.icon-blog .blog-item:hover {
    opacity: 0.7;
}

.product-basic .name-en {
    color: #666;
}

.product-basic .more {
    color: #f78a76;
}

.product-basic .main {
    margin-bottom: 1rem;
}

.product-basic .box-choosebuy {
    background-color: #f7f7f7;
    padding: 2rem;
    border-radius: .25rem;
    margin-bottom: 1rem;
}

.product-basic .context {
    margin-left: auto;
    margin-right: auto;
}

.product-basic .special-price {
    font-weight: bold;
    margin-bottom: 0;
}

.product-basic .original-price .context {
    text-decoration: line-through;
}

.page-product .amount .btn-icon {
    background-color: #000;
    color: #fff;
    border-radius: 0;
}

.product-basic .list-category.custom dl {
    background-color: #f7f7f7;
    padding: 1rem 2rem .5rem;
}

.page-product .thumbnail .carousel-indicators {
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    display: block;
    text-align: center;
}

.page-product .thumbnail .carousel-indicators .list-item {
    padding: 0rem 0.2rem 0rem 0.2rem;
}

.page-product .thumbnail .carousel-indicators::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 5px;
    background-color: #F5F5F5;
}

.page-product .thumbnail .carousel-indicators::-webkit-scrollbar {
    height: 5px;
    background-color: #F5F5F5;
}

.page-product .thumbnail .carousel-indicators::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #999;
}

.page-product .thumbnail .carousel-indicators .list-item {
    width: 20%;
    display: inline-block;
}

.product-basic .amount .input-text {
    border-radius: 0;
}

.product-basic .btnbar.shopping {
    padding-top: 2rem;
}

.btn-text.addcart {
    background-color: #FF4295;
    color: #fff;
    font-size: 0.9rem;
}

.btn-text.addcart:hover {
    background-color: #c73877;
}

.btn-text .icon {
    max-width: 20px;
    height: auto;
    margin-right: 0.4rem;
}

.data-item.collapse-item {
    font-size: .9rem;
}

.collapse-item .title-text:hover {
    background-color: #eee;
}

.collapse-item .title-text.collapsed {
    background-color: #fff;
    border-bottom: 1px solid #eee;
}

.collapse-item .title-text, .collapse-item .show {
    background-color: #f7f7f7;
    border-radius: 0;
    padding: .5rem 1rem !important;
}

.collapse-item .show {
    line-height: 1;
    color: #666;
}

.explain-tabs.product {
    background-color: #f7f7f7;
    margin: 0 -15px 1rem;
}

.explain-tabs.product .full-tabs {
    background-color: #ccc;
}

.explain-tabs.product .nav-tabs {
    padding: 0;
    border: none;
}

.explain-tabs.product .nav-link {
    padding: 1rem 2rem;
    border: none;
}

.explain-tabs.product .nav-link.active {
    background-color: #f7f7f7;
    border: none;
    border-radius: 0;
    color: #666;
}

.explain-tabs.product .nav-link.active:after, .explain-tabs.product .nav-link:hover:after {
    content: "";
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000;
}

.explain-tabs.product .tab-content {
    border: none;
    background-color: transparent;
    padding: 2rem;
}

.box-fixed {
    background-color: #fff;
    padding: 0.8rem 0;
    box-shadow: 0px -2px 4px 0px #ccc;
    margin-left: 0;
    margin-right: 0;
}

.box-fixed .amount .btn-icon {
    /*background-color: #fff;*/
    /*color: #666;*/
}

.box-fixed .btn-img.addcart {
    background-color: #f78a76;
    border: 1px solid #fff;
    width: 38px;
    height: 38px;
    display: table-cell;
}

.box-fixed .btn-img.addcart img {
    max-height: 30px;
}

@media (max-width: 767px) {
    .explain-tabs.product .nav-item {
        width: 25%;
    }

    .explain-tabs.product .nav-link {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        text-align: center;
    }

    .box-fixed > div {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }

    .box-fixed .special-price {
        font-size: 1.2rem;
    }

    .box-fixed .form-control {
        font-size: 0.9rem;
        padding-left: 0.3rem;
        padding-right: 0.6rem;
    }

    .box-fixed .amount .btn-icon {
        padding-left: 0.2rem;
        padding-right: 0.2rem;
    }
}

@media (min-width: 768px) {
    .box-fixed {
        padding: 1.5rem 0;
    }
}

/*問券列表*/
.list-horizontal .questionnaire-box {
    border-bottom: 1px solid #eee;
    margin-bottom: 1rem;
    border-radius: .25rem;
    padding: 0.75rem;
}

.list-horizontal .questionnaire-box:hover {
    background-color: #f7f7f7;
}

.list-horizontal .questionnaire-box:after {
    content: "";
    display: block;
    clear: both;
}

.list-horizontal .tag { /*標籤圖當主圖放左側*/
    display: inline-block;
    float: left;
}

.list-horizontal .tag .img-outer {
    width: 6em;
    height: 6em;
    border-radius: 50%;
    background-color: #FFF;
    padding: 0.5em;
    display: inline-block;
}

.list-horizontal .tag .img-outer img {
    width: 5em;
    height: 5em;
    border-radius: 50%;
    box-shadow: 0 0 0.5em #999;
}

.list-horizontal .info-box {
    overflow: hidden;
}

.list-grid .info-box {
    padding: 0 0 1.25rem;
}

.list-grid .questionnaire-box .tag {
    margin-top: -3.25rem;
    position: relative;
    z-index: 2;
}

.list-grid .questionnaire-box .tag .img-outer {
    width: 6rem;
    height: 6rem;
    border-radius: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    padding: 0.5rem;
    display: inline-block;
}

.list-grid .questionnaire-box .tag img {
    border-radius: 100%;
    box-shadow: 0 0 0.5em #999;
}

.list-topics-item .breadcrumb {
    /*background-color: #fff;*/
    /*padding: 0;*/
    /*margin-bottom: 0;*/
    /*font-size: 0.9rem;*/
}

.questionnaire-box .title a {
    color: #000;
}

.questionnaire-box .title:hover a {
    color: #666;
}

.questionnaire-box .title {
    margin-left: -0.2rem;
}

/*問卷頁*/
.page-survey {
    min-height: 60vh;
}

.page-survey .tab-content, .page-survey .questionnaire-text-bar, .page-survey .nav-pills {
    max-width: 800px;
    margin: auto;
}

.page-survey .tab-content .list-group-item.title-text {
    border: 0;
    text-align: center;
    margin-bottom: 1.5rem;
}

.page-survey .tab-content .list-group-item {
    margin-bottom: 0.5rem;
    border-radius: 0;
    padding-top: 0;
    padding-bottom: 0;
}

.page-survey .tab-content h4 {
    line-height: 1.5;
    white-space: normal;
}

@media (max-width: 767px) {
    .page-survey .tab-content h4 {
        text-align: left;
    }
}

.page-survey .tab-content .list-group-item .form-check-input {
    margin-top: 1.2rem;
}

.page-survey .tab-content .list-group-item label {
    cursor: pointer;
    padding: .75rem 1.25rem;
    margin: 0;
}

.page-survey .tab-content .list-group-item .invalid-feedback {
    padding-left: 1.25rem;
    padding-bottom: 0.75rem;
}

.page-survey .tab-content .list-group-item.textarea {
    border: 0;
}

.page-survey .pagination {
    position: relative;
    min-height: 2rem;
}

.page-survey .control-prev, .page-survey .control-next {
    position: absolute;
    width: 45%;
}

.page-survey .control-next {
    right: 0;
    text-align: right;
}

.page-survey .page-item.confirm {
    position: absolute;
    right: 0;
}

.page-survey.result .card {
    margin: auto;
    max-width: 800px;
    margin-bottom: 1.5rem;
}

.page-survey.result .list-group .card-title {
    font-weight: bold;
}

.page-survey.result .card .active {
    background-color: #3695eb;
    border-color: #3695eb;
}
.page-survey .question-tab.tab-pane .list-group-item h4 {
    margin-bottom: 0;
}
.page-survey .content .question-tab.tab-pane .list-group-item {
    padding: .5rem 1rem;
    line-height: 1;
}
.page-survey .content .question-tab.tab-pane .list-group-item:not(.title-text):hover {
    border: 1px solid #ccc;
    background-color: #f7f7f7;
}

/*背景滿版-暫*/
.bg-full ~ .content .list-group-item {
    background-color: #ffffff29;
}

.bg-full ~ .content .list-group-item.title-text {
    background-color: #0000;
}

.bg-full ~ .content .tab-pane .list-group-item:not(.title-text):hover {
    background-color: #ffffff8a;
    border: 1px solid #fff;
}

.bg-full ~ .content .tab-pane .list-group-item.textarea:hover {
    background-color: transparent;
    border: none;
}

.bg-full {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: -1;
}

.bg-full .carousel-inner, .bg-full .item, .bg-full .image-bg {
    height: 100%;
}

.bg-full .image-bg {
    background-size: cover;
    background-position: center;
}

/*會員中心標頭歡迎文字*/
.member-welcome > div {
    display: inline-block;
    vertical-align: middle;
}

.member-img {
    width: 28px;
    height: 28px;
    border: 1px solid #fff;
    border-radius: 100%;
    overflow: hidden;
    background-color: #f7f7f7;
    transition: 1s;
}

.member-img:hover {
    background-color: #ccc;
}

.wg.btnlist-link.header .member-welcome .nav-link {
    padding: 0;
}

.wg.btnlist-link.header .member-welcome .member-name .nav-link {
    padding: .5rem 0;
}

@media (max-width: 767px) {
    .member-welcome {
        margin-top: .5rem;
    }
}

@media (min-width: 992px) {
    .member-welcome {
        margin-top: 0;
    }
}

/*會員中心*/
.menu-member .data-list {
    padding: 20px 0;
    margin-bottom: 1rem;
    border-bottom: 1px solid #000;
}

.menu-member .data-list .total, .menu-member .data-list .caption {
    display: block;
    text-align: center;
    line-height: 1.5;
}

.menu-member .data-list .data-profit .total {
    color: #f00;
}

.menu-member .menu-list .row {
    margin-bottom: 1rem;
}

.menu-member .menu-list .row + .row {
    border-top: 4px solid #eee;
}

.menu-list .title-item {
    margin-top: 1rem;
    margin-bottom: 1rem;
}

.menu-list .content-item {
    /*margin-bottom: 1rem;*/
    /*text-align: center;*/
    white-space: nowrap;
}

.menu-list .title-item .caption {
    padding-left: 6px;
    padding-right: 6px;
}

.menu-list .title-item small {
    display: block;
    padding-top: 10px;
}

.menu-list .content-item p {
    font-size: 0.9rem;
}
@media (max-width:767px) {
    .titlebar.page-member,.titlebar.page-medical,.titlebar.page-orderslist {
        background-color: #eee;
        padding-top: .5rem;
        margin-bottom: 0;
    }
    .menu-list .list-unstyled.list {
        margin-bottom: 0;
    }
}
@media (min-width: 768px) {
    .menu-list .title-item small {
        display: inline-block;
        padding-left: 10px;
    }
}

/*會員中心內頁*/
.form-member .menu-list .content-item, .member-info .menu-list .content-item {
    text-align: left;
}

.form-member .menu-list .content-item.active, .member-info .menu-list .content-item.active {
    font-weight: bolder;
    color: #000;
    background-color: #F0F0F0;
}

.form-member .menu-list .block-list, .member-info .menu-list .block-list {
    background-color: #f7f7f7;
}

.form-member .menu-list .title-item, .member-info .menu-list .title-item {
    border-bottom: 4px solid #eee;
}

.member-info .form-row + .data-list {
    margin-top: 1.5rem !important;
}

@media (max-width: 767px) {
    .menu-list .block-list .title-item, .menu-list .block-list .content-item {
        margin-left: 15px;
        margin-right: 15px;
    }
}

/*會員中心訂單列表*/
.title-bar .point {
    margin-left: 0.5rem;
    color: #f00;
}

.title-bar .number {
    padding: 0 0.2rem;
}
/*訂單明細的aiboneage報告專區*/
.ai-boneage .btn-bar {
    padding: .5rem;
    margin-bottom: 0;
}
.btn-create, .btn-save {
    margin-bottom: .5rem;
}
.btn-bar .btn {
    margin-bottom: .5rem;
}
/*會員資料*/
@media (max-width: 767px) {
    .member-info .btnbar-blog {
        margin-bottom: 2rem;
    }

    .member-info .btnbar-blog .binding {
        color: #666;
        font-size: .9rem;
        display: block;
        margin-top: .5rem;
    }
}

@media (min-width: 768px) {
    .member-info .btnbar-blog span {
        display: inline-block !important;
    }
}

/*結帳頁*/
.titlebar.checkout {
    margin-top: 2rem;
}

.data-list .data-grid.number .original-price {
    text-decoration: line-through;
    color: #999;
}

.data-list .data-grid.item-other .btn-img {
    background-color: transparent;
}

.block-data.payment .col-form-label, .block-data.payment .form-control-plaintext {
    font-size: 1.2rem;
}

.block-data.payment .form-control-plaintext {
    text-align: right;
}

.block-data.payment .btn-text, .fancy-form.checkout .btn-text {
    background-color: #FF4295;
    color: #fff;
}

@media (max-width: 767px) {
}

/*刷卡成功頁*/
.page-checkout.complete .data-list {
    height: calc(100% - 2rem);
}
.block-data.payment-details .pay-amount .form-control-plaintext {
    color: #f00;
}

.block-data.next .btnbar {
    text-align: left;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    margin-bottom: 0;
}

.block-data .btnbar .linkblock-full {
    padding-top: calc(.375rem + 1px);
    padding-bottom: calc(1.375rem + 1px);
}

.block-data .edit {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.block-data .remind {
    color: #666;
}

/*專欄總覽按鈕及選單調整*/
.menu-Column {
    position: relative;
    padding-left: 0;
    padding-right: 0;
}

.col-overview .dropdown-toggle {
    position: relative;
    z-index: 1001;
}

@media (min-width: 768px) {
    .menu-Column .group-wg + .level1 {
        order: -1;
        text-align: left;
    }
}

/*footer 版權*/
.copyright {
    padding: 1rem 1rem 0rem 1rem !important;
    background-color: #fff;
}

.copyright.shop123 {
    padding: 1rem !important;
    background-color: #fff;
    text-align: center;
    font-size: .9rem;
}

.copyright + .copyright {
    padding: 0rem 1rem 1rem 1rem !important;
}

.footerbar.fixedb .show {
    margin-bottom: 40px;
}

/*遮擋區塊*/
header {
    z-index: 1000;
    background-color: #fff;
    position: relative;
    border-bottom: 2px solid #eee;
}

header .c-1 {
    margin-left: auto;
}

header .c-2 {
    margin-right: auto;
}

.black.show {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 2;
    width: 100%;
    height: 100%;
}

/*搜尋結果頁*/
/*搜尋bar*/
.page-search .searchbar.full {
    background-color: #eee;
    /*padding-top: 2rem;*/
    /*padding-bottom: 0.5rem;*/
    padding: 1rem;
    margin-bottom: 1rem;
}

.searchbar.full .search-for {
    padding-left: 1rem;
    padding-right: 1rem;
    text-align: left;
}

.searchbar.full .search-for .title {
    margin-bottom: 0rem;
}

.searchbar.full .search-for .search-text {
    font-size: 1rem;
}

.searchbar.full .search-for .list-inline .search-text {
    /*padding-right: .5rem;*/
    /*border-left: 1px solid #999;*/
    margin-right: 0;
}

.searchbar.full .search-for .search-text span {
    border: 1px solid #ccc;
    border-radius: .25rem;
    padding: 0 .6rem;
    margin-bottom: .5rem;
    display: inline-block;
}

.page-search .searchbar .col-form-label {
    font-size: 1.5rem;
}

.searchbar .input-group .btn-img, .searchbar .input-group .btn-text {
    background-color: #fff;
}

.searchbar .selected-tag-basket, .searchbar .tag-basket {
    padding: 0px;
    margin: 0px;
}

.searchbar .selected-tag-basket .tag, .searchbar .tag-basket .tag {
    margin: 0.2em;
    vertical-align: middle;
}

.page-search .searchbar .selected-tag-basket .tag a:hover, .page-search .searchbar .tag-basket .tag a:hover {
    /*color: #e7ffc1 !important;*/
}

.page-search .searchbar .selected-tag-basket .tag .fa,
.page-search .searchbar .tag-basket .tag .fa {
    /*color: rgba(214, 255, 0, 0.75);*/
}

/*頁籤切換*/
.page-search .tabs-pagetoggle {
    margin-top: 1rem;
}

@media (min-width: 768px) {
    /*.searchbar.full .search-for {*/
    /*text-align: left;*/
    /*}*/
}

/*作者列表*/
.list-img.author {
    width: 100%;
    margin: 0;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.list-img.author .card {
    border: none;
    text-align: center;
}

.list-img.author .card > a {
    border-radius: 100%;
    overflow: hidden;
    display: inline-block;
}

.list-img.author .card .image-link img:hover {
    transition: 1s;
    transform: scale(1.1);
}

.list-img .list-img-item {
    display: inline-block;
}

.list-img .effect { /*hover效果*/
    position: relative;
}

.list-img .effect.hover .name {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: .3s;
    width: 100%;
    opacity: 0;
    line-height: 1;
}

.list-img .effect.hover:hover .name {
    opacity: 1;
}

.list-img .effect.hover:hover img {
    opacity: 0.7;
}

/*作者列表-輪播式*/
.carousel.list-img.author {
    text-align: center;
}

.wg.list-img.author div[class*="col"] {
    padding-left: 5px;
    padding-right: 5px;
}

/*作者列表首頁*/
.list-horizontal .list-author-item:hover, .list-grid .list-author-item > div:hover {
    background-color: #f7f7f7;
}

.list-author.list-horizontal .card-title {
    margin-bottom: 0;
}

.list-author.list-horizontal .card-text {
    margin-bottom: 1rem;
}

.list-author.list-horizontal .goto {
    background-color: #3dc4d8;
    color: #fff;
}

.list-author.list-horizontal .goto:hover {
    background-color: transparent;
    color: #3dc4d8;
}

@media (max-width: 767px) {
    .list-author.list-horizontal .btnbar {
        /*padding: 0;*/
        /*text-align: left !important;*/
    }
}

@media (min-width: 768px) {
    .list-author.list-horizontal .card-info {
        position: absolute;
        top: 0;
        right: 0.5rem;
    }
}

/*文章分類圖文列表*/
.list-imgtext.group-box {
    margin-bottom: 1rem;
}

.list-imgtext.group-box .list-group-item {
    border-radius: 0;
}

.list-imgtext.group-box .list-group-item + .list-group-item {
    margin-top: 1rem;
}

.list-imgtext.group-box + .list-imgtext.group-box {
    margin-top: 4rem;
}

/*滿版分頁*/
.pagination.list-full .page-link {
    border: none;
}

.pagination.list-full .prev {
    margin-right: auto;
}

.pagination.list-full .next {
    margin-left: auto;
}

/*作者專區頁面*/
.area-author {
    background-color: #f7f7f7;
    padding: 1.5rem 1rem 0.5rem;
    margin-bottom: 1rem;
}

/*作者簡介*/
.area-author .introduction .img {
    text-align: center;
}

.area-author .introduction .list-img.icon {
    margin-top: -1.5rem;
    margin-bottom: 1rem;
}

.area-author .introduction .info {
    color: #666;
    font-size: 0.9rem;
}

.area-author .introduction .info .img-fluid {
    padding-right: 0.1rem;
}

.area-author .introduction .info .border {
    border-radius: 5px;
    padding: 0.1rem 0.5rem 0.2rem;
    font-size: 0.8rem;
}

.explain-tabs .tab-content {
    border: 1px solid #dee2e6;
    border-top: none;
    background-color: #fff;
    padding-left: 1rem;
    padding-right: 1rem;
    min-height: 50vh;
}

/*附屬圖片*/
.wg.list-img.additional {
    margin-bottom: 3rem;
}

/*表單搜尋bar*/
.form-row.select-bar {
    border-bottom: 1px solid #eee;
    padding: 0 0 1rem;
    margin-bottom: 2rem;
}

/*相簿照片明細*/
.page-album .figure {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.page-album .small-photo {
    background-color: #f7f7f7;
    border-radius: .25rem;
}

.page-album .small-photo > div {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.page-album .small-photo .img-fluid {
    max-height: 100px !important;
}

/*智慧醫療頁*/
.page-medical .btn {
    min-width: 90px;
}

.page.page-medical, .page.page-register {
    overflow: visible;
}

.page-medical .btn-bar.fixed-bottom　.btn-bar.fixed-bottom {
    background-color: #fff;
    padding-top: .5rem;
    padding-bottom: .5rem;
    margin-bottom: 0;
    border-top: 1px solid #eee;
}

@media (min-width:576px) and (max-width:767px) {
    .page-medical .block-data .data-list .data-grid[data-title]:before {
        content: none;
    }
}

@media (max-width: 767px) {
    .page-medical .block-data.style-app .data-list {
        padding: 0 1rem 1rem;
    }

    .page-medical .block-data.style-app .data-grid.date {
        margin: 1rem 0 1.5rem;
    }

    .page-medical .block-data.style-app .data-grid {
        padding: 0;
    }

    .page-medical .block-data.style-app .dividers {
        margin: 1rem 0;
        border-bottom: 1px solid #ccc;
    }

    .page-medical .block-data.style-app .data-list .data-grid[data-title]:before {
        content: attr(data-title) " ";
        width: auto;
        height: auto;
        display: block;
        float: none;
        font-size: .9rem;
        font-weight: normal;
        line-height: 1;
    }

    .page-medical .block-data.style-app .data-list .data-grid.small[data-title]:before {
        display: inline-block;
        padding-right: .5rem;
    }

    .page-medical .block-data.style-app .data-list .data-grid.small.point[data-title]:before {
        text-indent: 1rem;
    }
}

/*表單表格*/
.formBoxp .input-group-text {
    width: 46px;
    padding-left: 0;
    padding-right: 0;
    display: block;
}

.formBoxp .signature span {
    display: block;
    width: 100%;
    height: 60px;
}

/**暫時寫在這哩，之後移至後台css管理中--------------------------------------------------------------------------------------------------------------**/
.wg.list.list-columns .list-columns-item {
    /*padding: 0 0.7rem 1.5rem;*/
}

.wg.list.list-columns .card {
    /*height: 100%;*/
}

.page-search .hotsearch .list-link {
    color: #05aeab;
}

.list-group-item .breadcrumb a {
    color: #999;
}

.list-group-item .breadcrumb a:hover {
    color: #000;
}

.list-group-item p {
    margin-bottom: 0;
}

/*全版full搜尋功能模組*/
.wg.searchbar.full .list-tags {
    text-align: center;
}

.wg.searchbar.full .list-tags.text .tag {
    background-color: #333333d4;
    color: #fff;
    border-radius: 0.25rem;
}

.wg.searchbar.full .list-tags .list-inline-item:first-of-type {
    background-color: #18b7ba;
}

.wg.searchbar.full .list-tags .list-inline-item:hover {
    background-color: #18b7ba;
}

@media (max-width: 767px) {
    .wg.searchbar.full .list-tags .tag {
        margin-right: 0;
        margin-left: 0;
    }

    .wg.searchbar.full .list-tags .list-link {
        white-space: nowrap;
        font-size: 0.9rem;
        width: 63px;
        overflow: hidden;
        text-overflow: ellipsis;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

@media (min-width: 992px) {
    .wg.searchbar.full .content {
        /*max-width: 60%;*/
    }
}

/*card 圖文組合-文章列表*/
.card-link, .card .btn-text {
    /*color: #3dc4d8;*/
}

.card-link:hover, .card .btn-text:hover {
    /*color: #000;*/
}

/*card 圖文組合-作者列表*/
.card .btn-text.track {
    /*position: absolute;*/
    /*top: .6rem;*/
    /*right: 0;*/
}

/*頁面標頭*/
.wg.btnlist-link.header .nav-link {
    padding: 0.5rem;
    font-size: 0.9rem;
}

/*頁面上方*/
@media (min-width: 768px) {
    .wg.btnlist-link {
        padding: .5rem;
    }
}

/*頁面下方*/
.wg.btnlist-link.bottom {
    background-color: #232323;
    margin-bottom: 0;
}

.wg.btnlist-link.bottom a {
    color: #fff;
}

.wg.btnlist-link.bottom a:hover {
    color: #999;
}

.footerbar .expand-main b {
    color: #0000;
}

@media (max-width: 767px) {
    .wg.btnlist-link.bottom .nav-item {
        -ms-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
}

/*頁面下方-社群網路平台*/
.wg.list-social.footer-social {
    background-color: #232323;
    color: #fff;
    font-size: 0.8rem;
    font-weight: inherit;
    padding-top: 1.2rem;
    padding-bottom: 0.5rem;
}

.wg.list-social.footer-social .row {
    margin-left: 0;
    margin-right: 0;
}

.wg.list-social .image-link img:hover {
    transform: translateY(-0.5rem);
    transition: 1s;
}

.wg.btnlist-link.bottom + .wg.list-social:before {
    content: "";
    display: block;
    width: 90%;
    margin: auto;
    border-top: 1px solid #ccc;
    margin-bottom: .5rem;
}

@media (min-width: 768px) {
    .wg.list-social.footer-social {
        padding: 0;
    }
}

/*問卷*/
.questionnaire-title .btn-text {
    background-color: #4ac4eb;
    color: #fff;
}

.page-survey .control-prev, .page-survey .control-next {
    color: #fff;
    text-align: center;
    background-color: rgba(74, 196, 235, .7);
    border-bottom: 2px solid #314f8d;
    border-radius: 0;
}

/*一頁式購物*/
.mod-form-wrapper {
    background-color: #fff !important;
}

.form-content-bg {
    background-color: rgba(20, 55, 125, .88) !important;
}

/*作者簡介輪播模組*/
.wg.content.content-slider.author .more .btn-text {
    color: #3795ec;
    font-size: 0.8rem;
    line-height: 6;
}

.wg.content.content-slider.author .moreinfo > div {
    font-size: 0.9rem;
}

.wg.content.content-slider.author .moreinfo .info {
    margin-top: 1rem;
}

.wg.content.content-slider.author .moreinfo .info .info-item {
    padding-left: 0;
}

/*頁面title*/
@media (min-width: 991px) {
    .container-fluid .titlebar > div {
        /*width: 75%;*/
        /*text-align: center;*/
        /*margin: auto;*/
    }
}

/*凍結效果之後要改寫成功能*/
/*@media (min-width:768px) {*/
/*header, nav#block-menu-store {*/
/*width: 100%;*/
/*position: fixed !important;*/
/*margin: 0 !important;*/
/*}*/
/*header {*/
/*top: 0;*/
/*}*/
/*nav#block-menu-store {*/
/*top: 80px;*/
/*}*/
/*.block-1 {*/
/*margin-top: 145px;*/
/*}*/
/*}*/
/*@media (max-width:767px) {*/
/*}*/
.toast-abs {
    position: absolute;
    z-index: 99995;
    height: 0;
}

.toast {
    box-sizing: border-box;
    opacity: 0.85;
    min-height: 2em;
    font-size: 1.2em;
    background-color: #333;
    color: #fff;
    visibility: hidden;
    border-radius: 2px;
    z-index: 500;
    bottom: 5%;
    overflow: hidden;
    font-family: "微軟正黑體", "新細明體", Arial, Helvetica, sans-serif;
    left: 0;
    min-width: 8em;
    max-width: 12em;
    padding: 10px;
    text-align: center;
    word-break: break-all;
}

.toast.show {
    visibility: visible;
    -webkit-animation: fadein 0.5s, fadeout 0.5s 1.5s;
    animation: fadein 0.5s, fadeout 1s 1.5s;
}

.collapsing {
    -webkit-transition: none;
    transition: none;
    display: none;
}

.carousel-multi-150 .carousel-inner .carousel-item-right.active,
.carousel-multi-150 .carousel-inner .carousel-item-next {
    transform: translateX(150px);
}

.carousel-multi-150 .carousel-inner .carousel-item-left.active,
.carousel-multi-150 .carousel-inner .carousel-item-prev {
    transform: translateX(-150px);
}

.carousel-multi-150 .carousel-inner .carousel-item-right,
.carousel-multi-150 .carousel-inner .carousel-item-left {
    transform: translateX(0);
}

.carousel-3.carousel-inner .carousel-item-right.active,
.carousel-3.carousel-inner .carousel-item-next {
    transform: translateX(33.3%);
}

.carousel-3.carousel-inner .carousel-item-left.active,
.carousel-3.carousel-inner .carousel-item-prev {
    transform: translateX(-33.3%)
}

.carousel-3.carousel-inner .carousel-item-right,
.carousel-3.carousel-inner .carousel-item-left {
    transform: translateX(0);
}

.carousel-4.carousel-inner .carousel-item-right.active,
.carousel-4.carousel-inner .carousel-item-next {
    transform: translateX(25%);
}

.carousel-4.carousel-inner .carousel-item-left.active,
.carousel-4.carousel-inner .carousel-item-prev {
    transform: translateX(-25%);
}

.carousel-4.carousel-inner .carousel-item-right,
.carousel-4.carousel-inner .carousel-item-left {
    transform: translateX(0);
}

.carousel-8.carousel-inner .carousel-item-right.active,
.carousel-8.carousel-inner .carousel-item-next {
    transform: translateX(12.5%);
}

.carousel-8.carousel-inner .carousel-item-left.active,
.carousel-8.carousel-inner .carousel-item-prev {
    transform: translateX(-12.5%);
}

.carousel-8.carousel-inner .carousel-item-right,
.carousel-8.carousel-inner .carousel-item-left {
    transform: translateX(0);
}

/*
    瀑布流圖床排版設定 :
*/
.pinterest-bed {
    width: 100%;
}

.pinterest-item {
    float: left;
}

.pinterest-item > .card {
    margin: 0rem 0.5rem 1rem 0.5rem;
}

@media (max-width: 575.98px) {
    .pinterest-item {
        width: 100%;
    }
}

@media (min-width: 576px) and (max-width: 767.98px) {
    .pinterest-item {
        width: 50%;
    }
}

@media (min-width: 768px) and (max-width: 991.98px) {
    .pinterest-item {
        width: 33.3333333%;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .pinterest-item {
        width: 25%;
    }
}

@media (min-width: 1200px) {
    .pinterest-item {
        width: 25%;
    }
}

/*
    瀑布流圖床讀取動畫
*/
.pinterest-loader-ellips {
    font-size: 20px; /* change size here */
    position: relative;
    width: 4em;
    height: 1em;
    margin: 10px auto;
}

.pinterest-loader-ellips__dot {
    display: block;
    width: 1em;
    height: 1em;
    border-radius: 0.5em;
    background: #555; /* change color here */
    position: absolute;
    animation-duration: 0.5s;
    animation-timing-function: ease;
    animation-iteration-count: infinite;
}

.pinterest-loader-ellips__dot:nth-child(1),
.pinterest-loader-ellips__dot:nth-child(2) {
    left: 0;
}

.pinterest-loader-ellips__dot:nth-child(3) {
    left: 1.5em;
}

.pinterest-loader-ellips__dot:nth-child(4) {
    left: 3em;
}

@keyframes pinterest-reveal {
    from {
        transform: scale(0.001);
    }
    to {
        transform: scale(1);
    }
}

@keyframes pinterest-slide {
    to {
        transform: translateX(1.5em)
    }
}

.pinterest-loader-ellips__dot:nth-child(1) {
    animation-name: pinterest-reveal;
}

.pinterest-loader-ellips__dot:nth-child(2),
.pinterest-loader-ellips__dot:nth-child(3) {
    animation-name: pinterest-slide;
}

.pinterest-loader-ellips__dot:nth-child(4) {
    animation-name: pinterest-reveal;
    animation-direction: reverse;
}

/* Loading-block 樣式 */
.loading-block {
    z-index: 1100;
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(2, 0, 17, 0.9);
}

.loading-block .loading-animation {
    margin: 2.5rem;
}

.loading-block .loading-text {
    text-align: center;
    border-radius: .25rem;
    padding: 10px;
    background: rgba(255, 255, 255, 0.7);
}

/* 評分星星 */
.star-rating {
    unicode-bidi: bidi-override;
    color: #ddd;
    font-size: 0;
    height: 25px;
    margin: 0 auto;
    position: relative;
    display: inline-table;
    padding: 0;
    vertical-align: sub;
    text-shadow: 0px 0px 2px #a2a2a2, 0px 0px 2px #a2a2a2, 0px 0px 2px #a2a2a2;
}

.star-rating span {
    padding: 0px 2px;
}

.star-rating-top {
    color: #FFD700;
    padding: 0;
    position: absolute;
    z-index: 1;
    display: block;
    top: 0;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
}

.star-rating-bottom {
    padding: 0;
    display: block;
    z-index: 0;
}

/* 評分星星 按鈕 */
.btn-rating {
    font-size: 0;
    display: inline-table;
    vertical-align: sub;
    text-shadow: 0px 0px 2px #a2a2a2, 0px 0px 2px #a2a2a2, 0px 0px 2px #a2a2a2;
}

.btn-rating > label {
    color: #ddd;
    float: right;
}

.btn-rating > label span {
    padding: 0px 5px;
    font-size: 1.5rem;
    line-height: 1rem;
    display: inline-block;
}

.btn-rating > input:checked ~ label,
.btn-rating:not(:checked) > label:hover,
.btn-rating:not(:checked) > label:hover ~ label {
    color: #FFD700;
}

.btn-rating > input:checked ~ label:hover,
.btn-rating > label:hover ~ input:checked ~ label,
.btn-rating > input:checked ~ label:hover ~ label {
    opacity: 0.5;
}

.ellipsis {
    overflow: hidden;
    display: -webkit-box;
    display: -moz-box;
    -webkit-box-orient: vertical;
    white-space: normal;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    text-align: justify;
    text-justify: inter-ideograph;
    line-height: 1.6em;
    -webkit-line-clamp: 1;
    max-height: 1.6em;
}

.ellipsis-2 {
    -webkit-line-clamp: 2;
    max-height: 3.2em;
}

.ellipsis-3 {
    -webkit-line-clamp: 3;
    max-height: 4.8em;
}

.ellipsis-4 {
    -webkit-line-clamp: 4;
    max-height: 6.4em;
}

.ellipsis-5 {
    -webkit-line-clamp: 5;
    max-height: 8.0em;
}

.ellipsis-6 {
    -webkit-line-clamp: 6;
    max-height: 9.6em;
}

.ellipsis-7 {
    -webkit-line-clamp: 7;
    max-height: 11.2em;
}

.ellipsis-8 {
    -webkit-line-clamp: 8;
    max-height: 12.8em;
}

/* video block background*/
.fb-video, .ig-video, .youtube-video {
    background: url('//fs1.shop123.com.tw/center/upload/harddisc/image/data_preparing.gif');
    background-repeat: no-repeat;
    background-size: 100%;
}

.w-20 {
    width: 20%;
}

.w-10 {
    width: 10%;
}

.w-12_5 {
    width: 12.5%;
}

/* Emoji icon 初始設定 */
img.twemoji-char {
    height: 1px !important;
    padding: 1px;
}

.hide-carousel-caption .carousel-caption {
    display: none !important;
}

#member-policy button.fancybox-close-small {
    outline: none;
}

/* desktop category menu */
.mainmenu {
    position: relative;
}

.firstmenu {
    width: 100%;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    justify-content: center;
}

.firstmenu.scroll-mode {
    flex-wrap: nowrap !important;
}

.mainmenu.menu-store-desktop.scroll-mode .store-bar-prev, .mainmenu.menu-store-desktop.scroll-mode .store-bar-next {
    position: absolute;
    top: 0;
    bottom: 0;
    min-width: 20px;
    background: rgba(0, 0, 0, 0.2);
}

.mainmenu.menu-store-desktop.scroll-mode .store-bar-prev {
    left: 0;
}

.mainmenu.menu-store-desktop.scroll-mode .store-bar-next {
    right: 0;
}

.mainmenu.menu-store-desktop.scroll-mode .store-bar-prev > *, .mainmenu.menu-store-desktop.scroll-mode .store-bar-next > * {
    top: 50%;
    position: absolute;
}

.mainmenu.menu-store-desktop.scroll-mode .store-bar-prev > * {
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
}

.mainmenu.menu-store-desktop.scroll-mode .store-bar-next > * {
    -ms-transform: translate(-100%, -50%);
    transform: translate(0, -50%);
}

.firstmenu li a {
    position: relative;
    display: block;
    line-height: 3;
    padding: 0 1rem 0 1rem;
    color: #333;
}

.firstmenu li a:hover {
    color: #000;
}

/*第一層選單滑過後下底線動態-顯示*/
.firstmenu li a:after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 0px;
    margin-left: -1px;
    border-bottom: solid 3px #FFF;
    transition: all .3s ease-in-out;
}

/*.firstmenu li a:hover:after { border-bottom:solid 3px #000; margin-left:-50%; width:100%; }*/
/*下方選單開啟時尚方底線保留*/
.firstmenu li:hover a:after {
    border-bottom: solid 3px #000;
    margin-left: -50%;
    width: 100%;
}

.firstmenu > li > a .hover-show, .firstmenu > li > a .hover-hide {
    margin-left: -50%;
    left: 50%;
    position: absolute;
    text-align: center;
    min-height: 1.2rem;
    min-width: 2rem;
}

.firstmenu > li > a .hover-show {
    opacity: 0;
}

.firstmenu > li > a .hover-hide {
    opacity: 1;
}

.firstmenu > li:hover > a .hover-hide {
    opacity: 0;
}

.firstmenu > li:hover > a .hover-show {
    opacity: 1;
}

/*第二層隱藏，滑鼠滑過第一層，第二層才顯示*/
.firstmenu li ul.secondmenu {
    display: none;
    padding: 1rem;
    max-height: 70vh;
    overflow-y: auto;
}

.firstmenu li:hover ul.secondmenu {
    display: block;
}

/*第二層選單*/
.secondmenu {
    position: absolute;
    left: 5%;
    right: 5%;
    z-index: 1000;
    float: left;
    min-width: 10rem;
    padding: 0;
    margin: 0;
    list-style: none;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: .25rem;
}

.secondmenu li {
    width: 24%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 1rem;
    font-weight: 600;
    display: inline-flex; /*Flexbox inline 屬性*/
    flex-wrap: wrap; /*多行換行*/
    align-items: stretch; /*單行預設值，內容元素全部撐開*/
    align-content: stretch; /*多行，內容元素全部撐開*/
}

.secondmenu li a {
    padding: 0 1rem;
    color: #555;
    line-height: 1;
}

.secondmenu li a:hover {
    color: #121212;
}

@media only screen and (max-width: 1000px) {
    .secondmenu li {
        width: 32.3333%;
    }
}

@media only screen and (max-width: 800px) {
    .secondmenu li {
        width: 49%;
    }
}

@media only screen and (max-width: 600px) {
    .secondmenu li {
        width: 100%;
    }
}

/*第二層選單滑過後下底線動態-不顯示*/
.secondmenu li a:after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0px;
    margin-left: 0px;
    border-bottom: solid 0px #FFF;
    transition: all .3s ease-in-out;
}

.secondmenu li a:hover:after {
    border-bottom: solid 0px #000;
    margin-left: 0px;
    width: 0px;
}

.mainmenu li:hover .secondmenu li a:after {
    border-bottom: solid 0px #000;
    margin-left: 0px;
    width: 0px;
}

/*第二層選單-有圖*/
.secondmenu-plus {
    width: 100% !important;
}

.secondmenu-pic {
    width: 30%;
}

.secondmenu-pic a {
    padding: 0 !important;
}

.secondmenu-pic img {
    max-width: 100%;
    height: auto;
}

.secondmenu-list {
    width: 70%;
    padding: 0;
}

.secondmenu-list li {
    width: 32.333%;
}

.secondmenu-list .thirdmenu li {
    width: 100%;
}

@media only screen and (max-width: 1000px) {
    .secondmenu-list li {
        width: 49%;
    }
}

@media only screen and (max-width: 800px) {
    .secondmenu li {
        width: 100%;
    }
}

/*第三層選單*/
.thirdmenu {
    position: relative;
    left: 0;
    margin: 0;
    padding: 0 0 1rem 0;
    overflow: auto;
    width: 100%;
    background: #fff;
    border: none;
    -webkit-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
    -moz-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
    -ms-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
    -o-box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
    box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px;
    -webkit-border-radius: 0px;
    -moz-border-radius: 0px;
    -ms-border-radius: 0px;
    -o-border-radius: 0px;
    border-radius: 0px;
}

.thirdmenu li {
    float: none;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    font-size: .9rem;
    line-height: .9rem;
    font-weight: 400;
}

.thirdmenu li a {
    padding: 0rem 1rem;
    color: #888;
}

.thirdmenu li a:hover {
    color: #333;
}

/*第四層以後*/
.thirdmenu li ul {
    margin: 0;
    padding: 0;
    background: #f5f5f5;
}

/* Youtube Embaded RWD Control*/
.youtube-video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.youtube-video-container iframe, .youtube-video-container object, .youtube-video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* article list video display issue */
@media screen and (max-width: 768px) {
    .list-article.list-horizontal .plyr {
        min-width: 100%;
    }

    .list-article.list-horizontal .fb_iframe_widget span,
    .list-article.list-grid .fb_iframe_widget span,
    .list-article.list-horizontal .fb_iframe_widget iframe,
    .list-article.list-grid .fb_iframe_widget iframe {
        min-width: 100%;
        width: 100% !important;
    }

    .list-article.list-horizontal .plyr .plyr__menu,
    .list-article.list-horizontal .plyr .plyr__progress,
    .list-article.list-horizontal .plyr .plyr__time,
    .list-article.list-horizontal .plyr .plyr__volume [data-plyr="volume"] {
        display: none;
    }
}

/* header fix mode logo */
header .fix-header-logo {
    display: none;
}

@media screen and (min-width: 768px) {
    header.fixed-mode .fix-header-logo {
        display: inline-block;
        position: absolute;
        left: .5rem;
        top: 50%;
        transform: translateY(-50%);
        z-index: 1010;
        max-width: 150px;
        max-height: 90px;
    }

    header.fixed-mode .wg.btnlist-link.header, header.fixed-mode .mainmenu {
        width: calc(100% - 160px);
        margin-left: auto;
    }

    header.fixed-mode .mainmenu .firstmenu {
        margin-left: -80px;
    }

    header.fixed-mode .mainmenu.scroll-mode .firstmenu {
        margin-left: 0px;
    }

    .mainmenu.menu-store-desktop.scroll-mode .store-bar-prev {
        left: 10px;
    }

    .mainmenu.menu-store-desktop.scroll-mode .store-bar-next {
        right: 10px;
    }

    header.fixed-mode .firstmenu li a {
        line-height: 2;
        height: 2rem !important;
    }
}

/*專欄文章內容頁*/
.page-articles.detail .small {
    font-size: .9rem;
    color: #666;
}
.wg.img.img-carousel .article-carousel-slick {
    position: relative;
}

.wg.img.img-carousel .slick-slide {
    line-height: 0;
}

.wg.img.img-carousel .btn-control {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: rgba(0, 0, 0, .2);
}

.wg.img.img-carousel .btn-control .control-box {
    color: #fff;
}

.wg.img.img-carousel .btn-control a {
    line-height: 0;
    padding: .5rem .8rem;
}

.wg.img.img-carousel .article-carousel-slick-nav {
    margin-top: .5rem;
}

.wg.img.img-carousel .list-img .slick-slide {
    padding-left: .5rem;
}

.wg.img.img-carousel .count-amount {
    font-size: 2rem;
    color: #666;
}

.wg.img.img-carousel .count-amount span {
    padding: 0 .5rem;
}

.wg.img.img-carousel .count-amount .current {
    color: #000;
}

.fancybox-container .preview-img {
    max-width: 90%;
}

/*曲線圖旁長高top5*/
.list-ranking.grow-taller {
    position: absolute;
    top: 0;
    right: -140px;
    z-index: 1;
    background-color: #fff;
    box-shadow: 1px 1px 12px -2px #000;
    padding: 1rem 1rem 1rem 0;
    min-width: 160px;
    transition: 2s;
}

.list-ranking.grow-taller:hover {
    right: -20px;
}

.list-ranking.grow-taller .text-title {
    color: #0bc0b2;
    font-weight: bold;
    padding-left: 1rem;
}

.list-ranking.grow-taller .ranking-item {
    margin-bottom: 1rem;
    padding: .5rem;
    padding-left: 0;
}

.list-ranking.grow-taller .ranking-item:nth-of-type(even) {
    background-color: #eee;
}

.list-ranking.grow-taller .ranking-item:hover {
    outline: 2px solid #000;
}

.list-ranking.grow-taller .ranking-item:after {
    display: block;
    clear: both;
    content: "";
}

.list-ranking.grow-taller .ranking-item .h5 {
    float: left;
    padding-left: 1rem;
    padding-right: .5rem;
    margin-bottom: 0;
    line-height: 2.3;
}

.list-ranking.grow-taller .ranking-item .info-member {
    font-size: .9rem;
    overflow: hidden;
}

.list-ranking.grow-taller .ranking-item .info-member .number {
    font-size: 1.2rem;
    font-weight: bold;
    padding-left: .3rem;
}

.list-ranking.grow-taller .ranking-item .info-member .name {
    display: block;
}
.list-ranking.grow-taller button {
    border: none;
    border-radius: 1.5rem;
    background-color: #ccc;
    width: 26px;
    position: absolute;
    left: -8px;
    top: -8px;
    z-index: 1;
    cursor: pointer;
}
.list-ranking.grow-taller button:hover {
    background-color: #000;
    color: #fff;
}
.list-ranking.grow-taller .ranking-item.one {
    background-color: #0bc0b2;
    margin-left: -1rem;
    position: relative;
}

.list-ranking.grow-taller .ranking-item.one:before {
    content: "";
    display: block;
    width: 40px;
    height: 37px;
    position: absolute;
    top: -1.5rem;
    right: -1rem;
    background-image: url(https://fs1.shop123.com.tw/center/upload/harddisc/image/medical/icon_crown_top1.png);
    background-size: cover;
}

.list-ranking.grow-taller .ranking-item.one .text-link {
    color: #fff;
}

.block-data.style-border {
    border: 1px solid #000;
}

.block-data.style-border .title-list, .block-data.style-border .data-list {
    border: 1px solid #000;
}

@media (max-width: 767px) {
    .block-data.from-track .data-grid[data-title]:before {
        width: 68px;
        font-weight: bold;
    }
}