@charset "utf-8";


/*==================================================
Limit box-sizing to specific sections
================================================== */
.apac_contents *, .apac_contents *::before, .apac_contents *::after,
.suntory_contents *, .suntory_contents *::before, .suntory_contents *::after,
.brands_contents *, .brands_contents *::before, .brands_contents *::after {
    box-sizing: border-box;
}


/*==================================================
sp
================================================== */

#popfind-sitesearch {
    display: none;
}

#popfind-sitesearch.active {
    display: block;
}



/* ========================================================================
[sp]loading
========================================================================= */
#loading {
    display: none;
}

#loading.active {
    display: block;
}

#loading .skelton .skelton_recommend {
    background: linear-gradient(to top, #DDF7FF 0%, #FFF 30%);
    margin: 0 0 10.666666666666667vw;
    padding: 0 0 8vw;
    width: 100%;
}

#loading .skelton .skelton_recommend_title {
    margin: 0 auto 5.333333333333333vw;
    padding: 0;
    width: 89.333333333333333vw;
    text-align: center;
}

#loading .skelton .skelton_recommend_title span {
    margin: 0 0 3.3333333333333vw;
    width: 29.3333333333333vw;
    height: 4.4vw;
    display: inline-block;
    background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
    background-size: 800px;
    animation: shimmer 1.5s infinite;
}

#loading .skelton .skelton_recommend_list {
    margin: 0 auto;
    padding: 0;
    width: 89.333333333333333vw;
    list-style: none;
}

#loading .skelton .skelton_recommend_list li {
    margin: 0;
    padding: 0;
    width: 100%;
    display: flex;
}

#loading .skelton .skelton_recommend_list figure {
    margin: 0 4vw 0 0;
    width: 32vw;
    height: 30vw;
    background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
    background-size: 800px;
    animation: shimmer 1.5s infinite;
}

#loading .skelton .skelton_recommend_list .skelton_text_block {
    width: 48vw;
}

#loading .skelton .skelton_recommend_list .skelton_recommend_label {
    margin-bottom: 4vw;
    width: 29.3333333333333vw;
    height: 4vw;
    background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
    background-size: 800px;
    animation: shimmer 1.5s infinite;
}

#loading .skelton .skelton_recommend_list .skelton_recommend_text {
    width: 36vw;
    height: 4vw;
    background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
    background-size: 800px;
    animation: shimmer 1.5s infinite;
}


#loading .skelton .skelton_tab {
    position: relative;
    display: flex;
    justify-content: space-between;
    margin: 0 auto 5.3333333333333vw;
    padding: 0;
    width: 92vw;
    list-style: none;
}

#loading .skelton .skelton_tab li {
    height: 12vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

#loading .skelton .skelton_tab li .label {
    font-size: 4vw;
    font-weight: bold;
}

#loading .skelton .skelton_tab li .count {
    font-size: 2.933333333333333vw;
}

#loading .skelton_tab01 {
    width: 17.866666666666667vw;
    border-right: 0.266666666666667vw #ddd solid;
    border-bottom: 0.8vw #00ABE4 solid;
}

#loading .skelton_tab02 {
    width: 17.866666666666667vw;
    border-right: 0.266666666666667vw #ddd solid;
    border-bottom: 0.266666666666667vw #ddd solid;
}

#loading .skelton_tab03 {
    width: 25.866666666666667vw;
    border-right: 0.266666666666667vw #ddd solid;
    border-bottom: 0.266666666666667vw #ddd solid;
}

#loading .skelton_tab04 {
    width: 29.866666666666667vw;
    border-bottom: 0.266666666666667vw #ddd solid;

}


#loading .skelton_sorting {
    margin: 0 auto 8vw;
    padding: 0 0 4vw;
    width: 92vw;
    border-bottom: 0.266666666666667vw #ddd solid;
}


#loading .skelton_sorting::before {
    content: '';
    display: block;
    width: 21.3333333333333vw;
    height: 4.8vw;
    background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
    background-size: 800px;
    animation: shimmer 1.5s infinite;
}


#loading .skelton_search_results {
    list-style: none;
    width: 84vw;
    margin: 0 auto;
    padding: 0;
}

#loading .skelton .skelton_search_results li {
    width: 84vw;
    margin: 0 0 6.4vw;
    padding: 0;
    display: flex;
}


