.tab-pane img:not(.exp-user, .review-user-info .user-img-block .user-img img) {
    max-width: 100%;
    height: auto !important;
}

.btnsocial i.fa-instagram {
    font-size: 27px;
}

.ky-accordion-menu .btnsocial i.fa-instagram {
    font-size: 20px;
}

.banner-list {
    display: block;
    position: relative;
    z-index: 50;
    margin: 0px auto 12px auto;
}

.banner-list ul {
    display: flex;
    justify-content: center;
    list-style: none;
    margin: 0 5px;
}

.banner-list ul li {
    width: 100%;
    margin: 0 10px;
}

.banner-list ul li:first-child {
    margin: 0 10px 0 0;
}

.banner-list ul li:last-child {
    margin: 0 0 0 10px;
}

.banner-list ul li a {
    display: block;
    color: #fff;
    /* font-weight: 600; */
    /* border: 1px solid #68a971; */
    border: 1px solid #A3CDC2;
    padding: 12px 1.5em;
    font-size: 1.3em;
    background: #A3CDC2;
    word-break: keep-all;
    text-align: center;
    box-shadow: 3px 3px 0 0 #476259;
}

.banner-list ul li a:hover {
    border: 1px solid #6aa596;
    color: #daf1ef;
    background: #6aa596;
    box-shadow: 2px 2px 0 0 #476259;
    /* text-shadow: rgba(3, 3, 3, 0.5) -1px -1px 0px; */
}

@media(min-width:1400px) {
    .banner-list {
        width: 1294px;
        padding: 0 20px;
    }

    .banner-list ul {
        margin: 0 2em;
        padding: 0 55px;
    }
}

@media(min-width: 1200px) {
    .banner-list {
        top: -752px;
    }

    .banner-list ul {
        margin: 0 30px;
    }

    .banner-list ul li a {
        padding: 10px 1.5em;
    }
}

@media(max-width: 1199px) {
    .banner-list ul {
        margin: 0 35px;
    }

    .banner-list {
        top: -800px;
        margin-bottom: 20px;
    }
}

@media(max-width: 768px) {
    .banner-list {
        top: 0;
        margin-bottom: 20px;
    }

    .banner-list ul {
        margin: 0 21px;
    }
}

@media(max-width: 600px) {
    .banner-list {
        top: 0;
    }

    .banner-list ul {
        margin: 0 5px;
    }
}

.event-entry {
    margin-top: 50px;
    margin-bottom: 50px;
}

/*--食驗室首頁輪播--*/

.food-laboratory .homeSlider li {
    height: auto;
}

.food-laboratory .homeSlider .slideText .slDetail {
    width: 100%;
    margin: 220px auto 0 auto !important;
    text-align: center;
}

.food-laboratory .homeSlider .slideText .slDetail img {
    margin: 0 auto;
}

.food-laboratory .bx-controls {
    width: 1080px;
    position: relative;
    margin: 0 auto;
    top: -270px;
}

.food-laboratory .CateImg {
    width: 1244px;
    display: block;
    position: relative;
    left: inherit;
    top: 180px;
    margin: 0 auto;
    text-align: right;
}

.food-laboratory .CateImg img {
    z-index: 9;
    position: absolute;
    right: 0;
    left: inherit;
    width: auto;
}

@media (max-width:1270px) {
    .food-laboratory .CateImg {
        width: 100%;
    }
}

@media (max-width:1024px) {
    .food-laboratory .homeSlider .slideText .slDetail img {
        width: 90%;
    }

    .food-laboratory .bx-controls {
        width: 100%;
        top: -250px;
        z-index: 99;
    }
}

@media (max-width:768px) {
    .food-laboratory .CateImg img {
        width: 160px;
    }

    .food-laboratory .CateImg {
        top: 80px;
    }

    .food-laboratory .homeSlider .slideText .slDetail {
        margin: 120px auto 0 auto !important;
    }

    .food-laboratory .bx-controls {
        top: -180px;
        z-index: 99;
    }

    .Event-latest h3 {
        height: 100px;
    }
}

@media (max-width:470px) {
    .food-laboratory .homeSlider.whiteBorder .slideBodyContainer {
        height: 300px !important;
    }

    .food-laboratory .bx-controls {
        top: -50px;
    }
}

@media (max-width:600px) {
    .food-laboratory .homeSlider.whiteBorder .slideBodyContainer {
        height: 400px !important;
    }

    .food-laboratory .bx-controls {
        top: -100px;
    }

    .Event-latest h3 {
        height: auto;
    }
}

/*--食驗室--試用體驗--*/

.slider-trial.homeSlider {
    overflow: inherit;
}

.slider-trial.homeSlider .slideBodyContainer {
    background: transparent;
    height: 360px;
}

.slider-trial.homeSlider li {
    height: auto;
}

.slider-trial.homeSlider .slideText .slDetail {
    width: 100%;
    margin: 20px auto 0 auto !important;
    text-align: center;
}

.slider-trial.homeSlider .slideText .slDetail img {
    margin: 0 auto;
}

.slider-trial .bx-controls {
    width: 1080px;
    position: relative;
    margin: 0 auto;
    top: -170px;
}

.slider-trial .CateImg {
    width: 1244px;
    display: block;
    position: relative;
    left: inherit;
    top: 180px;
    margin: 0 auto;
    text-align: right;
}

.slider-trial .CateImg img {
    z-index: 9;
    position: absolute;
    right: 0;
    left: inherit;
    width: auto;
}

@media (max-width:1270px) {
    .slider-trial .CateImg {
        width: 100%;
    }
}

@media (max-width:1024px) {
    .slider-trial.homeSlider .slideBodyContainer {
        height: 300px;
    }

    .slider-trial.homeSlider .slideText .slDetail img {
        width: 90%;
    }

    .slider-trial .bx-controls {
        width: 100%;
        top: -125px;
        z-index: 99;
    }
}

@media (max-width:768px) {
    .slider-trial.homeSlider .slideBodyContainer {
        background: transparent;
        height: 210px;
    }

    .slider-trial .CateImg img {
        width: 160px;
    }

    .slider-trial .CateImg {
        top: 80px;
    }

    .slider-trial.homeSlider .slideText .slDetail {
        margin: 0 auto !important;
    }

    .slider-trial .bx-controls {
        top: -105px;
        z-index: 99;
    }

    .bx-wrapper {
        height: 480px !important;
    }
}

@media (max-width:500px) {
    .slider-trial.homeSlider .slideBodyContainer {
        background: transparent;
        min-height: 120px;
        max-height: 140px;
        margin-top: 10px;
    }

    .slider-trial.homeSlider .slideText .slDetail {
        margin: 0 auto !important;
    }

    .slider-trial.homeSlider .slideText .slDetail img {
        width: 95%;
    }

    .slider-trial .bx-controls {
        top: -60px;
        z-index: 99;
    }
}

/*-體驗步驟*/

.experience-step-box {
    position: relative;
    margin: 10px 10px 30px 10px;
}

.experience-step-box h3 {
    font-weight: 600;
    text-align: center;
}

.experience-step-box a {
    text-align: center;
    display: block;
}

.btn-readme {
    margin-bottom: 10px;
    padding: 5px 1.25em;
    color: #999;
    border: 1px solid #ccc;
    word-break: keep-all;
}

.explain-steps {
    display: block;
    margin: 10px auto;
    text-align: center;
}

.explain-steps ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: block;
}

