/* 地圖區塊css */
    .filter-root {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 10;
        box-sizing: border-box
    }
    
    .filter-root .filter-title {
        font-size: 4.411764705882353vw;
        line-height: 1.5;
        color: #d0a66a;
        padding-left: 5px;
        padding-bottom: 1.470588235294118vw
    }
    
    @media screen and (min-width:641px) {
        .filter-root .filter-title {
            font-size: 1.25vw;
            padding-bottom: .694444444444444vw
        }
    }
    
    .filter-root .filter-outer {
        box-sizing: border-box;
        -webkit-backdrop-filter: blur(5px);
        backdrop-filter: blur(5px);
        border: 5px solid #d7ab6c;
        background-color: rgba(2, 39, 43, .9)
    }
    
    .store-filter {
        padding-left: 0
    }
    
    @media screen and (min-width:641px) {
        .store-filter {
            padding-left: 13.472222222222221vw
        }
    }
    
    .store-filter .filter-outer {
        box-sizing: border-box;
        padding: 30px 10px 20px
    }
    
    @media screen and (min-width:641px) {
        .store-filter .filter-outer {
            padding: 50px 20px 30px
        }
    }
    
    @media screen and (min-width:641px) {
        .store-filter .filter-row {
            display: flex;
            align-items: flex-start
        }
    }
    
    .store-filter .filter-row:not(.last-row) {
        padding-bottom: 5.333333333333334vw
    }
    
    @media screen and (min-width:641px) {
        .store-filter .filter-row:not(.last-row) {
            padding-bottom: 1.388888888888889vw
        }
    }
    
    .store-filter .filter-label {
        font-size: 4.266666666666667vw;
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: 2;
        letter-spacing: .32vw;
        color: #d7ab6c;
        white-space: nowrap;
        padding: .3125rem
    }
    
    @media screen and (min-width:641px) {
        .store-filter .filter-label {
            font-size: 1.25vw;
            letter-spacing: .104166666666667vw;
            line-height: 1.5
        }
    }
    
    .store-filter .filter-option-container {
        position: relative;
        font-size: 0;
        padding: 0
    }
    
    @media screen and (min-width:641px) {
        .store-filter .filter-option-container {
            padding: 0 .625rem
        }
    }
    
    .store-filter .filter-option {
        cursor: pointer;
        display: inline-block;
        vertical-align: top;
        font-size: 3.733333333333334vw;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: 2.14;
        letter-spacing: .349333333333333vw;
        color: #fff;
        border: 1px solid #fff;
        padding: 0 .625rem;
        margin: .3125rem;
        white-space: nowrap;
        width: -webkit-fit-content;
        width: intrinsic;
        width: -moz-fit-content
    }
    
    .store-filter .filter-option:hover,
    .store-filter .filter-option__active {
        background-color: #d7ab6c
    }
    
    @media screen and (min-width:641px) {
        .store-filter .filter-option {
            font-size: 1.111111111111111vw;
            line-height: 1.88;
            letter-spacing: .104166666666667vw
        }
    }
    
    .store-filter .fileter-divider {
        position: relative;
        width: 100%;
        height: 1px;
        background-color: #fff;
        margin: 6.666666666666667vw 0
    }
    
    @media screen and (min-width:641px) {
        .store-filter .fileter-divider {
            margin: 2.083333333333333vw 0
        }
    }
    
    .store-filter .button-container {
        position: relative;
        display: flex;
        justify-content: space-between
    }
    
    @media screen and (min-width:641px) {
        .store-filter .button-container {
            justify-content: flex-end
        }
    }
    
    .store-filter .button-cancel,
    .store-filter .button-confirm {
        position: relative;
        width: -webkit-fit-content;
        width: intrinsic;
        width: -moz-fit-content;
        white-space: nowrap;
        font-size: 4.266666666666667vw;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: .4vw;
        color: #fff;
        border: 1px solid #fff;
        text-align: center
    }
    
    .store-filter .button-cancel:hover,
    .store-filter .button-confirm:hover {
        border: 1px solid #d7ab6c
    }
    
    @media screen and (min-width:641px) {
    
        .store-filter .button-cancel,
        .store-filter .button-confirm {
            font-size: 1.111111111111111vw;
            letter-spacing: .104166666666667vw
        }
    }
    
    .store-filter .button-cancel {
        padding: 2.133333333333333vw 8vw
    }
    
    @media screen and (min-width:641px) {
        .store-filter .button-cancel {
            padding: .555555555555556vw 2.986111111111111vw
        }
    }
    
    .store-filter .button-confirm {
        padding: 2.133333333333333vw 12.8vw;
        margin-left: 0
    }
    
    @media screen and (min-width:641px) {
        .store-filter .button-confirm {
            padding: .555555555555556vw 4.166666666666666vw;
            margin-left: 2.083333333333333vw
        }
    }
    
    .whiskey-filter {
        box-sizing: border-box
    }
    
    .whiskey-filter .filter-outer {
        padding: 6.4vw 5.333333333333334vw
    }
    
    @media screen and (min-width:641px) {
        .whiskey-filter .filter-outer {
            padding: 2.083333333333333vw 1.631944444444445vw
        }
    }
    
    .whiskey-filter .filter-label {
        position: relative;
        font-size: 4.266666666666667vw;
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: .32vw;
        color: #d7ab6c;
        padding: 0;
        cursor: pointer
    }
    
    @media screen and (min-width:641px) {
        .whiskey-filter .filter-label {
            cursor: auto;
            font-size: 1.25vw;
            letter-spacing: .104166666666667vw;
            padding: 0 .520833333333333vw
        }
    }
    
    .whiskey-filter .filter-label>.icon-down-arrow {
        position: absolute;
        width: 5.333333333333334vw;
        top: 0;
        right: 0;
        transform-origin: 50% 50%;
        transform: rotate(0);
        transition: transform .1s ease-in-out
    }
    
    @media screen and (min-width:641px) {
        .whiskey-filter .filter-label>.icon-down-arrow {
            display: none
        }
    }
    
    .whiskey-filter .filter-option-container {
        padding: 4.8vw 0 7.733333333333333vw;
        overflow: hidden;
        max-height: 0;
        opacity: 0
    }
    
    @media screen and (min-width:641px) {
        .whiskey-filter .filter-option-container {
            max-height: -webkit-fit-content;
            max-height: -moz-fit-content;
            max-height: fit-content;
            opacity: 1;
            padding: .868055555555556vw 0 2.256944444444444vw
        }
    }
    
    .whiskey-filter label {
        display: block
    }
    
    .whiskey-filter .filter__open .filter-label>.icon-down-arrow {
        transform: rotate(180deg)
    }
    
    .whiskey-filter .filter__open .filter-label~.filter-option-container {
        max-height: -webkit-fit-content;
        max-height: -moz-fit-content;
        max-height: fit-content;
        opacity: 1
    }
    
    .whiskey-filter .filter-option {
        box-sizing: border-box;
        cursor: pointer;
        font-size: 3.733333333333334vw;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: .349333333333333vw;
        text-align: center;
        color: #fff;
        padding: 2.666666666666667vw;
        margin: 1.333333333333333vw 0;
        width: 100%;
        border: 1px solid #fff;
        white-space: nowrap
    }
    
    .whiskey-filter .filter-option:hover,
    .whiskey-filter .filter-option__active {
        background-color: #d7ab6c
    }
    
    @media screen and (min-width:641px) {
        .whiskey-filter .filter-option {
            display: inline-block;
            vertical-align: top;
            font-size: 1.111111111111111vw;
            letter-spacing: .104166666666667vw;
            padding: .555555555555556vw .694444444444444vw;
            margin: .520833333333333vw;
            width: -webkit-fit-content;
            width: intrinsic;
            width: -moz-fit-content
        }
    }
    
    .whiskey-filter .fileter-divider {
        position: relative;
        margin: 0;
        width: 100%;
        height: 1px;
        background-color: #fff
    }
    
    @media screen and (min-width:641px) {
        .whiskey-filter .fileter-divider {
            margin: .520833333333333vw 0 2.083333333333333vw
        }
    }
    
    .whiskey-filter .button-container {
        position: relative;
        display: flex;
        justify-content: space-between
    }
    
    @media screen and (min-width:641px) {
        .whiskey-filter .button-container {
            justify-content: flex-end
        }
    }
    
    .whiskey-filter .button-cancel,
    .whiskey-filter .button-confirm {
        position: relative;
        width: -webkit-fit-content;
        width: intrinsic;
        width: -moz-fit-content;
        white-space: nowrap;
        font-size: 4.266666666666667vw;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: .4vw;
        color: #fff;
        border: 1px solid #fff;
        text-align: center
    }
    
    .whiskey-filter .button-cancel:hover,
    .whiskey-filter .button-confirm:hover {
        border: 1px solid #d7ab6c
    }
    
    @media screen and (min-width:641px) {
    
        .whiskey-filter .button-cancel,
        .whiskey-filter .button-confirm {
            font-size: 1.111111111111111vw;
            letter-spacing: .104166666666667vw
        }
    }
    
    .whiskey-filter .button-cancel {
        padding: 2.133333333333333vw 8vw
    }
    
    @media screen and (min-width:641px) {
        .whiskey-filter .button-cancel {
            padding: .555555555555556vw 2.986111111111111vw
        }
    }
    
    .whiskey-filter .button-confirm {
        padding: 2.133333333333333vw 12.8vw;
        margin-left: 0
    }
    
    @media screen and (min-width:641px) {
        .whiskey-filter .button-confirm {
            padding: .555555555555556vw 4.166666666666666vw;
            margin-left: 2.083333333333333vw
        }
    }
    
    .form-component {
        position: relative
    }
    
    @media screen and (min-width:641px) {
        .form-component .form-container {
            display: flex;
            justify-content: space-between
        }
    }
    
    .form-component .line {
        position: relative;
        width: .125rem;
        height: 3.125rem
    }
    
    .form-component .line:before {
        content: "";
        display: block;
        position: absolute;
        width: 100%;
        height: 60%;
        top: .625rem;
        left: 0;
        border-radius: .0625rem;
        background-color: rgba(215, 171, 108, .5)
    }
    
    @media screen and (min-width:641px) {
        .form-component .line {
            height: 3.75rem
        }
    }
    
    .form-component .form-group {
        box-sizing: border-box;
        border-style: solid;
        border-width: .8vw;
        border-image-source: linear-gradient(90deg, #eabd71 13%, #e5b76e 25%, #d9a867 29%, #d2a062 36%, #d09d61 45%, #d29f63 0, #e3b378 49%, #efc287 53%, #f6ca8f 57%, #f8cd92 65%, #f6cb90 0, #e5b77b 69%, #d9a86c 72%, #d2a064 77%, #d09d61 91%);
        border-image-slice: 1;
        background-color: #fff;
        height: 3.125rem
    }
    
    @media screen and (min-width:641px) {
        .form-component .form-group {
            border-width: .208333333333333vw;
            height: 3.75rem
        }
    }
    
    .form-component .large-group {
        position: relative;
        width: 100%
    }
    
    @media screen and (min-width:641px) {
        .form-component .large-group {
            width: 51.45833333333333vw
        }
    }
    
    .form-component .form-group-inner {
        position: relative;
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        height: 100%
    }
    
    .form-component .small-group {
        width: 100%;
        margin-top: 5.333333333333334vw
    }
    
    @media screen and (min-width:641px) {
        .form-component .small-group {
            margin-top: 0;
            width: 21.11111111111111vw
        }
    }
    
    .form-component .select-component {
        cursor: pointer;
        position: relative;
        box-sizing: border-box;
        width: 25.937500000000004%;
        height: 100%;
        padding: 3.2vw 2.666666666666667vw;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: flex-start
    }
    
    @media screen and (min-width:641px) {
        .form-component .select-component {
            padding: .972222222222222vw 1.388888888888889vw;
            width: 25.910931174089068%
        }
    }
    
    .form-component .select-component .display-text {
        font-size: 4.266666666666667vw;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: 1;
        text-align: left;
        letter-spacing: .176vw;
        color: #192021
    }
    
    @media screen and (min-width:641px) {
        .form-component .select-component .display-text {
            color: #000;
            font-size: 1.111111111111111vw;
            letter-spacing: normal
        }
    }
    
    .form-component .select-component .icon-down-arrow {
        position: absolute;
        width: 3.2vw;
        height: 100%;
        right: 1.333333333333333vw;
        display: flex;
        justify-content: center;
        align-items: center
    }
    
    @media screen and (min-width:641px) {
        .form-component .select-component .icon-down-arrow {
            width: 1.736111111111111vw;
            right: 1.388888888888889vw
        }
    }
    
    .form-component .select-component select {
        cursor: pointer;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        -webkit-appearance: none
    }
    
    .form-component .input-component {
        position: relative;
        width: 73.75%;
        height: 100%
    }
    
    @media screen and (min-width:641px) {
        .form-component .input-component {
            width: 73.8191632928475%
        }
    }
    
    .form-component .input-component input {
        display: block;
        border: 0;
        background: transparent;
        box-sizing: border-box;
        width: 100%;
        height: 100%;
        padding: 3.733333333333334vw 5.333333333333334vw;
        font-size: 4.266666666666667vw;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: .2vw;
        color: #000
    }
    
    .form-component .input-component input::-moz-placeholder {
        opacity: .35
    }
    
    .form-component .input-component input:-ms-input-placeholder {
        opacity: .35
    }
    
    .form-component .input-component input::-ms-input-placeholder {
        opacity: .35
    }
    
    .form-component .input-component input::placeholder {
        opacity: .35
    }
    
    @media screen and (min-width:641px) {
        .form-component .input-component input {
            font-size: 1.111111111111111vw;
            padding: .902777777777778vw 1.388888888888889vw;
            letter-spacing: normal
        }
    }
    
    .form-component .input-component .icon-search {
        cursor: pointer;
        position: absolute;
        width: 1.875rem;
        top: 50%;
        transform: translateY(-50%);
        right: 2.666666666666667vw;
        height: 100%;
        display: flex;
        justify-content: center;
        align-self: center
    }
    
    @media screen and (min-width:641px) {
        .form-component .input-component .icon-search {
            width: 2.1875rem;
            right: 1.388888888888889vw
        }
    }
    
    .form-component .filtet-component {
        cursor: pointer;
        box-sizing: border-box;
        position: relative;
        width: 100%;
        height: 100%
    }
    
    .form-component .filtet-component .display-text {
        position: relative;
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        font-size: 4.266666666666667vw;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: .2vw;
        color: #192021;
        padding: 2.666666666666667vw;
        box-sizing: border-box
    }
    
    @media screen and (min-width:641px) {
        .form-component .filtet-component .display-text {
            font-size: 1.111111111111111vw;
            letter-spacing: .052083333333333vw;
            padding: .902777777777778vw 1.388888888888889vw
        }
    }
    
    .form-component .filtet-component .icon-filter {
        position: absolute;
        width: 5.333333333333334vw;
        top: 0;
        right: 2.666666666666667vw;
        transform: translateY(-50);
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center
    }
    
    @media screen and (min-width:641px) {
        .form-component .filtet-component .icon-filter {
            right: 1.388888888888889vw;
            width: 2.083333333333333vw
        }
    }
    
    .form-component .form-extend {
        position: relative;
        margin-top: .9375rem;
        width: 100%
    }
    
    .map-container {
        position: relative
    }
    
    .map-loader {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #ffefd8;
        display: flex;
        justify-content: center;
        align-items: center
    }
    
    .map-loader .loader-container {
        display: flex;
        flex-direction: column;
        align-items: center;
        position: relative;
        width: 180px;
        transform: translateY(-10%)
    }
    
    .map-loader .loader-container img {
        margin-top: 10px
    }
    
    .map-component {
        position: relative;
        width: 100%;
        height: 86.4vw;
        border-style: solid;
        border-width: .8vw;
        border-image-source: linear-gradient(90deg, #eabd71 13%, #e5b76e 25%, #d9a867 29%, #d2a062 36%, #d09d61 45%, #d29f63 0, #e3b378 49%, #efc287 53%, #f6ca8f 57%, #f8cd92 65%, #f6cb90 0, #e5b77b 69%, #d9a86c 72%, #d2a064 77%, #d09d61 91%);
        border-image-slice: 1;
        background-color: #fff;
        box-sizing: border-box
    }
    
    @media screen and (min-width:641px) {
        .map-component {
            border-width: .208333333333333vw;
            height: 34.72222222222222vw
        }
    }
    
    .gm-style-iw-d,
    .gm-style-iw-t,
    .gm-style .gm-style-iw,
    .gm-style .gm-style-iw-t:after,
    .poi-info-window a,
    .poi-info-window div {
        background: #005b65 !important;
        color: #fff
    }
    
    .gm-style-iw-d {
        overflow: hidden !important
    }
    
    div[role=dialog] {
        border-style: solid;
        border-width: .1875rem;
        border-image-source: linear-gradient(90deg, #eabd71 13%, #e5b76e 25%, #d9a867 29%, #d2a062 36%, #d09d61 45%, #d29f63 0, #e3b378 49%, #efc287 53%, #f6ca8f 57%, #f8cd92 65%, #f6cb90 0, #e5b77b 69%, #d9a86c 72%, #d2a064 77%, #d09d61 91%);
        border-image-slice: 1
    }
    
    .gm-style-iw-t:after {
        border-style: solid;
        border-top-width: 0;
        border-right-width: 0;
        border-image-source: linear-gradient(90deg, #eabd71 13%, #e5b76e 25%, #d9a867 29%, #d2a062 36%, #d09d61 45%, #d29f63 0, #e3b378 49%, #efc287 53%, #f6ca8f 57%, #f8cd92 65%, #f6cb90 0, #e5b77b 69%, #d9a86c 72%, #d2a064 77%, #d09d61 91%);
        border-image-slice: 1
    }
    
    .infowindow-component {
        position: relative;
        padding: 0 5.333333333333334vw 3.733333333333334vw 0;
        box-sizing: border-box;
        width: 100%;
        background-color: #005b65
    }
    
    @media screen and (min-width:641px) {
        .infowindow-component {
            padding: 0 .694444444444444vw .972222222222222vw 0
        }
    }
    
    .infowindow-component .icon-location {
        width: 8vw
    }
    
    @media screen and (min-width:641px) {
        .infowindow-component .icon-location {
            width: 2.083333333333333vw
        }
    }
    
    .infowindow-component .icon-phone {
        width: 8vw
    }
    
    @media screen and (min-width:641px) {
        .infowindow-component .icon-phone {
            width: 2.083333333333333vw
        }
    }
    
    .infowindow-component .info-title {
        font-size: 4.266666666666667vw;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: .083125rem;
        color: #fff
    }
    
    @media screen and (min-width:641px) {
        .infowindow-component .info-title {
            font-size: 1.388888888888889vw;
            letter-spacing: .115972222222222vw
        }
    }
    
    .infowindow-component .info-line {
        position: relative;
        width: 100%;
        height: 1px;
        background-color: #fff;
        margin: 1.866666666666667vw 0 3.733333333333334vw
    }
    
    @media screen and (min-width:641px) {
        .infowindow-component .info-line {
            margin: .486111111111111vw 0 .972222222222222vw
        }
    }
    
    .infowindow-component .info-content {
        position: relative;
        display: flex;
        justify-content: flex-start;
        align-items: center
    }
    
    .infowindow-component .info-text {
        display: block;
        font-size: 3.466666666666666vw;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.5;
        letter-spacing: .288vw;
        color: #fff;
        box-sizing: border-box;
        padding-left: 2.666666666666667vw
    }
    
    .infowindow-component .info-text,
    .infowindow-component .info-text:active,
    .infowindow-component .info-text:hover {
        color: #fff;
        text-decoration: underline
    }
    
    @media screen and (min-width:641px) {
        .infowindow-component .info-text {
            font-size: 1.111111111111111vw;
            letter-spacing: .092361111111111vw;
            padding-left: .694444444444444vw
        }
    }
    
    .recomman-root {
        padding-top: 30px
    }
    
    .map-root {
        position: relative;
        padding: 13.333333333333334vw 0 0
    }
    
    @media screen and (min-width:641px) {
        .map-root {
            padding: 3.472222222222222vw 0
        }
    }
    
    .map-root>.headline {
        font-size: 6.4vw;
        font-weight: 700;
        font-stretch: normal;
        font-style: normal;
        line-height: 1;
        letter-spacing: .4vw;
        text-align: center;
        color: #fff;
        padding-left: 9.333333333333334vw;
        padding-right: 9.333333333333334vw
    }
    
    @media screen and (min-width:641px) {
        .map-root>.headline {
            font-size: 2.222222222222222vw;
            letter-spacing: .104166666666667vw;
            padding-left: 11.25vw;
            padding-right: 11.25vw
        }
    }
    
    .map-root>p {
        font-size: 4.266666666666667vw;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: 1.8;
        letter-spacing: normal;
        text-align: center;
        color: #fff;
        padding: 2.666666666666667vw 8vw 8vw
    }
    
    @media screen and (min-width:641px) {
        .map-root>p {
            font-size: 1.111111111111111vw;
            padding: 1.736111111111111vw 11.25vw 2.083333333333333vw
        }
    }
    
    .map-root .form-wrapper {
        padding-left: 9.333333333333334vw;
        padding-right: 9.333333333333334vw
    }
    
    @media screen and (min-width:641px) {
        .map-root .form-wrapper {
            padding-left: 12.847222222222221vw;
            padding-right: 12.847222222222221vw
        }
    }
    
    .map-root .map-wrapper {
        position: relative;
        padding: 16vw 0 0
    }
    
    @media screen and (min-width:641px) {
        .map-root .map-wrapper {
            padding: 1.388888888888889vw 12.847222222222221vw 0
        }
    }

     /* 推薦酒款 css */
    .layout-recommand-winskey {
        position: relative;
        padding: 16vw 9.333333333333334vw
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey {
            padding: 3.472222222222222vw 11.25vw
        }
    }
    
    .layout-recommand-winskey .headline,
    .layout-recommand-winskey .layout-headline {
        font-family: "Noto Serif TC", serif !important
    }
    
    .layout-recommand-winskey .layout-headline {
        font-size: 6.4vw;
        font-weight: 700;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: .4vw;
        color: #fff;
        margin-bottom: 0;
        text-align: center
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .layout-headline {
            text-align: center;
            font-size: 2.222222222222222vw;
            letter-spacing: .104166666666667vw;
            margin-bottom: 2.777777777777778vw
        }
    }
    
    .layout-recommand-winskey .recommand-container {
        position: relative;
        font-size: 0;
        padding: 5.333333333333334vw 0;
        box-sizing: border-box
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommand-container {
            padding: 1.388888888888889vw 3.333333333333333vw
        }
    }
    
    .layout-recommand-winskey .recommend {
        cursor: pointer;
        position: relative;
        font-size: 0;
        display: inline-block;
        vertical-align: top;
        padding: 5.333333333333334vw 0;
        box-sizing: border-box
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommend {
            width: 50%;
            padding: 1.388888888888889vw .694444444444444vw
        }
    }
    
    .layout-recommand-winskey .recommend-image {
        position: relative;
        background: linear-gradient(180deg, #eabd71 13%, #e5b76e 25%, #d9a867 29%, #d2a062 36%, #d09d61 45%, #d29f63 0, #e3b378 49%, #efc287 53%, #f6ca8f 57%, #f8cd92 65%, #f6cb90 0, #e5b77b 69%, #d9a86c 72%, #d2a064 77%, #d09d61 91%);
        width: 45.33333333333333vw;
        padding-right: 5px;
        box-sizing: border-box
    }
    
    .layout-recommand-winskey .recommend-image:before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: calc(100% - 5px);
        height: 100%;
        background-image: url(https://stage-singleton-com.diageoplatform.com/assets/img/about/recommend-bg.jpg?38ba8cda);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: cover
    }
    
    .layout-recommand-winskey .recommend-image:after {
        content: "";
        display: block;
        padding-top: 100%
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommend-image {
            width: 53%
        }
    }
    
    .layout-recommand-winskey .recommend-image>img {
        position: absolute;
        width: auto;
        height: 90%;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%)
    }
    
    .layout-recommand-winskey .recommend-content {
        position: relative;
        width: 36vw
    }
    
    .layout-recommand-winskey .recommend-content:before {
        width: 100%
    }
    
    .layout-recommand-winskey .recommend-content:before {
        content: "";
        display: block;
        padding-top: 100%
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommend-content {
            width: 46%
        }
    }
    
    .layout-recommand-winskey .recommend-content,
    .layout-recommand-winskey .recommend-image {
        display: inline-block;
        vertical-align: middle
    }
    
    .layout-recommand-winskey .recommend-wrap {
        position: absolute;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: #005c66;
        padding: 5.333333333333334vw 2.4vw 2.666666666666667vw 4vw;
        box-sizing: border-box
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommend-wrap {
            padding: 3.125vw 1.388888888888889vw 1.388888888888889vw
        }
    }
    
    .layout-recommand-winskey .recommend-title {
        background-image: linear-gradient(90deg, #eabd71 13%, #e5b76e 25%, #d9a867 29%, #d2a062 36%, #d09d61 45%, #d29f63 0, #e3b378 49%, #efc287 53%, #f6ca8f 57%, #f8cd92 65%, #f6cb90 0, #e5b77b 69%, #d9a86c 72%, #d2a064 77%, #d09d61 91%);
        font-size: 3.2vw;
        font-weight: 400;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: .301333333333333vw;
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        text-align: left
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommend-title {
            font-size: 1.111111111111111vw;
            letter-spacing: .104166666666667vw
        }
    }
    
    .layout-recommand-winskey .recommend-text {
        font-family: "Noto Serif TC", serif !important;
        font-size: 3.733333333333334vw;
        font-weight: 600;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        color: #fff;
        margin-top: 1.333333333333333vw;
        height: 18.4vw;
        text-align: left;
        word-break: break-all
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommend-text {
            margin-top: 1.041666666666667vw;
            font-size: 1.388888888888889vw;
            height: 6.041666666666667vw
        }
    }
    
    .layout-recommand-winskey .recommend.limited-edition .recommend-text {
        margin-top: 0;
        height: 24.53333333333333vw
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommend.limited-edition .recommend-text {
            margin-top: .694444444444444vw;
            height: 6.25vw
        }
    }
    
    .layout-recommand-winskey .recommend-link-more {
        position: relative;
        cursor: pointer;
        font-size: 2.666666666666667vw;
        font-weight: 500;
        font-stretch: normal;
        font-style: normal;
        line-height: normal;
        letter-spacing: .333333333333333vw;
        color: #d7ab6c;
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommend-link-more {
            letter-spacing: .104166666666667vw;
            font-size: .833333333333333vw
        }
    }
    
    .layout-recommand-winskey .recommend-link-more .icon-enter {
        position: relative;
        width: 8.266666666666666vw;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAHCAYAAACY2BT3AAAAaUlEQVR4AWNwL/AZ1Pjm2tzYG2ty793alK+ELjfoHQ9yNMjxIHx7Y7HoEHE8At9ek+90fXXOf6AHDr7YWcKN7Pgh54Eh5nhE+gd54Prq3IVgx4PSEkhgqGGQR6C+yWsYSvjG6pxaUOYFAD+fAit7G7zWAAAAAElFTkSuQmCC);
        background-position: 0 0;
        background-repeat: no-repeat;
        background-size: 100% auto;
        text-align: left
    }
    
    .layout-recommand-winskey .recommend-link-more .icon-enter:before {
        content: "";
        display: block;
        padding-top: 13.043478260869565%
    }
    
    @media screen and (min-width:641px) {
        .layout-recommand-winskey .recommend-link-more .icon-enter {
            width: 3.194444444444444vw
        }
    }
    
    .layout-recommand-winskey .recommend:hover .recommend-wrap {
        background-color: #d7ab6c
    }
    
    .layout-recommand-winskey .recommend:hover .recommend-title {
        background-image: linear-gradient(90deg, #000, #000)
    }
    
    .layout-recommand-winskey .recommend:hover .recommend-text {
        color: #192021
    }
    
    .layout-recommand-winskey .recommend:hover .recommend-link-more {
        color: #192021
    }
    
    .layout-recommand-winskey .recommend:hover .recommend-link-more .icon-enter {
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC8AAAAHCAYAAACY2BT3AAAAZ0lEQVR4AWNwL/AZ1FhKSSlEUkHppqyqqhK63KB3PMjRUgqKH0EekFNRER0ijkdgaRUVS4gHFA/q6elxDynHI5KP4n+QB4aW4xEeSAR7QFFxIdjxoLQEEhhqGOQRcHQAccNQw6DMCwC/8FMuvnpmTAAAAABJRU5ErkJggg==)
    }