#loading .skelton_search_results .skelton_result_number {
    width: 8.533333333333333vw;
    font-size: 4vw;
    font-weight: bold;
}

#loading .skelton_search_results li .skelton_text_block {
    width: 84vw;
}

#loading .skelton_search_results .skelton_result_title {
    margin: 0;
    display: inline-block;
    width: 21.3333333333333vw;
    height: 4vw;
    background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
    background-size: 800px;
    animation: shimmer 1.5s infinite;
}

#loading .skelton_search_results .skelton_result_text {
    margin: 0;
    display: inline-block;
    width: 100%;
    height: 4vw;
    background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
    background-size: 800px;
    animation: shimmer 1.5s infinite;
}


@keyframes shimmer {
    0% {
        background-position: -400px 0;
    }

    100% {
        background-position: 400px 0;
    }
}


/* ========================================================================
[sp]search_box
========================================================================= */
.search_contents .search_box {
    margin: 0 auto 8vw;
    width: 89.333333333333333vw;
    height: 14.666666666666667vw;
    position: relative;
}

.search_contents .search_box.search_box_bottom {
    margin: 0 auto 8vw;
}

.search_contents .search_box .search_txt {
    border: 0.266666666666667vw #ccc solid;
    background: none;
    width: 89.333333333333333vw;
    height: 14.666666666666667vw;
    padding: 0 16vw 0 5.333333333333333vw;
    font-size: 4.266666666666667vw;
    color: #222;
}

.search_contents .fieldset input::placeholder {
    color: #ccc;
}

.search_contents .search_txt:focus::placeholder {
    color: transparent;
}

.search_contents .search_box .search_txt:focus {
    outline: none;
}

.search_contents .search_box .search_btn {
    width: 16vw;
    height: 14.666666666666667vw;
    background: none;
    text-indent: -99999px;
    overflow: hidden;
    position: absolute;
    top: 0;
    right: 0;
    cursor: pointer;
    border: none;
}

.search_contents .search_box::before {
    content: '';
    width: 5.333333333333333vw;
    height: 5.333333333333333vw;
    background-color: #00ABE4;
    -webkit-mask: var(--icon-search);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2.666666666666667vw);
    right: 5.333333333333333vw;
    pointer-events: none;
}

.search_contents .search_box .btn_clear {
    appearance: none;
    border: none;
    width: 4vw;
    height: 4vw;
    background-color: #00ABE4;
    -webkit-mask: var(--icon-close);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 2vw);
    right: 14.4vw;
    display: none;
    z-index: 1001;
}

.search_contents .search_box.active .btn_clear {
    display: block;
}

/* ========================================================================
[sp]history_list_local
========================================================================= */

.search_box .history_list_local {
    margin: 0;
    padding: 0;
    list-style: none;
    width: 89.333333333333333vw;
    background: #fff;
    border-top: 0.266666666666667vw #ccc solid;
    border-right: 0.266666666666667vw #ccc solid;
    border-left: 0.266666666666667vw #ccc solid;
    border-bottom: 0.266666666666667vw #ccc solid;
    box-sizing: border-box;
    border-radius: 0 0 0.6666666666667vw 0.6666666666667vw;
    position: absolute;
    top: 14.4vw;
    left: 0;
    display: none;
    z-index: 1000;
}

.search_box .history_list_local::before {
    content: '搜尋紀錄';
    width: 88.8vw;
    height: 10.533333333333333vw;
    font-size: 3.7333333333333vw;
    color: #000;
    background: #eee;
    display: flex;
    align-items: center;
    padding: 0 4.4vw;
    box-sizing: border-box;
}

.search_box .history_list_local.active {
    display: block;
}

.search_box .history_list_local li {
    margin: 0 auto;
    width: 100%;
    min-height: 10.533333333333333vw;
    border-bottom: 1px #eee solid;
    font-size: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 4.4vw;
    box-sizing: border-box;
}

.search_box .history_list_local li:last-child {
    border-bottom: none;
}

.search_box .history_list_local li a {
    color: #222;
    text-decoration: none;
}

.search_box .history_list_local li a:hover {
    text-decoration: underline;
    color: #df3600;
}