.explain-steps ul li {
    margin: 0;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.explain-steps ul li:first-child {
    background: #7b746e;
    color: #fff;
    box-shadow: none;
}

.explain-steps ul li:nth-child(2) {
    background: #ab9e87;
    color: #fff;
}

.explain-steps ul li:last-child {
    background: #daab80;
    color: #fff;
}

.explain-steps ul li:before {
    position: absolute;
    content: " ";
    border-top: 15px solid #fff;
    border-right: 15px solid transparent;
    border-left: 15px solid transparent;
    margin-left: auto;
    margin-right: auto;
    bottom: -16px;
    right: 4px;
    width: 20px;
    z-index: 90;
}

.explain-steps ul li:after {
    position: absolute;
    content: " ";
    border-top: 16px solid #7b746e;
    border-right: 16px solid transparent;
    border-left: 16px solid transparent;
    margin-left: auto;
    margin-right: auto;
    bottom: -15px;
    left: initial;
    right: 3px;
    width: 20px;
    z-index: 99;
}

.explain-steps ul li:first-child:after {
    border-top-color: #7b746e;
}

.explain-steps ul li:nth-child(2):after {
    border-top-color: #ab9e87;
}

.explain-steps ul li:last-child:after {
    border: none;
}

.steps-order {
    display: flex;
    border-bottom: 1px solid rgba(255, 255, 255, .2);
    padding: 5px 10px;
}

.steps-order-number {
    margin-right: 5px;
    font-size: 36px;
    line-height: 1.4;
    vertical-align: middle;
    font-style: italic;
}

.steps-order-number span {
    position: relative;
    z-index: 998;
    left: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 55px;
}

.steps-order-number::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 45px 60px 0 0;
    border-color: #655f58 transparent transparent transparent;
    z-index: 0;
}

.explain-steps ul li:first-child .steps-order-number:before {
    border-color: #655f58 transparent transparent transparent;
}

.explain-steps ul li:nth-child(2) .steps-order-number::before {
    border-color: #96866a transparent transparent transparent;
}

.explain-steps ul li:last-child .steps-order-number::before {
    border-color: #cc9767 transparent transparent transparent;
}

.steps-order h4 {
    font-size: 1.5em;
    line-height: 1.8;
    vertical-align: middle;
    text-shadow: 1px 1px rgba(0, 0, 0, .3);
    border-left: 1px solid rgba(255, 255, 255, .3);
    margin: 5px 10px 5px 5px;
    padding-left: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.steps-order em {
    display: block;
    position: absolute;
    left: 5px;
    top: 3px;
    font-style: italic;
    font-size: 13px;
    font-weight: normal;
    color: rgba(255, 255, 255, .8);
}

.steps-body {
    padding: 10px;
    text-align: left;
}

.steps-body p {
    font-size: 16px;
    margin-bottom: 0;
}

.steps-body small.text-muted {
    color: #ccc2b9 !important;
}

@media(max-width:320px) {
    .explain-steps ul li:after {
        right: 2px;
    }

    .explain-steps ul li:before {
        right: 3px;
    }
}

@media(min-width:768px) {
    .experience-step-box {
        position: relative;
        margin: 20px 20px 80px 20px;
        top: 20px;
    }

    .btn-readme {
        position: absolute;
        right: 5px;
        top: 0px;
        margin-bottom: 5px;
    }

    .explain-steps {
        margin: 20px auto 40px auto;
    }

    .explain-steps ul {
        margin: 0;
        padding: 0;
        display: flex;
        justify-content: space-between;
    }

    .explain-steps ul li {
        width: 33.3%;
        height: 160px;
    }

    .explain-steps ul li:before {
        border-top: 77px solid transparent;
        border-left: 16px solid #fff;
        border-bottom: 86px solid transparent;
        top: -1px;
        left: 0;
        right: initial;
        width: 0;
        height: 0;
    }

    .explain-steps ul li:after {
        border-top: 75px solid transparent;
        border-left: 15px solid #7b746e;
        border-bottom: 85px solid transparent;
        border-right: none;
        top: 0px;
        right: -15px;
        width: 0;
        height: 0;
    }

    .explain-steps ul li:first-child:after {
        border-top-color: transparent;
    }

    .explain-steps ul li:nth-child(2):after {
        border-top-color: transparent;
        border-left-color: #ab9e87;
    }

    .explain-steps ul li:last-child:after {
        border-top-color: transparent;
        border-left-color: transparent;
    }

    .explain-steps ul li:first-child:before {
        /* border-left-color: #7b746e; */
        border-left-color: transparent;
    }

    .explain-steps ul li:nth-child(2):before {
        /* border-left-color: #ab9e87; */
        border-left-color: #fff;
    }

    .explain-steps ul li:last-child:before {
        /* border-color: transparent; */
        border-left-color: #fff;
    }

    .steps-order {
        margin-right: 0;
        margin-left: 10px;
        height: 60px;
        overflow: hidden;
        padding: 5px 0px 5px 10px;
    }

    .steps-order-number span {
        display: flex;
        justify-content: center;
        align-items: center;
        left: 5px;
        width: 40px;
        height: 60px;
    }

    .steps-order-number::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 60px 70px 0 0;
        border-color: #655f58 transparent transparent transparent;
        z-index: 0;
    }

    .steps-order h4 {
        line-height: 1.2;
        margin: 0px 0px 0px 5px;
        padding-left: 10px;
        text-align: left;
        width: 280px;
        height: 60px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        font-size: 1.35em;
    }

    .steps-order em {
        display: block;
        position: absolute;
        left: 7px;
        top: 3px;
        font-style: italic;
        font-size: 13px;
        font-weight: normal;
        color: rgba(255, 255, 255, .8);
    }

    .steps-body {
        padding: 8px 10px 8px 15px;
        text-align: left;
    }

    .explain-steps ul li:not(:first-child) .steps-body {
        padding: 8px 10px 8px 25px;
        text-align: left;
    }
}

@media(min-width:990px) {
    .explain-steps ul li {
        width: 33.3%;
        height: 140px;
    }

    .explain-steps ul li:before {
        border-top: 61px solid transparent;
        border-left: 16px solid #fff;
        border-bottom: 86px solid transparent;
        top: -1px;
        left: 0;
        right: initial;
    }

    .explain-steps ul li:after {
        border-top: 60px solid transparent;
        border-left: 15px solid #7b746e;
        border-bottom: 80px solid transparent;
        top: 0px;
        right: -15px;
        z-index: 99;
    }

    .steps-order em {
        left: 10px;
    }
}

@media(min-width:1200px) {
    .experience-step-box {
        width: 1170px;
        margin: 40px auto 80px auto;
        padding: 20px 0 20px 0;
    }
}

@media(min-width:1400px) {
    .experience-step-box {
        width: 1294px;
    }

    .explain-steps ul li {
        width: 33.3%;
        height: 140px;
    }

    .explain-steps ul li:after {
        border-bottom: 80px solid transparent;
    }

    .steps-order h4 {
        font-size: 1.5em;
    }

    .steps-body p {
        font-size: 16px;
    }
}

.list-inline.btn-group li {
    padding: 0;
    margin-left: -5px;
}

.exp-apply-listfilter .tab-entry button.active,
.exp-archive-listfilter .tab-entry button.active,
.exp-apply-listfilter .tab-entry .active a,
.exp-archive-listfilter .tab-entry .active a {
    color: #fff;
    background-color: #daab80;
    border-color: #cc9767;
}

.exp-apply-listfilter .ContentContainer h3,
.exp-archive-listfilter .ContentContainer h3 {
    font-size: 18px;
    font-weight: bold;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    margin: 0 100px 10px 0;
}

.exp-apply-listfilter .force-show .ContentContainer h3,
.exp-archive-listfilter .force-show .ContentContainer h3 {
    text-overflow: initial !important;
    white-space: initial !important;
}

.exp-archive-listfilter .Offer-list .ContentContainer h3 {
    text-overflow: initial;
    overflow: initial;
    white-space: initial;
    margin: inherit;
}

.ContentContainer small.hidden+h3 {
    text-overflow: initial !important;
    white-space: initial !important;
    margin: 0 0 10px 0 !important;
}

/* .trial-pagecont {
    margin-top: -30px;
} */

.fatherpage .food-trial .homeSlider .slideText .slDetail {
    width: 100%;
    margin: 220px auto 0 auto !important;
    text-align: center;
}

.fatherpage .food-trial .bx-controls {
    width: 1080px;
    position: relative;
    margin: 0 auto;
    /* top: -350px; */
    top: -260px;
}

.contentpage .food-trial .bx-controls {
    width: 1080px;
    position: relative;
    margin: 0 auto;
    top: -550px;
}

.contentpage .food-trial .trial-list {
    background: #eee;
}

.contentpage .food-trial .homeSlider .slideBodyContainer {
    background: transparent;
    height: auto;
    position: relative;
}

.contentpage .food-trial .sliderBgContainer,
.contentpage .food-trial .bx-wrapper,
.contentpage .food-trial .sliderBg,
.contentpage .food-trial .sliderlink,
.food-trial .homeSlider .bgBox {
    height: 400px !important;
}

.contentpage .food-trial .homeSlider .slideText .slDetail {
    width: 100%;
    margin: 35px auto 0 auto !important;
    text-align: center;
}

.food-trial .homeSlider .slideText .slDetail img {
    margin: 0 auto;
}

.searcharea .line {
    margin: 10px 0;
}

.search-tagbox {
    /* background:rgba(255,255,255,0.2); */
    background: rgba(0, 0, 0, .7);
    color: #fff;
    padding: 10px;
    margin-bottom: 10px;
}

.search-tagbox h5 {
    color: rgba(255, 255, 255, .5);
    font-size: 18px;
    margin-bottom: 1rem;
    padding: 0.5rem;
}

.search-tagbox h5:before {
    content: "";
    border-left: 5px solid #a5d1c4;
    margin-right: 10px;
}

.search-tagcont {
    margin: 1rem 1rem 1rem 1.25rem;
    padding: 5px;
    font-size: 15px;
}

.search-tagcont span {
    color: #fff;
    padding: 4px 20px;
    border: 1px solid rgba(255, 255, 255, .6);
    margin: 4px;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    -ms-border-radius: 20px;
    -o-border-radius: 20px;
    font-size: 15px;
    line-height: 20px;
    white-space: nowrap;
    display: inline-block;
}

.search-tagcont span a {
    color: #fff;
    font-size: 15px !important;
}

.search-tagcont span a:hover {
    color: #a5d1c4;
}

/*----- 試用體驗 == 產品頁 ------*/

.food-trial .trial-experience {
    background: #F8F8F8;
    margin-top: 0px;
    margin-bottom: 30px;
}

.experience-process h3 {
    font-size: 20px;
    font-weight: 600;
}

/*--試用體驗流程--*/

.progressbar {
    margin: 20px 0 30px 0;
    padding: 0;
    counter-reset: step;
}

.progressbar ul {
    display: block;
}

.progressbar ul li {
    list-style: none;
    margin: 0 20px 0 0;
    width: 100%;
    position: relative;
    transition: all .25s ease;
    -webkit-transition: all .25s ease;
    -moz-transition: all .25s ease;
    -ms-transition: all .25s ease;
    -o-transition: all .25s ease;
}

.progressbar ul li:hover {
    transform: translateY(-4px) scale(1.02);
    -webkit-transform: translateY(-4px) scale(1.02);
    -moz-transform: translateY(-4px) scale(1.02);
    -ms-transform: translateY(-4px) scale(1.02);
    -o-transform: translateY(-4px) scale(1.02);
    z-index: 999;
}

.progressbar ul li .step-content {
    display: block;
    margin: -35px 10px 20px 60px;
    width: 80%;
    position: relative;
    text-align: left;
}

.progressbar ul li:last-child {
    margin: 0;
}

.progressbar ul li:before {
    content: "";
    width: 44px;
    height: 44px;
    line-height: 44px;
    display: block;
    text-align: center;
    /* margin: 0 auto 10px auto; */
    border-radius: 50%;
    background-color: #A5D1C4;
    position: relative;
    z-index: 1;
    font-family: "Font Awesome 5 Pro";
    font-style: normal;
    font-variant: normal;
    font-size: 20px;
    color: #fff;
}

.progressbar ul li:after {
    content: "";
    width: 3px;
    height: 100%;
    left: 21px;
    display: block;
    position: absolute;
    top: 22px;
    background-color: #A5D1C4;
    z-index: 0;
}

.progressbar ul li:last-child:after {
    width: 0;
}

.progressbar ul li.step-application:before {
    content: "\f31c";
}

.progressbar ul li.step-list:before {
    content: "\f507";
}

.progressbar ul li.step-delivery:before {
    content: "\f48b";
}

.progressbar ul li.step-experience:before {
    content: "\f64b";
}

.progressbar ul li.step-feedback:before {
    content: "\f303";
}

.step-title {
    font-size: 16px;
    color: #559482;
    margin-bottom: 0.5rem;
}

.step-date {
    color: #39393E;
    font-size: 15px;
    margin-bottom: 0.5rem;
}

.step-text {
    color: #757576;
    text-align: left;
    width: 100%;
}

@media(min-width:1024px) {
    .progressbar ul {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
    }

    .progressbar ul li {
        list-style: none;
        margin: 0 20px 0 0;
        position: relative;
        width: 20%;
        transition: all .25s ease;
        -webkit-transition: all .25s ease;
        -moz-transition: all .25s ease;
        -ms-transition: all .25s ease;
        -o-transition: all .25s ease;
    }

    .progressbar ul li:hover {
        transform: translateY(-4px) scale(1.02);
        -webkit-transform: translateY(-4px) scale(1.02);
        -moz-transform: translateY(-4px) scale(1.02);
        -ms-transform: translateY(-4px) scale(1.02);
        -o-transform: translateY(-4px) scale(1.02);
        z-index: 999;
    }

    .progressbar ul li .step-content {
        display: block;
        margin: 0px auto;
        width: 100%;
        position: relative;
        text-align: center;
        /* border: 1px solid sandybrown; */
    }

    .progressbar ul li:last-child {
        margin: 0;
    }

    .progressbar ul li:before {
        content: "";
        width: 44px;
        height: 44px;
        line-height: 44px;
        display: block;
        text-align: center;
        margin: 0 auto 10px auto;
        border-radius: 50%;
        background-color: #A5D1C4;
        position: relative;
        z-index: 1;
        font-family: "Font Awesome 5 Pro";
        font-style: normal;
        font-variant: normal;
        font-size: 20px;
        color: #fff;
    }

    .progressbar ul li:after {
        content: "";
        width: 100%;
        height: 3px;
        left: 50%;
        display: block;
        position: absolute;
        top: 22px;
        background-color: #A5D1C4;
        z-index: 0;
    }

    .step-title {
        font-size: 16px;
        color: #559482;
        margin-bottom: 0.5rem;
    }

    .step-date {
        color: #39393E;
        font-size: 15px;
        margin-bottom: 0.5rem;
    }

    .step-text {
        color: #757576;
        text-align: left;
        width: 85%;
        margin: 0 auto;
    }
}

/*== 側邊小工具列 ==*/

.share-sidebar .article-fbs-sharing .line {
    background: #00C200;
}

.share-sidebar .article-fbs-sharing .link {
    background: #AAAAAA;
}

.share-sidebar .article-fbs-sharing .line img {
    width: 50%;
    height: auto;
}

/*---產品圖輪播---*/

.prdimgSwiperarea {
    width: 100%;
    height: auto;
    margin: 0 auto 10px auto;
}