.search_box .history_list_local li .btn_delete {
    padding: 0;
    background-color: transparent;
    border: none;
    appearance: none;
    border: none;
    text-indent: -9999px;
    width: 4vw;
    height: 4vw;
    background: #aaa;
    border-radius: 2vw;
    cursor: pointer;
    position: relative;
}

.search_box .history_list_local li .btn_delete::before {
    content: '';
    width: 1.3333333333333vw;
    height: 1.3333333333333vw;
    background-color: #ffffff;
    -webkit-mask: var(--icon-close);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    -webkit-mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    position: absolute;
    top: calc(50% - 0.666666666666667vw);
    left: calc(50% - 0.666666666666667vw);
}

.search_box .history_list_local li .btn_delete:hover {
    background: #df3600;
}



/* ========================================================================
[sp]_recommendlinks
========================================================================= */

.search_contents ._recommendlinks {
    background: linear-gradient(to top, #DDF7FF 0%, #FFF 30%);
    margin: 0 0 10.666666666666667vw;
    padding: 0 0 8vw;
    width: 100%;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._label {
    position: relative;
    top: auto;
    left: auto;
    margin: 0 0 5.333333333333333vw;
    font-size: 4.8vw;
    font-weight: bold;
    text-align: center;
    display: block;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._links {
    margin: 0 auto;
    padding: 0;
    width: 89.333333333333333vw;
    display: flex;
    flex-wrap: wrap;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._links ._link {
    margin: 0;
    padding: 0;
    width: 100%;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._link+._link {
    margin-top: 5.333333333333333vw;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._wrap {
    margin: 0 auto;
    padding: 0;
    width: 100%;
    min-height: 28vw;
    position: relative;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_title {
    margin: 1.6vw 0 4vw 32vw;
    padding: 1.333333333333333vw 0 0;
    font-size: 3.733333333333333vw;
    font-weight: bold;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_title a {
    color: #222;
    text-decoration: none;
    font-weight: bold;
    margin: 0;
    padding: 0;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_summary {
    margin: 0 0 0 32vw;
    padding: 0;
    font-size: 3.733333333333333vw;
    line-height: 1.35;
    color: #222;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_image {
    margin: 0;
    padding: 0;
    background: none;
    width: 28vw;
    position: absolute;
    top: 0;
    left: 0;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_image a {
    display: block;
    width: 28vw;
    margin: 0;
    padding: 0;
}

.search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_image img {
    margin: 0;
    padding: 0;
    width: 100%;
    height: auto;
    max-width: 28vw;
    vertical-align: bottom;
}


/* ========================================================================
[sp]tab（_attributes）
========================================================================= */
.search_contents ._attributes form {
    margin: 0 auto 8vw;
    width: 92vw;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
}

.search_contents ._sitesearch_component ._attributegroup {
    margin: 0;
    padding: 0;
}

.search_contents ._sitesearch_component ._attributegroup ._group,
.search_contents ._attribute._attribute_select_all,
.search_contents ._attribute._attribute_select_all label {
    display: none;
}

.search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute input {
    display: none;
}

.search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute ._count {
    font-size: 2.933333333333333vw;
}

.search_contents ._attribute:nth-child(2) {
    width: 17.866666666666667vw;
    border-right: 0.266666666666667vw #ddd solid;
    border-bottom: 0.266666666666667vw #ddd solid;
}

.search_contents ._attribute:nth-child(3) {
    width: 17.866666666666667vw;
    border-right: 0.266666666666667vw #ddd solid;
    border-bottom: 0.266666666666667vw #ddd solid;
}

.search_contents ._attribute:nth-child(4) {
    width: 25.866666666666667vw;
    border-right: 0.266666666666667vw #ddd solid;
    border-bottom: 0.266666666666667vw #ddd solid;
}

.search_contents ._attribute:nth-child(5) {
    width: 29.866666666666667vw;
    border-bottom: 0.266666666666667vw #ddd solid;
}

.search_contents ._attribute label {
    width: 100%;
    height: 12vw;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: none;
    font-size: 4vw;
    font-weight: bold;
    position: relative;
    cursor: pointer;
}

.search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute {
    border-bottom: 0.266666666666667vw #ddd solid;
}

.search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute._select {
    border-bottom: 0.8vw #00ABE4 solid;
}

.search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute._disable {
    pointer-events: none;
}

.search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute._disable {
    text-decoration: none;
    color: #757575;
    border-bottom: 0.266666666666667vw #ddd solid;
}

/* ========================================================================
[sp]search_results
========================================================================= */
.search_contents .search_results {
    margin: 0 auto 8vw;
    width: 100%;
    /* min-height: 106.666666666666667vw; */
}

.search_contents .search_results ._recommendlinks._recommendlinks_type2 {
    border: none;
}

.search_contents ._sitesearch_component ._items ._item ._wrap,
.search_contents .search_results .wrap {
    margin: 0 auto;
    width: 92vw;
}

.search_contents ._sitesearch_component ._items>._item ._wrap *[class^=_] {
    padding: 0;
}


.search_contents ._searchstatusfull {
    font-size: 4.8vw;
    font-weight: bold;
    margin: 0 0 6.4vw;
    padding: 0 0 4vw;
    border-bottom: 0.266666666666667vw #ddd solid;
}


.search_contents .result_count {
    font-size: 4.8vw;
    font-weight: bold;
    margin: 0 0 6.4vw;
    padding: 0 0 4vw;
    border-bottom: 0.266666666666667vw #ddd solid;
}

.search_contents .search_results .hidden_item ._item {
    display: none;
}

.search_contents .search_results .hidden_item.active ._item {
    display: block;
}

.search_contents .search_results ._item {
    margin: 0 0 6.4vw;
}

.search_contents .search_results ._wrap {
    position: relative;
    padding: 0 0 0 8.533333333333333vw;
}

.search_contents .search_results ._seq {
    width: 8.533333333333333vw;
    font-size: 4vw;
    font-weight: bold;
    position: absolute;
    top: 0.266666666666667vw;
    left: 0;
}

.search_contents .search_results ._sitesearch_component ._items>._item ._wrap ._category,
.search_contents .search_results ._category {
    margin: 0 1.066666666666667vw 0 0;
    font-size: 2.933333333333333vw;
    font-weight: bold;
    white-space: nowrap;
    width: 13.066666666666667vw;
    min-width: 13.066666666666667vw;
    height: 5.6vw;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 2.8vw;
    background: #5BC2DC;
    color: #333;
}

.search_contents .search_results ._sitesearch_component ._items>._item ._wrap ._category._category_suntory,
.search_contents .search_results ._category._category_suntory {
    background: #5BC2DC;
}

.search_contents .search_results ._sitesearch_component ._items>._item ._wrap ._category._category_brands,
.search_contents .search_results ._category._category_brands {
    background: #CFAD39;
}

.search_contents .search_results ._title {
    margin: 0 0 2.666666666666667vw;
    padding: 0.266666666666667vw 0 0;
    font-size: 3.733333333333333vw;
    font-weight: bold;
    display: inline;
}

.search_contents .search_results ._title a {
    text-decoration: none;
    color: #222;

}

.search_contents ._sitesearch_component ._items>._item ._wrap ._sitesearch_group1 ._title a em,
.search_contents .search_results ._title a em {
    font-style: normal;
    background: none;
}

.search_contents .search_results ._item ._filetype,
.search_contents .search_results ._item ._filesize,
.search_contents .search_results ._item ._thumbnail,
.search_contents .search_results ._item ._link,
.search_contents .search_results ._item ._last_modified {
    display: none;
}


.search_contents .search_results ._snippet {
    margin: 3.2vw 0 0;
    width: 83.2vw;
    font-size: 3.733333333333333vw;
    line-height: 1.5;
}

.search_contents .search_results ._snippet em {
    background: #FFFFAA;
    font-weight: bold;
    font-style: normal;
    margin: 0 0.533333333333333vw;
    padding: 0 0.533333333333333vw;
}

.search_contents .search_results.test_color ._snippet em {
    background: #DDF7FF;
    font-weight: bold;
    font-style: normal;
    margin: 0 0.533333333333333vw;
    padding: 0 0.533333333333333vw;
}

/* ========================================================================
[sp]btn_more
========================================================================= */
.search_contents .btn_more {
    margin: 0 auto 12vw;
    width: 46.666666666666667vw;
    height: 12vw;
    border-radius: 6vw;
    border: 0.2vw #009ee0 solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.466666666666667vw;
    font-weight: bold;
    color: #fff;
    background: #009ee0;
    cursor: pointer;
    display: none;
}

.search_contents .btn_more.active {
    display: flex;
}



/* ========================================================================
[sp]_extraresults_btn
========================================================================= */
.search_contents ._extraresults_btn,
.search_contents ._sitesearch_component ._extraresults ._extraresults_btn {
    margin: 8vw auto 12vw;
    width: 46.666666666666667vw;
    height: 12vw;
    border-radius: 6vw;
    border: 0.2vw #009ee0 solid;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 3.466666666666667vw;
    font-weight: bold;
    color: #fff;
    background: #009ee0;
    cursor: pointer;
    display: flex;
}

.search_contents ._extraresults_btn:hover,
.search_contents ._sitesearch_component ._extraresults ._extraresults_btn:hover {
    color: #fff;
    background: #009ee0;
}

/* ========================================================================
[sp]noResult
========================================================================= */

.search_contents .noResult.hidden {
    display: none;
}

.search_contents .noResult h1 {
    font-size: 3.733333333333333vw;
    line-height: 1.5;
    font-weight: bold;
}

.search_contents .noResult p {
    font-size: 3.733333333333333vw;
    line-height: 1.5;
}


/*==================================================
pc
================================================== */
@media print, screen and (min-width:768px) {


    /* ========================================================================
    [pc]loading
    ========================================================================= */
    #loading .skelton .skelton_recommend {
        background: linear-gradient(to top, #DDF7FF 0%, #FFF 30%);
        margin: 0 0 60px;
        padding: 0 0 40px;
        width: 100%;
    }

    #loading .skelton .skelton_recommend_title {
        margin: 0 auto 30px;
        padding: 0;
        width: 1040px;
        text-align: center;
    }

    #loading .skelton .skelton_recommend_title span {
        margin: 00;
        width: 144px;
        height: 32px;
        display: inline-block;
        background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
        background-size: 800px;
        animation: shimmer 1.5s infinite;
    }

    #loading .skelton .skelton_recommend_list {
        margin: 0 auto;
        padding: 0;
        width: 1040px;
        list-style: none;
    }

    #loading .skelton .skelton_recommend_list li {
        margin: 0;
        padding: 0;
        width: 100%;
        display: flex;
    }

    #loading .skelton .skelton_recommend_list figure {
        margin: 0 20px 0 0;
        width: 150px;
        height: 140px;
        background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
        background-size: 800px;
        animation: shimmer 1.5s infinite;
    }

    #loading .skelton .skelton_recommend_list .skelton_text_block {
        width: 330px;
    }

    #loading .skelton .skelton_recommend_list .skelton_recommend_label {
        margin-bottom: 15px;
        width: 330px;
        height: 24px;
        background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
        background-size: 800px;
        animation: shimmer 1.5s infinite;
    }

    #loading .skelton .skelton_recommend_list .skelton_recommend_text {
        width: 330px;
        height: 20px;
        background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
        background-size: 800px;
        animation: shimmer 1.5s infinite;
    }

    #loading .skelton .skelton_tab {
        position: relative;
        display: flex;
        justify-content: space-between;
        margin: 0 auto 40px;
        padding: 0;
        width: 1040px;
        list-style: none;
    }

    #loading .skelton .skelton_tab li {
        height: 66px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    #loading .skelton .skelton_tab li .label {
        font-size: 22px;
        font-weight: bold;
    }

    #loading .skelton .skelton_tab li .count {
        font-size: 14px;
    }

    #loading .skelton_tab01 {
        width: 260px;
        border-right: 1px #ddd solid;
        border-bottom: 5px #00ABE4 solid;
    }

    #loading .skelton_tab02 {
        width: 260px;
        border-right: 1px #ddd solid;
        border-bottom: 1px #ddd solid;
    }

    #loading .skelton_tab03 {
        width: 260px;
        border-right: 1px #ddd solid;
        border-bottom: 1px #ddd solid;
    }

    #loading .skelton_tab04 {
        width: 260px;
        border-bottom: 1px #ddd solid;

    }

    #loading .skelton_sorting {
        margin: 0 auto 30px;
        padding: 0 0 15px;
        width: 1040px;
        border-bottom: 1px #ddd solid;
    }


    #loading .skelton_sorting::before {
        content: '';
        display: block;
        width: 172px;
        height: 36px;
        background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
        background-size: 800px;
        animation: shimmer 1.5s infinite;
    }


    #loading .skelton_search_results {
        list-style: none;
        width: 1040px;
        margin: 0 auto;
        padding: 0;
    }

    #loading .skelton .skelton_search_results li {
        width: 1040px;
        margin: 0 0 30px;
        padding: 0;
        display: flex;
    }


    #loading .skelton_search_results .skelton_result_number {
        width: 50px;
        font-size: 16px;
        font-weight: bold;
    }

    #loading .skelton_search_results li .skelton_text_block {
        width: 990px;
    }

    #loading .skelton_search_results .skelton_result_title {
        margin: 0;
        display: inline-block;
        width: 280px;
        height: 24px;
        background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
        background-size: 800px;
        animation: shimmer 1.5s infinite;
    }

    #loading .skelton_search_results .skelton_result_text {
        margin: 0;
        display: inline-block;
        width: 100%;
        height: 20px;
        background: linear-gradient(to right, #ebebeb 8%, #f2f2f2 18%, #ebebeb 33%);
        background-size: 800px;
        animation: shimmer 1.5s infinite;
    }


    @keyframes shimmer {
        0% {
            background-position: -400px 0;
        }

        100% {
            background-position: 400px 0;
        }
    }


    /* ========================================================================
    [pc]search_box
    ========================================================================= */
    .search_contents .search_box {
        margin: 0 auto 40px;
        width: 740px;
        height: 50px;
        position: relative;
    }

    .search_contents .search_box.search_box_bottom {
        margin: 0 auto 60px;
    }

    .search_contents .search_box .search_txt {
        border: 1px #ccc solid;
        background: none;
        width: 740px;
        height: 50px;
        padding: 0 58px 0 20px;
        font-size: 16px;
        color: #222;
    }

    .search_contents .fieldset input::placeholder {
        color: #ccc;
    }

    .search_contents .search_txt:focus::placeholder {
        color: transparent;
    }

    .search_contents .search_box .search_txt:focus {
        outline: none;
    }

    .search_contents .search_box .search_btn {
        width: 58px;
        height: 50px;
        background: none;
        text-indent: -99999px;
        overflow: hidden;
        position: absolute;
        top: 0;
        right: 0;
    }

    .search_contents .search_box::before {
        content: '';
        width: 18px;
        height: 18px;
        background-color: #00ABE4;
        -webkit-mask: var(--icon-search);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 9px);
        right: 20px;
        pointer-events: none;
    }

    .search_contents .search_box .btn_clear {
        appearance: none;
        border: none;
        width: 16px;
        height: 16px;
        background-color: #00ABE4;
        -webkit-mask: var(--icon-close);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 8px);
        right: 60px;
        display: none;
    }

    .search_contents .search_box.active .btn_clear {
        display: block;
    }

    /* ========================================================================
    [pc]history_list_local
    ========================================================================= */
    .search_box .history_list_local {
        list-style: none;
        width: 740px;
        margin: 0;
        padding: 0;
        background: #fff;
        border-top: 1px #ccc solid;
        border-right: 1px #ccc solid;
        border-left: 1px #ccc solid;
        border-bottom: 1px #ccc solid;
        box-sizing: border-box;
        border-radius: 0 0 5px 5px;
        position: absolute;
        top: 49px;
        left: 0;
        display: none;
        z-index: 1000;
    }

    .search_box .history_list_local::before {
        content: '搜尋紀錄';
        width: 738px;
        height: 40px;
        font-size: 15px;
        color: #000;
        background: #eee;
        display: flex;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .search_box .history_list_local.active {
        display: block;
    }

    .search_box .history_list_local li {
        margin: 0 auto;
        width: 738px;
        min-height: 40px;
        border-bottom: 1px #eee solid;
        font-size: 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        box-sizing: border-box;
    }

    .search_box .history_list_local li:last-child {
        border-bottom: none;
    }

    .search_box .history_list_local li a {
        color: #222;
        text-decoration: none;
    }

    .search_box .history_list_local li a:hover {
        text-decoration: underline;
        color: #df3600;
    }

    .search_box .history_list_local li .btn_delete {
        padding: 0;
        background-color: transparent;
        border: none;
        appearance: none;
        border: none;
        text-indent: -9999px;
        width: 16px;
        height: 16px;
        background: #aaa;
        border-radius: 8px;
        cursor: pointer;
    }

    .search_box .history_list_local li .btn_delete::before {
        content: '';
        width: 6px;
        height: 6px;
        background-color: #ffffff;
        -webkit-mask: var(--icon-close);
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        -webkit-mask-size: 100% 100%;
        -webkit-mask-repeat: no-repeat;
        -webkit-mask-position: center;
        position: absolute;
        top: calc(50% - 3px);
        left: calc(50% - 3px);
    }

    .search_box .history_list_local li .btn_delete:hover {
        background: #df3600;
    }

    /* ========================================================================
    [pc]_recommendlinks
    ========================================================================= */

    .search_contents ._recommendlinks._recommendlinks_type2 {
        margin: 0 0 60px;
    }

    .search_contents ._recommendlinks {
        background: linear-gradient(to top, #DDF7FF 0%, #FFF 30%);
        margin: -20px 0 60px;
        padding: 0;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._label {
        margin: 0 0 30px;
        font-size: 24px;
        font-weight: bold;
        text-align: center;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._links {
        margin: 0 auto;
        width: 1050px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._links ._link {
        margin: 0 0 40px;
        padding: 0;
        width: 500px;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._link+._link {
        margin-top: 0;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._link {
        margin: 0 0 30px;
        width: 500px;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._wrap {
        margin: 0;
        width: 500px;
        padding: 0 0 0 170px;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        position: relative;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_title {
        margin: 10px 0 15px;
        padding: 0;
        font-size: 18px;
        font-weight: bold;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_title a {
        color: #222;
        text-decoration: none;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_title a:hover {
        text-decoration: underline;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_summary {
        margin: 0;
        font-size: 15px;
        line-height: 1.35;
        color: #222;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_image {
        width: 150px;
        position: absolute;
        top: 0;
        left: 0;
        overflow: hidden;
    }

    .search_contents ._recommendlinks._recommendlinks_type2 ._links ._link ._wrap ._link_image img {
        width: 100%;
        height: auto;
        max-width: 150px;
    }


    /* ========================================================================
    [pc]tab（_attributes）
    ========================================================================= */
    .search_contents ._attributes form {
        margin: 0 auto 40px;
        width: 1040px;
        list-style: none;
        display: flex;
    }

    .search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute ._count {
        font-size: 14px;
    }

    .search_contents ._attribute:nth-child(2) {
        width: 260px;
        border-right: 1px #ddd solid;
        border-bottom: 1px #ddd solid;
    }


    .search_contents ._attribute:nth-child(3) {
        width: 260px;
        border-right: 1px #ddd solid;
        border-bottom: 1px #ddd solid;
    }

    .search_contents ._attribute:nth-child(4) {
        width: 260px;
        border-right: 1px #ddd solid;
        border-bottom: 1px #ddd solid;
    }

    .search_contents ._attribute:nth-child(5) {
        width: 260px;
        border-bottom: 1px #ddd solid;
    }

    .search_contents ._attribute label {
        width: 100%;
        height: 66px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: none;
        font-size: 22px;
        font-weight: bold;
        position: relative;
    }


    .search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute {
        border-bottom: 1px #ddd solid;
    }

    .search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute._select,
    .search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute:hover {
        border-bottom: 5px #00ABE4 solid;
    }

    .search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute._disable {
        pointer-events: none;
    }

    .search_contents ._sitesearch_component ._attributegroup ._attributes ._attribute._disable {
        text-decoration: none;
        color: #757575;
        border-bottom: 1px #ddd solid;
    }

    /* ========================================================================
    [pc]search_results
    ========================================================================= */
    .search_contents .search_results {
        margin: 0 auto 30px;
        width: 100%;
        /* min-height: 800px; */
    }

    .search_contents ._searchstatusfull {
        font-size: 24px;
        font-weight: bold;
        width: 1040px;
        margin: 0 auto 30px;
        padding: 0 0 15px;
        border-bottom: 1px #ddd solid;
    }


    .search_contents ._sitesearch_component ._items ._item ._wrap {
        margin: 0 auto;
        width: 1040px;
    }

    .search_contents ._sitesearch_component ._items>._item ._wrap *[class^=_] {
        padding: 0;
    }


    .search_contents .result_count {
        font-size: 24px;
        font-weight: bold;
        margin: 0 0 30px;
        padding: 0 0 15px;
        border-bottom: 1px #ddd solid;
    }

    .search_contents .search_results ._item {
        margin: 0 0 30px;
    }

    .search_contents .search_results ._wrap {
        position: relative;
        padding: 0 0 0 50px;
    }

    .search_contents .search_results ._seq {
        width: 50px;
        font-size: 16px;
        font-weight: bold;
        position: absolute;
        top: 1px;
        left: 0;
    }


    .search_contents .search_results ._sitesearch_component ._items>._item ._wrap ._category,
    .search_contents .search_results ._category {
        margin: 0 4px 0 0;
        font-size: 11px;
        font-weight: bold;
        white-space: nowrap;
        width: 49px;
        min-width: 49px;
        height: 21px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10.5px;
        background: #5BC2DC;
        color: #333;
    }

    .search_contents .search_results ._sitesearch_component ._items>._item ._wrap ._category._category_suntory,
    .search_contents .search_results ._category._category_suntory {
        background: #5BC2DC;
    }

    .search_contents .search_results ._sitesearch_component ._items>._item ._wrap ._category._category_brands,
    .search_contents .search_results ._category._category_brands {
        background: #CFAD39;
    }

    .search_contents .search_results ._title {
        margin: 0 0 10px;
        padding: 10px 0 0;
        font-size: 18px;
        font-weight: bold;
        display: inline;
    }

    .search_contents .search_results ._title a {
        text-decoration: none;
        color: #222;
    }

    .search_contents .search_results ._title a:hover {
        text-decoration: underline;
    }

    .search_contents ._sitesearch_component ._items>._item ._wrap ._sitesearch_group1 ._title a em,
    .search_contents .search_results ._title a em {
        font-style: normal;
        background: none;
    }

    .search_contents .search_results ._item ._filetype,
    .search_contents .search_results ._item ._filesize,
    .search_contents .search_results ._item ._thumbnail,
    .search_contents .search_results ._item ._link,
    .search_contents .search_results ._item ._last_modified {
        display: none;
    }

    .search_contents .search_results ._snippet {
        margin: 12px 0 0;
        width: auto;
        font-size: 15px;
        line-height: 1.5;
    }

    .search_contents .search_results ._snippet em {
        background: #FFFFAA;
        font-weight: bold;
        font-style: normal;
        margin: 0 2px;
        padding: 0;
    }

    .search_contents .search_results.test_color ._snippet em {
        background: #DDF7FF;
        font-weight: bold;
        font-style: normal;
        margin: 0 2px;
        padding: 0;
    }

    .search_contents .search_results.test_color ._snippet em {
        background: #DDF7FF;
        font-weight: bold;
        font-style: normal;
        margin: 0 2px;
        padding: 0;
    }



    /* ========================================================================
    [pc]btn_more
    ========================================================================= */
    .search_contents .btn_more {
        margin: 0 auto 60px;
        width: 320px;
        height: 50px;
        border-radius: 25pcd;
        border: 1px #009ee0 solid;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background: #009ee0;
        transition: var(--transition-normal);
        display: none;
    }

    .search_contents .btn_more:hover {
        color: #fff;
        background: #0088cc;
        border: 1px #0088cc solid;
    }

    .search_contents .btn_more.active {
        display: flex;
    }

    /* ========================================================================
    [pc]_extraresults_btn
    ========================================================================= */
    .search_contents ._extraresults_btn,
    .search_contents ._sitesearch_component ._extraresults ._extraresults_btn {
        margin: 30px auto 60px;
        width: 320px;
        height: 50px;
        border-radius: 25px;
        border: 1px #009ee0 solid;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        font-weight: bold;
        color: #fff;
        background: #009ee0;
        transition: var(--transition-normal);
        display: flex;
    }

    .search_contents ._extraresults_btn:hover,
    .search_contents ._sitesearch_component ._extraresults ._extraresults_btn:hover {
        color: #fff;
        background: #0088cc;
        border: 1px #0088cc solid;
    }

    /* ========================================================================
    [pc]noResult
    ========================================================================= */

    .search_contents .noResult {
        margin: 0 auto;
        width: 1040px;
    }

    .search_contents .noResult h1 {
        font-size: 18px;
    }

    .search_contents .noResult p {
        font-size: 15px;
    }

}