.swiper-container {
    width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.swiper-slide {
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100% !important;
}

.swiper-slide img {
    display: block;
    width: 100%;
    margin: auto;
    height: auto;
    text-align: center;
}

.gallery-top {
    height: auto;
    width: 100%;
    margin-bottom: 10px;
    border: 1px solid #ddd;
}

.prdimgSwiperarea .swiper-button-prev,
.prdimgSwiperarea .swiper-button-next {
    background: rgba(255, 255, 255, .9);
    width: 44px;
    color: #707070;
}

.prdimgSwiperarea .swiper-button-prev {
    left: 0px;
}

.prdimgSwiperarea .swiper-button-next {
    right: 0px;
}

.prdimgSwiperarea .swiper-button-prev:after,
.prdimgSwiperarea .swiper-button-next:after {
    font-size: 20px;
}

.prdimgSwiperarea .swiper-button-prev:after,
.prdimgSwiperarea .swiper-container-rtl .swiper-button-next:after,
.prdimgSwiperarea .swiper-button-next:after,
.prdimgSwiperarea .swiper-container-rtl .swiper-button-prev:after {
    content: "";
    font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    width: 20px;
    text-align: center;
    margin: auto;
}

.prdimgSwiperarea .swiper-button-prev:after,
.prdimgSwiperarea .swiper-container-rtl .swiper-button-next:after {
    content: "\f053";
    /* font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    width: 20px;
    text-align: center;
    margin: auto; */
}

.prdimgSwiperarea .swiper-button-next:after,
.prdimgSwiperarea .swiper-container-rtl .swiper-button-prev:after {
    content: "\f054";
    /* font-family: "Font Awesome 5 Pro";
    font-size: 20px;
    width: 20px;
    text-align: center;
    margin: auto; */
}

.gallery-thumbs {
    height: 20%;
    box-sizing: border-box;
    padding: 10px 0
}

.gallery-thumbs .swiper-slide {
    height: 100%;
    opacity: 0.4;
    border: 1px solid #ddd;
}

.gallery-thumbs .swiper-slide-thumb-active {
    opacity: 1;
}

.prdnotearea {
    position: relative;
    font-size: 15px;
    display: block;
    margin: 10px 0 10px 5px;
}

.prdnotearea .prdprice {
    color: #10567B;
    font-size: 28px;
    margin: 20px 10px 10px 15px
}

.prdnotearea ul {
    margin: 10px 10px 20px 15px;
    list-style: none;
}

.prdnotearea ul li {
    line-height: 1.8;
    margin: 0px 0 5px 0
}

.prodwrap .text-tip {
    color: #EB7769;
}

.demandprogress .demandtext {
    font-size: 18px;
    font-weight: bold;
}

.demandprogress .demanddate {
    font-size: 15px;
}

.demandprogress .demanddate::before {
    content: "\f017";
    font: 15px FontAwesome;
    margin-right: 5px;
}

.sharesnumber li b {
    /* width: 80px; */
    min-width: 70px;
    text-align: right;
    display: inline-block;
}

.sharesnumber li.count {
    display: flex;
    margin: 15px 0 5px 0;
}

.sharesnumber li.count b {
    text-align: left;
    min-width: 90px;
}

.sharesnumber li.count select {
    width: auto;
    min-width: 60px;
}

.btn-apply,
.btn-purchase {
    text-align: center;
    color: #fff;
    margin: 0 5px;
}

.btn-apply:hover,
.btn-purchase:hover {
    color: #fff;
}

/*--我要申請btn-apply--*/

.btn-apply {
    background: #5A748E;
}

.btn-apply:hover {
    background: #3a5571;
}

.btn-success.btn-event:hover {
    background: #76a144;
}

/*--直接購買btn-purchase--*/

.btn-purchase {
    background: #EB7769;
}

.btn-purchase:hover {
    background: #ce5f52;
}

/*--申請截止btn-applyout--*/

.btn-applyout {
    background: #888;
    color: #eee;
}

.check-area {
    display: flex;
}

.check-area .btn-block+.btn-block {
    margin-top: 0;
}

.apply-modal {
    max-width: 576px;
}

.apply-modal button.close {
    top: 10px !important;
    right: 10px !important;
}

.apply-modal button.close i {
    color: #000;
    font-size: 1em;
}

.apply-modal .modal-body {
    padding: 1.5em;
}

.prdnotearea hr {
    border-top: 1px solid #707070;
    margin: 30px 0 35px 0;
}

.prod-info {
    margin: 10px 5px 15px 5px
}

.prod-info h4 {
    font-size: 20px;
    color: #39393E;
    font-weight: bold;
    margin-bottom: 2rem;
}

.prod-info ul li {
    margin: 0 0 10px 0;
    display: flex;
    color: #404040;
}

.prod-info ul li b {
    color: #717171;
    min-width: 80px;
}

.vendordetail-wrap {
    clear: both;
    margin: 0 10px 20px 10px;
}

.vendordetail-wrap>.vendordetailnav {
    /* background: #C2B0A4; */
    margin: 0 0 5px 0;
    /* padding: 10px 5px 0 5px; */
    padding: 0;
    font-size: 15px;
    border-bottom: none;
    display: flex;
    align-items: flex-start;
    /* justify-content: flex-start; */
    flex-wrap: wrap;
    background: transparent !important;
}

.vendordetail-wrap>.vendordetailnav li {
    float: none;
    margin: 0;
    width: 33%;
    text-align: center;
}

.vendordetail-wrap>.vendordetailnav li a {
    display: block;
    /*color: #fff;
     height: 50px; */
    color: #a78d7d;
    line-height: 1.8;
    padding: 5px 15px;
    border: none;
    border-radius: 0;
    /* margin: 0 0 1px 0; */
    margin-bottom: -1px;
    /* background: #b79a88;; */
    border: 1px solid #d4beb1;
}

/* .vendordetail-wrap>.vendordetailnav li:first-child {
    margin-left: 3px;
}

.vendordetail-wrap>.vendordetailnav li:last-child {
    margin-right: 2px;
} */

.vendordetail-wrap>.vendordetailnav li.active a {
    /* background: #fff; */
    color: #fff;
    border: 2px solid #a28979;
    background: #a28979;
    font-size: 16px;
    font-weight: 600;
}

/*--- modal ---*/

.btn-login,
.btn-resigter {
    background: #DFDCD7;
    border: 1px solid #DFDCD7;
    box-shadow: 3px 3px 0 rgba(123, 116, 110, 1.0);
    margin: 0 5px;
}

.btn-login:hover,
.btn-resigter:hover,
.btn-login.facous,
.btn-resigter.facous {
    background: #d4d3d1;
    border: 1px solid #d4d3d1;
    box-shadow: 1px 1px 3px 2px rgba(160, 157, 145, 0.34) inset, 1px 1px 0 rgba(123, 116, 110, 1.0);
    margin: 0 5px;
    text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.8);
}

.vendordetailview .tab-pane {
    padding: 10px;
    width: 100%;
}

.vendordetailview>.tab-pane ul {
    display: block;
    padding: 0 10px 15px 0;
    /* list-style: none; */
    position: relative;
}

.vendordetailview>.tab-pane ul li {
    margin: 5px 10px 5px 24px;
    position: relative;
}

/* .vendordetailview>.tab-pane.prdinfo ul li:before {
    content: "\f005";
    font: 15px fontawesome;
    margin-right: 5px;
    position: absolute;
    left: -24px;
    top: 3px;
} */

.vendordetailview>.tab-pane .exp-gallery img {
    display: block;
    width: 150px;
    height: 150px;
    margin: 10px auto 5px auto;
}

.vendordetailview>.tab-pane.prdinfo img+img {
    margin: -10px 0 10px 0;
}

@media(min-width:768px) {
    .vendordetail-wrap>.vendordetailnav {
        margin-bottom: 15px;
        padding-top: 20px;
        justify-content: flex-start;
        border-bottom: 3px solid #e8e3df;
    }

    .vendordetail-wrap>.vendordetailnav li {
        width: auto;
    }

    .vendordetail-wrap>.vendordetailnav li:before {
        content: "";
        position: absolute;
        bottom: -4px;
        display: inline-block;
        width: 0;
        height: 3px;
        background-color: #a28979;
        transition: width 0.3s ease;
        left: 0;
        font-size: 15px;
    }

    .vendordetail-wrap>.vendordetailnav li:hover:before {
        width: 100%;
        background-color: #a28979;
        bottom: -4px;
    }

    .vendordetail-wrap>.vendordetailnav li a {
        padding: 5px 30px;
        margin-bottom: 0;
        border-color: transparent;
        transition: transform .3s ease-in-out;
        color: #807168;
    }

    .vendordetail-wrap>.vendordetailnav li a:hover {
        transform: scale(1.05) translateX(3px);
        font-weight: 600;
    }

    .vendordetail-wrap>.vendordetailnav li.active a {
        background: transparent;
        border: 1px solid transparent;
        color: #638235;
        font-weight: 600;
    }

    .vendordetail-wrap>.vendordetailnav li.active:before {
        width: 100%;
        background-color: #a0ad8c;
        bottom: -3px;
    }

    .vendordetailview>.tab-pane {
        padding: 20px;
    }

    .vendordetailview>.tab-pane ul li {
        font-size: 15px;
    }
}

/*----- 其他試用 -----*/

.otherprd-wrap {
    border-top: 5px solid #000;
    padding-top: 15px;
    /* margin: 30px 0 0 0; */
    margin: 0;
}

.otherprd-wrap .entry-body {
    margin: 0;
    text-align: left;
}

.otherprd-wrap .headTitle {
    margin: 0 auto;
}

.otherprd-wrap .headTitle:before {
    content: "";
    display: block;
    height: 0;
    background: #ddd;
    position: absolute;
    top: 50%;
    left: 0;
    width: 40%;
}

.otherprd-wrap .otherprd-body {
    padding: 0 10px;
}

.otherprd-body .other-item {
    display: block;
    position: relative;
    margin-bottom: 5px;
    border-bottom: 1px dashed #ddd;
    padding: 15px 10px;
}

.otherprd-body .other-item a {
    display: flex;
    flex-direction: row;
}

.otherprd-body .other-item a:focus,
.otherprd-body .other-item a:hover,
.otherprd-body .other-item a:active {
    color: #000;
}

.otherprd-body .otherprdimg {
    /* width: 100px; */
    height: 100px;
    margin-right: 10px;
    border: 1px solid #ddd;
    padding: 5px;
}

.otherprd-body .otherprdimg img {
    display: block;
    /* width: 100%; */
    height: 100%;
}

.otherprd-body .pquantity {
    background: #88bb61;
    color: #fff;
    font-size: .75em;
    left: 10px;
    line-height: 1em;
    padding: .5em 1em;
    position: absolute;
    top: 50%;
}

.otherprd-contarea {
    display: flex;
    flex-direction: column;
    width: calc(100% - 110px);
}

.otherprd-body h4 {
    border: none;
    display: block;
    font-size: 1.1em;
    font-weight: 400;
    height: auto;
    max-height: 3em;
    overflow: hidden;
    padding: 0 0 .2em;
    color: #000;
    line-height: 1.5em;
    margin: 0;
    order: 1;
}

.otherprd-body .desc {
    font-size: 14px;
    color: #707070;
    margin: 0 0 5px 0;
    padding: 0;
    display: flex;
    order: 2
}

.otherprd-body .desc .attention {
    background: #e9e9e9;
    padding: 0.25rem;
    margin: 0;
    width: 50%;
}

.otherprd-body .desc span {
    display: inline-block;
}

.otherprd-body .desc .pcount {
    background: #f3f3f3;
    padding: 0.25rem;
    margin: 0;
    width: 50%;
}

.otherprd-body .dealine {
    order: 3;
}

@media(min-width:768px) {
    .otherprd-wrap .headTitle:after {
        width: 80%;
        height: 0;
    }

    .otherprd-body .other-item {
        display: flex;
        margin-bottom: 15px;
        border-bottom: none;
    }

    .otherprd-body .other-item a {
        display: block;
    }

    .otherprd-body .otherprdimg {
        width: initial;
        height: initial;
        margin-right: 0px;
        border: 1px solid #ddd;
        padding: 10px;
    }

    .otherprd-body .otherprdimg img {
        display: block;
        width: 100%;
        height: 100%;
    }

    .otherprd-contarea {
        display: flex;
        flex-direction: column;
        width: 100%;
    }

    .otherprd-body h4 {
        display: block;
        font-size: 18px;
        width: 100%;
        margin: 0 0 0.5em 0;
        order: 3;
    }

    .otherprd-body .desc {
        font-size: 15px;
        color: #707070;
        width: 100%;
        margin: 0 0 10px 0;
        padding: 0;
        display: flex;
        order: 1;
    }

    .otherprd-body .desc .attention {
        background: #e9e9e9;
        padding: 0.75em 1.25em;
        width: 50%;
        text-align: center;
    }

    .otherprd-body .desc span {
        display: block;
        font-size: 14px;
        width: 95%;
    }

    .otherprd-body .desc span,
    .otherprd-body .desc b {
        text-align: right;
    }

    .otherprd-body .desc .pcount {
        background: #f3f3f3;
        padding: 0.75em 1.25em;
    }

    .otherprd-body .desc b {
        font-size: 15px;
    }

    .otherprd-body .dealine {
        order: 2;
        color: #707070;
    }

    .otherprd-body .dealine:before {
        content: "\f017";
        font: 15px FontAwesome;
        margin: 3px 5px 0 0;
    }

    .otherprd-body .pquantity {
        background: #88bb61;
        color: #fff;
        font-size: 1em;
        left: 10px;
        line-height: 1em;
        padding: .5em 1em;
        position: absolute;
        top: 15%;
        box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.2);
    }
}

@media(min-width:1024px) {
    .otherprd-body .desc span {
        width: 90%;
    }
}

@media(min-width:1400px) {

    .otherprd-body .desc .attention,
    .otherprd-body .desc .pcount {
        padding: 0.75em 1.5em;
    }

    .otherprd-body .desc span {
        width: 80%;
    }
}

table.table-vendorinfo {
    margin: 0 0 15px 0;
}

table.table-vendorinfo tbody tr th {
    background: #F5F5F5;
    text-align: left;
    color: #888888;
    padding: 0.75em 1em;
}

table.table-vendorinfo tbody tr td {
    padding: 0.75em 1em;
}

.vendordetailview .attention-items ul {
    list-style: decimal;
    font-size: 15px;
}

.vendordetailview .attention-items ul li {
    margin: 5px 10px 10px 24px
}

.vendordetailview>.tab-pane.explist {
    padding: 10px 0 0 0;
}

.selected-expList {
    padding: 0 10px 15px 10px;
    margin: 0 auto;
    background: #f9f7f2;
    text-align: center;
}

.selected-expList h4.explist-title {
    margin: 0 10px 10px 10px;
    font-size: 1.3em;
    line-height: 1.6;
    text-align: center;
    padding: 15px 0 10px 0;
    border-bottom: 2px solid #e0d6cf;
}

.vendordetailview .selected-expList ul {
    margin: 15px auto 5px auto;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: wrap;
    padding: 0;
    /* border: 1px solid #000; */
}

.vendordetailview .selected-expList ul li {
    display: inline-block;
    /* line-height: 20px;
    margin: 0 3px 10px 3px; */
    margin: 0;
}

.vendordetailview .selected-expList ul li a {
    display: block;
    margin: 5px;
    overflow: hidden;
    text-align: center;
    width: 60px;
    height: 100%;
}

/* .vendordetailview .selected-expList ul li a .img-headshot {
    width: 100%;
    margin: 0 auto 5px auto;
    height: 60px;
    box-shadow: none;
    vertical-align: bottom;
    padding-top: 15px;
    background: #6984b1;
    background-size: 100%;
    border-radius: 50%;
} */

.vendordetailview .selected-expList ul li a .explist-avatar {
    position: relative;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    margin-bottom: 5px;
}

.vendordetailview .selected-expList ul li a .explist-avatar .avatar-loginicon {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    font-size: 48px;
    display: block;
    padding: 0;
}

.vendordetailview .selected-expList ul li a .explist-avatar .avatar-loginicon:before {
    background-color: #6984b1 !important;
    border-radius: 50%;
}

.vendordetailview .selected-expList ul li a .explist-avatar .avatar-booking:before {
    display: block;
    content: "";
    background-image: url("../img/demo/img-user.svg");
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-position: center 8px;
    background-size: 80%;
    background-clip: border-box;
}

.vendordetailview .selected-expList ul li a span {
    color: #9c6f68;
    padding: 15px 0;
    font-size: 13px;
    line-height: 13px;
    /* display: none; */
}

.vendordetailview a.showmore {
    display: flex;
    padding: 1em;
    font-size: 15px;
    margin: 10px 0px 15px 0px;
    color: #9c6f68;
    text-align: center;
    background: #e0d9d4;
    box-shadow: -3px -3px 6px rgba(255, 255, 255, 0.8);
    align-items: center;
    justify-content: center;
}

.vendordetailview a i {
    margin: 3px 5px;
    font-size: 30px;
}

.vendordetailview p.text-hint {
    font-size: 16px;
    font-weight: 600;
    margin-top: 25px
}

#expList-more {
    display: none;
}

@media (min-width:768px) {
    .vendordetailview>.tab-pane.explist {
        padding: 0;
    }

    .vendordetailview .selected-expList ul {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 0;

    }

    .vendordetailview .selected-expList ul li {
        display: inline-block;
        /* line-height: 20px;
    margin: 0 3px 10px 3px; */
        margin: 0;
    }

    .vendordetailview .selected-expList ul li a {
        display: block;
        margin: 5px;
        overflow: hidden;
        text-align: center;
        width: 55px;
        height: 100%;
    }

    .vendordetailview .selected-expList ul li a .img-headshot {
        width: 100%;
        margin: 0 auto 10px auto;
        height: 60px;
        box-shadow: none;
        vertical-align: bottom;
        padding-top: 15px;
        background: #6984b1;
        background-size: 100%;
        border-radius: 50%;
    }
}

@media (min-width:1024px) {
    .vendordetailview>.tab-pane.explist {
        padding: 0;
    }

    .vendordetailview .selected-expList ul {
        margin: 0 auto;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        flex-wrap: wrap;
        padding: 0;
    }

    .vendordetailview .selected-expList ul li {
        display: inline-block;
        margin: 0;
    }

    .vendordetailview .selected-expList ul li a {
        display: block;
        margin: 5px;
        overflow: hidden;
        text-align: center;
        width: 72px;
        height: 100%;
    }
}

@media (min-width:1024px) {
    .vendordetailview .selected-expList ul li a {
        width: 85px;
        height: 100%;
    }
}

@media (min-width:1400px) {
    .vendordetailview .selected-expList ul {
        width: 90%;
    }

    /* .vendordetailview .selected-expList ul li a {
        display: block;
        margin: 5px;
        overflow: hidden;
        text-align: center;
        width: 85px;
        height: 100%;
    } */
    .vendordetailview .selected-expList ul li a .explist-avatar {
        position: relative;
        width: 70px;
        height: 70px;
        border-radius: 50%;
        margin-bottom: 5px;
    }

    .vendordetailview .selected-expList ul li a .explist-avatar .avatar-loginicon {
        width: 100%;
        height: 100%;
        border-radius: 50%;
        font-size: 54px;
        display: block;
        padding: 0;
    }

    .vendordetailview .selected-expList ul li a .explist-avatar .avatar-loginicon:before {
        background-color: #6984b1 !important;
        border-radius: 50%;
    }

    .vendordetailview .selected-expList ul li a .explist-avatar .avatar-booking:before {
        display: block;
        content: "";
        background-image: url("../img/demo/img-user.svg");
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center 8px;
        background-size: 90%;
        background-clip: border-box;
    }
}

.antity {
    background: #88bb61;
    color: #fff;
    font-size: 1em;
    left: 10px;
    line-height: 1em;
    padding: .5em 1em;
    position: absolute;
    top: 30px;
}

.force-show .antity {
    position: relative;
    top: initial;
    left: initial;
}

.h3-exp {
    text-overflow: clip !important;
    overflow: initial !important;
}

.exp-apply-listfilter.Event-listfilter .ContentContainer {
    height: 100px;
}

.exp-apply-listfilter.Event-listfilter .ContentContainer small span {
    font-size: 18px;
    display: block;
    text-align: right;
    position: absolute;
    right: 0;
    /* top:78%; 
    bottom: -40%;*/
    font-family: "Open Sans", "微軟正黑體", Arial, Helvetica, sans-serif;
    font-weight: bold;
}

/*-----試用產品上稿範例---*/

.exp-post-content {
    clear: both;
    font-size: 16px;
    color: #2d2d2d;
}

.exp-post-content .foreword {
    /* border: 3px solid; */
    margin: 30px 0;
    padding: 15px 25px;
    font-size: 1.8rem;
    color: #999;
    font-weight: 400;
    line-height: 1.85em;
    word-break: break-word;
}

.exp-post-content h2,
.exp-post-content h3,
.exp-post-content h4 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.exp-post-content h2 {
    font-size: 2.5rem;
}

.exp-post-content h3 {
    font-size: 2.25rem;
    font-weight: 600;
}

.exp-post-content h4 {
    font-size: 2rem;
    font-weight: 600;
    font-style: italic;
}

.exp-post-content p {
    color: #555;
    font-size: 16px;
}

.exp-post-content ol,
.exp-post-content ul {
    margin: 1rem 0;
}

.exp-post-content ol {
    padding: 0 10px 15px 24px;
}

.exp-post-content ul {
    list-style-type: disc !important;
}

.exp-post-content ol li,
.exp-post-content ul li {
    margin-bottom: 1rem;
    color: #555;
}

.exp-post-content .italic {
    font-style: italic;
}

.exp-post-content .line {
    text-decoration: underline;
}

.exp-post-content .highlight {
    background-color: #ffe888;
}

.exp-post-content .remark {
    color: #799c48;
    font-size: 0.875rem;
    margin: 0 2px;
}

.exp-post-content .remark-content {
    font-size: 0.875rem;
    padding: 25px;
    background: #eee;
    margin: 15px 0 20px;
    display: none;
}

.exp-post-content .remark-content span {
    font-weight: bold;
    color: #799c48;
}

/* .post-content blockquote {
    margin: 25px 0;
    border-width: 0;
    background: #eee;
    padding: 20px 25px;
}*/

.exp-post-content blockquote .from {
    font-size: 1.1rem;
    font-style: italic;
    color: #555;
    margin-top: 5px;
}

.exp-post-content blockquote {
    margin: 25px 5px 20px 30px;
}

.exp-post-content p.tip {
    border-left: #00afc8 solid 3px;
    padding: 0 10px;
    font-style: italic;
    font-size: .9rem;
}

.exp-post-content img {
    max-width: 100%;
    /* width: auto !important; */
    margin: 30px auto;
    display: block;
    height: auto;
}

.exp-post-content figure {
    text-align: center;
    max-width: 100%;
    height: auto;
    margin: 0 auto;
}

.exp-post-content figcaption {
    text-align: left;
    margin: 3px 0 30px 0;
    font-size: .85rem;
    color: #6c757d;
    letter-spacing: .5px;
    text-align: center;
}

.exp-post-content figure img {
    margin-bottom: 0;
}

.post-content img.img-icon {
    margin: 0 2px;
    display: inline;
    width: auto;
}

.exp-post-content iframe {
    max-width: 100%;
    width: 100% !important;
}

.exp-post-content .videoWrapper {
    position: relative;
    padding-bottom: 56.25%;
    /* 16:9 */
    margin: 25px 0;
    text-align: left;
}

.exp-post-content .videoWrapper iframe {
    position: absolute;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.exp-post-content table caption {
    font-size: 1.5rem;
    letter-spacing: .5px;
    margin-bottom: .5rem;
    color: #6c757d;
}

.exp-post-content table {
    border: 1px solid #cfd9db;
}

.exp-post-content table.table-vendorinfo {
    font-size: 15px;
    border: 1px solid #cfd9db;
}

.exp-post-content table th,
.exp-post-content table td {
    border: 1px solid #cfd9db;
}

/* .post-content table.table-vendorinfo tbody tr td {
    word-break: break-all;
} */

/* code modal */

.exp-post-content .modal-code .modal-content {
    padding: 38px;
}

.exp-post-content .modal-code .modal-header {
    justify-content: center;
    border-bottom: 0;
}

.exp-post-content .modal-code .modal-title {
    text-align: center;
    font-size: 2.5rem;
    font-weight: 500;
}

.exp-post-content .modal-code .modal-content {
    position: relative;
}

.exp-post-content .modal-code .modal-content .close {
    font-weight: normal;
    position: absolute;
    right: 2rem;
    top: 2rem;
}

.exp-post-content .modal-code .modal-dialog {
    max-width: 700px;
}

.exp-post-content .modal-code .code-section {
    padding: 1rem;
    background: #eee;
    margin-bottom: 1rem;
}

.exp-post-content .btn-outline-primary {
    color: #fff;
    background: #9ac17c;
    border-color: #9ac17c;
    box-shadow: 3px 3px 0 0 #476259;
}

.exp-post-content .btn-outline-primary:hover {
    color: #fff;
    background: #8faf77;
    border-color: #8faf77;
    box-shadow: 2px 2px 0 0 #476259;
}

/*-----心得回饋2020/05/08-----*/

.feedback-title {
    padding: 0;
    display: inline-block;
    position: relative;
    width: auto;
}

.feedback-title h3 {
    font-weight: bolder;
}

.feedback-title span {
    color: #d0758d;
    margin: 0 10px;
    font-size: .8rem;
    font-family: "Open Sans", "微軟正黑體", Arial, Helvetica, sans-serif;
}

.review-scroes-total {
    margin-bottom: 5px;
    padding: 16px 12px;
}

.review-scroes-total {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.product-info-score-image {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    margin-right: 24px;
}

.score-image {
    width: 20px;
    height: 20px;
    margin-right: 3px;
}

.spoon-full {
    background: url("/dispPageBox/foodnext/assets/img/exp/fn_icon_7_a.png") no-repeat;
    background-size: 15px 15px;
}

.spoon-half {
    background: url("/dispPageBox/foodnext/assets/img/exp/fn_icon_7_b.png") no-repeat;
    background-size: 15px 15px;
}

.spoon-empty {
    background: url("/dispPageBox/foodnext/assets/img/exp/fn_icon_7_e.svg?1") no-repeat;
    background-size: 15px;
}

.score-number {
    color: #88bb61;
    font-weight: 600;
    line-height: 20px;
    text-align: right;
    display: inline-flex;
    justify-content: flex-end;
}

.review-scroes-total .score-number {
    font-size: 2.4rem;
    background: #aecfc4;
    width: 6rem;
    height: 6rem;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    align-items: center;
    margin: auto;
}

.score-reviews {
    color: #6d7965;
    margin: 12px 0 0 0;
    font-size: 16px;
    width: 50%;
}

@media(min-width:1366px) {

    .review-scroes-total,
    .product-info-score-image {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .score-number {
        margin-right: 20px;
    }

    .score-reviews {
        margin: 0;
    }
}

/*---平均評價---*/

.review-scroes-average {
    /* background: #f9f9f9; */
    margin-bottom: 10px;
    padding: 0 24px 12px 24px;
    width: 80%;
    margin: auto;
}

@media(max-width:768px) {
    .review-scroes-average {
        width: 100%;
        padding: 0;
    }
}

.scroes-average-bar {
    clear: both;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    margin-bottom: 24px;

    padding-left: 40px;
    background-image: url("/dispPageBox/foodnext/assets/img/exp/fn_icon_3.png");
    background-repeat: no-repeat;
    background-size: 30px;
    background-position-y: 5px;
}

.scroes-average-bar .scroes-average-bar--title {
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    /* white-space: nowrap; */
    overflow: hidden;
    /* text-overflow: ellipsis; */
    font-size: 15px;
    line-height: 20px;
    font-weight: bolder;
}

.scroes-average-bar .scroes-average-bar--score {
    display: inline-block;
    width: 30px;
    text-align: right;
    font-size: 18px;
    line-height: 18px;
    font-weight: bolder;
    vertical-align: top;
    color: #d2ad86;
    order: 3;
}

.scroes-average-bar--bar {
    background: #ececec;
    display: flex;
    align-items: center;
    font-size: 0.75em;
    border-radius: 0.25em;
    height: 10px;
    width: calc(100% - 30px);
    order: 2;
    margin-bottom: 0;
}

.review-scroes-average .progress-bar {
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
}

.scroes-average-bar--value {
    height: 100%;
    display: block;
    background-color: #AFDBBB !important;
}

/*---個人心得---*/

.prd-review-container {
    margin-bottom: 24px;
    padding: 16px 0;
}

.prd-review-container .review-card {
    padding: 1rem 0;
    border-bottom: 1px solid #ddd;
    margin-bottom: 1rem;
}

.review-cont-container .review-user-info,
.review-cont-container .review-card-body {
    position: relative;
    margin-bottom: 8px;
    /* border: 1px solid #000; */
}

/*作者資訊*/

.review-cont-container .review-user-info {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
}

.review-user-info .user-img-block {
    position: relative;
    margin-right: 16px;
    display: block;
}

.review-user-info .user-img-block .user-img img {
    width: 44px;
    min-width: 44px;
    max-width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid #bed0c3;
    display: block;
    background: #AFDBBB url("../img/demo/img-user.svg") no-repeat center;
    background-size: contain;
    margin: 0;
}

.review-user-info .author-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    font-size: 1em;
    line-height: 18px;
}

.review-user-info .author-info .author-name a {
    color: #333;
    line-height: 1.6;
}

.review-user-info .author-info {
    color: #888;
    margin: 0 3px 3px 0;
}

.author-info>div+div:before {
    content: "．";
    margin: 2px;
}

.author-info>div+div.review-publish:before {
    display: none;
}

/* .author-info .author-name:after,
.author-info .author-age:after {
} */

.review-user-info .author-info .author-country {
    margin-right: 16px;
}

.review-user-info .author-info .review-publish {
    width: 100%;
    display: block;
    color: #707070;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
}

.review-cont-area .review-share {
    width: 100%;
    display: block;
    color: #707070;
    font-size: 12px;
    line-height: 18px;
    font-weight: 400;
    margin-top: 20px;
    text-align: right;
}

@media(max-width:768px) {
    .review-cont-area .review-share {
        text-align: center;
        padding-top: 20px;
    }
}

/* .review-user-info .author-info .review-publish:before {
    content: "\f017";
    font: 15px FontAwesome;
    margin-right: 5px;
} */

/*個人評論內容*/

.review-cont-container .review-card-body {
    display: block;
    margin-bottom: 0;
}

.review-collapse-box.collapse[aria-expanded="false"] {
    line-height: 24px;
    overflow: hidden;
    /* text-overflow: ellipsis; */
    /* display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    height: 100px; */
    margin-bottom: 20px;
}

.review-card-body a.btn-collapse-review {
    display: block;
    background: #fff;
    width: 80px;
    height: 40px;
    text-align: center;
    margin: 25px auto 10px auto;
    color: #000;
    white-space: nowrap;
}

.review-card-body a.btn-collapse-review.collapsed:after {
    display: block;
    content: "展開";
    padding: 10px 25px;
    background: #b9e0d6;
    border: 1px solid #b9e0d6;
    box-shadow: 3px 3px 0 rgba(71, 98, 89, 0.6);
}

.review-card-body a.btn-collapse-review:not(.collapsed):after {
    display: block;
    content: "收起";
    padding: 10px 25px;
    background: #f5d4b5;
    border: 1px solid #f5d4b5;
    box-shadow: 3px 3px 0 rgba(185, 123, 65, 0.65);
}

.review-cont-container .review-cont-area {
    width: 100%;
    margin-bottom: 1rem;
}

.review-cont-area .author-score-ifno {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 8px 5px;
    font-size: 15px;
}

.review-cont-area .author-score {
    display: flex;
    margin-right: 16px;
    width: 100%;
    max-width: 250px;
}

.review-cont-area .author-score .score-image {
    width: 16px;
    height: 16px;
}

.review-content {
    color: #333;
    line-height: 1.8;
}

/*評論圖片*/

.review-cont-container .review-cont-image {
    margin: 0 0 10px 0;
    display: flex;
    justify-content: flex-start
}

.review-cont-container .review-cont-image .review-image-bg {
    /* background: url("../img/demo/Image16.jpg") center no-repeat;
    background-size: cover; */
    /* border: 1px solid #ddd;
    padding: 0px; */
    display: inline-block;
    width: 200px;
    height: auto;
    margin: 10px 10px 0 10px;
}

.review-cont-container .review-cont-image .review-image-bg img {
    display: block;
    width: 100%;
    margin: 0;
}

.embed-youtube-box {
    padding: 16px 0;
    position: relative;
}

.embed-responsive {
    position: relative;
    display: block;
    height: 300px;
    padding: 0;
    overflow: hidden;
}

.embed-responsive-16by9 {
    padding-bottom: 56.25%;
}

.embed-responsive .embed-responsive-item,
.embed-responsive embed,
.embed-responsive iframe,
.embed-responsive object,
.embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0
}

/*--選單加識別標識--*/

.header .type-nav ul li a.new {
    text-shadow: 0 0 5px rgba(226, 202, 43, 0.87);
    background: url("../img/icon_new.svg") 25px 0px no-repeat;
    background-size: 25%;
    /* filter: drop-shadow(#e06d5f 0px 1000px); */
}

/* 
.header .type-nav ul li a.new::after {
    content: "";
    display: block;
    position: absolute;
    top: -5px;
    left: 20.5%;
    background: url("../img/icon_new.svg") right no-repeat;
    width: 30px;
    height: 30px;
    background-size: contain;
    transform: translateY(-1000px);
    filter: drop-shadow(#e06d5f 0px 1000px);
    -webkit-filter: drop-shadow(#e06d5f 0px 1000px);
    -webkit-transform: translateY(-1000px);
    -moz-transform: translateY(-1000px);
    -ms-transform: translateY(-1000px);
    -o-transform: translateY(-1000px);
} */

.prod-info th {
    min-width: 100px;
}

/* .exp-user {
    max-width: 75px;
    max-height: 75px;
} */

.vendordetailview>.tab-pane .exp-user {
    width: 54px;
    height: 54px;
}

@media(min-width:1024px) {
    .vendordetailview>.tab-pane .exp-user {
        width: 66px;
        height: 66px;
    }
}

@media(min-width:1366px) {
    .vendordetailview>.tab-pane .exp-user {
        width: 75px;
        height: 75px;
    }
}

.exp-gallery+.exp-gallery {
    margin-left: .8rem;
    display: block;
}

.modal-dialog.modal-lg .row {
    margin-bottom: 0;
}

/* 試用更新 */
.demandprogress img {
    margin-right: 5px;
}

.prdnotearea h2 {
    font-weight: bolder;
    margin-left: 15px;
}

.prdnotearea .prdprice {
    color: #d3ad86;
    font-weight: bolder;
    font-size: 24px;
    margin: 10px 10px 10px 15px;
}

.prodwrap .text-tip {
    color: #789d90;
}

.sharesnumber li b {
    text-align: left;
}

.demandprogress {
    border-bottom: 1px solid #eff1f1;
    padding-bottom: 12px;
    padding-top: 10px;
}

.demandprogress .demanddate::before {
    display: none;
}

.demandprogress .demandtext,
.demandprogress .demanddate {
    font-size: 18px;
    font-weight: bold;
    color: #6f6f6f;
}

.prdnotearea ul.demandprogress li {
    line-height: 1.2;
}

.btn-apply {
    background: #d3ad86;
    /* font-size: 20px; */
    letter-spacing: 2px;
    /* font-weight: bolder; */
}

#exchange.btn-apply,
.table .btn-apply {
    font-size: 15px;
    font-weight: normal;
}

.btn-apply.btn-event {
    letter-spacing: initial;
}

.table .btn-apply {
    font-size: 14px;
}

.limit-text {
    color: #d3ad86;
    font-weight: bolder;
    padding-bottom: 20px;
}

.vendordetail-wrap>.vendordetailnav li.active a {
    background: #d3ad86;
    border: 1px solid transparent;
    color: #fff;
    font-weight: 600;
    border-radius: 16px 16px 0 0;
}

@media(max-width:768px) {
    .vendordetail-wrap>.vendordetailnav li.active a {
        border-radius: 0;
    }
}

.vendordetail-wrap>.vendordetailnav li.active:before {
    background-color: #d3ad86 !important;
}

.vendordetail-wrap>.vendordetailnav {
    border-bottom: 3px solid #adcec3;
}

.review-cont-container {
    background: #aecfc4;
    border-radius: 15px;
    padding: 20px 60px;
}

@media(max-width:768px) {
    .review-cont-container {
        padding: 20px;
    }
}

.review-card-body {
    margin-left: 0;
}

.review-cont-area .review-share a {
    color: #cfaf87;
    display: inline-block;
}

.review-content {
    font-size: 16px;
    padding-bottom: 15px;
}

.progress {
    background-color: #fff;
    border-radius: 12px;
    margin-bottom: 0;
    width: 100%;
    height: 16px;
}

.progress.scroes-average-bar--bar {
    width: calc(100% - 30px);
}

@media(max-width:768px) {
    .progress {
        width: 85%;
    }
}

.progress .progress-bar.progress-bar-dark {
    background-color: #000;
}

.score-number {
    color: #000;
    font-size: 20px;
}

.review-user-info .author-info {
    color: #000;
    font-size: 16px;
    font-weight: bolder;
}

.review-user-info .author-info .review-publish {
    color: #5b6f68;
    font-size: 14px;
}

.prd-review-container .review-card {
    border-bottom: none;
}

.feedback-wrap {
    margin-top: -15px;
}

.prd-review-header {
    background: #f5f5f5;
    padding: 20px;
    border-radius: 0 0 15px 15px;
}

.product-info-score-image:before {
    display: block;
    content: '綜合評分';
    color: #d2ad86;
    font-size: 18px;
    padding-right: 10px;
    font-weight: bolder;
    width: 82px;
}

.grid-container {
    width: 50%;
    display: grid;
    grid-template-columns: 100px;
    grid-template-rows: 1fr 50px;
    gap: 0px 0px;
    grid-template-areas:
        "Score Name"
        "Score Process";
    margin: auto;
}

.grid-container .score-number {
    grid-area: Score;
}

.grid-container .product-info-score-image {
    grid-area: Process;
}

@media(max-width:768px) {
    .product-info-score-image {
        margin-right: 0;
    }

    .product-info-score-image:before {
        font-size: 12px;
    }
}

.grid-container .feedback-title {
    grid-area: Name;
}

@media(max-width:768px) {
    .grid-container {
        width: 100%;
        grid-template-columns: 80px 1fr;
        grid-template-rows: 1fr 1fr;
        grid-template-areas:
            "Score Name"
            "Process Process";
    }
}

.prd-review-container .feedback-title h4 {
    color: #d2ad86;
    font-size: 1.8em;
    font-weight: bolder;
    padding: 15px 0 0;
}

@media(max-width:768px) {

    .btn-group-justified.sign-show>.btn,
    .btn-group-justified.sign-show>.btn-group {
        display: block;
        width: 100%;
    }

    .sign-show .btn-block+.btn-block {
        margin-top: 0;
    }
}

.scroll-icon {
    position: fixed;
    right: 20px;
    bottom: 86px;
    width: 120px;
    height: 120px;
    text-align: center;
    display: none;
    z-index: 100;
}

.scroll-icon:hover {
    text-decoration: none;
}

.closeScroll {
    position: absolute;
    z-index: 120;
    top: -12px;
    right: -10px;
    height: 36px;
    width: 36px;
    background: url("/dispPageBox/foodnext/assets/img/close.png");
}

.tab-content p {
    line-height: 1.4;
}

@media(max-width:768px) {
    .tab-content table {
        max-width: 100% !important;
    }
}