-----------------------------------
	play btn
-------------------------------------------------------------------*/
.play-btn {
    height: 72px;
    width: 72px;
    left: 50%;
    top: 50%;
    margin-left: -36px;
    margin-top: -36px;
    position: absolute;
    background: url('/assets/images/icon/play.png') no-repeat;
    cursor: pointer;
    background-size: 70%;
    background-position: center;
}


/*--------------------------------------------------------------------
	pagination contributed by 霈霆
-------------------------------------------------------------------*/
.paginations-simple {
    .pagination-inner {
        @include flex(center,center);
        width: 100%;
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .href {
        color: $color-font-gray;
        font-size: 14px;
        width:27px;
        height:27px;
        transition: all 0.3s;
        display: block;
        border-radius: 50%;
        text-align: center;
        text-decoration: none;
        box-sizing: border-box;
        line-height: 1;
        cursor: pointer;
        @include flex(center,center);
        &:hover,
        &.active {
            background: $color-primary;
            color: #fff;
            width: 40px;
            height: 40px;
            font-size: 16px;
        }
    }

    .pagination-item {
        margin: 0px 8px 0 8px;
        @include flex(center,center);
        width:40px;
        min-width: 40px;
        height:40px;
        &.back, &.next {
            .href{
                font-size: 28px;
                position: relative;
                transition: .3s;
            }
            .href:hover{
                background:none;
                color: $color-primary;
            }
            i {
                position: relative;
                top: -2px;
            }
        }
        &.back {
            margin: 0px 8px 0 8px;
            .href{
                left:0;
            }
            .href:hover{
                left: -3px;
                i {
                    color: $color-primary;
                }
            }
        }

        &.next {
            margin: 0px 8px 0 8px;
            .href{
                right:0;
            }
            .href:hover{
                right: -3px;
                i {
                    color: $color-primary;
                }
            }
        }

        // 手機
        @include mobile-lg {
            margin: 0 2px;
        }
    }


}


/*--------------------------------------------------------------------
	登入/註冊 portal
-------------------------------------------------------------------*/
.portal-panel {
    justify-content: center;
    max-width: 952px;
    margin: auto;
    border-radius: 54px;
    overflow: hidden;
    position: relative;
    z-index: 100;
    box-shadow: $shadow-wrap;

    .m-portal-side {
        flex: 40%;
        max-width: 40%;
        position: relative;
        background:
            -moz-linear-gradient(top, #001d73 0%, #7db9e8 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(top, #001d73 0%, #7db9e8 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom, #001d73 0%, #7db9e8 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        color: #fff;
        overflow: hidden;

        @include pc {
            flex: 100%;
            max-width: 100%;
        }

        .shape-up {
            position: absolute;
            top: 0;
            width: 100%;
            left: 0px;

            @include pc {
                transform: translate(0px, -44%);
            }
        }

        .shape-down {
            position: absolute;
            bottom: 0;
            width: 100%;
            left: 0px;

            @include pc {
                transform: translate(0px, 80%);
            }
        }

        .logo {
            position: absolute;
            left: 50%;
            top: 30%;
            transform: translate(-50%, 0);

            @include pc {
                transform: translate(-50%, -43px);
            }
        }

        .text {
            text-align: center;
            position: absolute;
            top: 45%;
            left: 50%;
            transform: translate(-50%, 0);
            color: #fff;
            width: 100%;

            @include pc {
                transform: translate(-50%, -6px);
            }
        }
    }

    .m-portal-main {
        flex: 60%;
        max-width: 60%;
        padding: 55px;
        background: #fff;

        .title {
            font-size: 1.875rem;
            padding: 0 0 20px 0;

            @include tablet {
                text-align: center;
            }
        }

        @include pc {
            flex: 100%;
            max-width: 100%;
        }

        @include tablet {
            padding: 30px;
        }

        @include mobile-xl {
            padding: 15px 7%;
        }

        .btn {
            width: 100%;
        }

        .sect-divider {
            position: relative;
        }

        .divider-text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background: #fff;
            width: 70px;
            text-align: center;
            color: $color-gray-light;
        }
    }

}

.portal-shadow {
    position: relative;
    overflow: hidden;
    margin: auto;
    max-width: 952px;

    .shadow-img {
        position: relative;
        transform: translate(-0%, -27%);
    }
}

/*--------------------------------------------------------------------
	Search Block
-------------------------------------------------------------------*/


/*--------------------------------------------------------------------
	Section 區塊
-------------------------------------------------------------------*/
.section-simple {
    .section-header {
        @include flex(inherit, center);
        margin-bottom: 15px;
    }

    .section-title {
        font-size: 28px;
        color: $color-primary;
        font-weight: bold;
    }

    @include mobile-lg {
        .section-title {
            font-size: 22px;
        }
    }

    .section-content {
        background: $color-wrap-bg;
        padding: 30px 25px;
        box-shadow: $shadow-wrap;
    }

    @include tablet {
        .section-content {
            padding: 20px 15px;
        }
    }
}

/*--------------------------------------------------------------------
S:   側選單 side menu
-------------------------------------------------------------------*/
.sidemenu-simple {

    .sidemenu-simple-body {
        background: $color-menu-bg;
        box-shadow: $shadow-wrap;

        @include media-up(992) {
            display: block !important;
        }
    }

    .sidemenu-simple-title {
        pointer-events: none;
        font-size: 1.5rem;
        font-weight: bold;
        background: none;
        color: $color-primary;
        padding: 15px 0px 25px 0;
        line-height: 1.8;
        margin-bottom: 0;

        i {
            display: none;
            transition: .3s;
            color: rgba(0, 0, 0, 0.2);
        }

        &.open i {
            font-weight: normal;
            color: #10406f;
            transform: rotate(180deg);
        }
    }

    .menu-item,
    .menu-sec-item,
    .menu-trd-item {
        a {
            padding: 15px 24px;
            @include flex(space-between, center);
            color: #666;
        }

        i {
            transition: .3s;
            color: rgba(0, 0, 0, 0.2);
            font-size: 14px;
        }

        &.open>a i {
            font-weight: normal;
            color: #10406f;
            transform: rotate(180deg);
        }
    }

    .menu-item {
        border-bottom: 1px solid #f0f0f0;

        &.active {
            background: $color-menu-sec-bg;
        }

        &.active a {
            color: $color-primary;
            font-weight: bold;
        }
    }

    /*--------------------------------------------------------------------
        第二層
    -------------------------------------------------------------------*/
    .menu-sec {
        background: $color-menu-sec-bg;
        display: none;
    }

    .menu-sec-item a {
        padding: 15px 24px 15px 2.3em;
    }

    /*--------------------------------------------------------------------
        第三層
    -------------------------------------------------------------------*/
    .menu-trd {
        display: none;
        background: $color-menu-trd-bg;
    }

    .menu-trd-item a {
        padding: 15px 24px 15px 3.3em;
    }

    @include pc {

        .sidemenu-simple-title {
            pointer-events: all;
            padding: 12px 24px;
            background: $color-menu-sec-bg;
            color: $color-primary;
            font-size: 18px;
            @include flex(space-between, center);

            i {
                display: block;
            }
        }
    }

    /*--------------------------------------------------------------------
		手機預設收起選單
    -------------------------------------------------------------------*/
    @include pc {
        .sidemenu-simple-body {
            display: none;
        }
    }
}


/*--------------------------------------------------------------------
M:	Mobile
-------------------------------------------------------------------*/
// 結帳Bar
.mobile-checkout-bar {
    display: none;
    width: 100%;
    @include flex(inherit, inherit);

    .mobile-checkout-info {
        flex-basis: 70%;
        width: 70%;
        @include flex(space-between, center);
        padding: 5px 10px;
        flex-wrap: wrap;
    }

    .grand-total-currency {
        color: $color-money;
    }

    .grand-total-num {
        color: $color-money;
        font-size: 24px;
    }

    .mobile-checkout-btn {
        flex-basis: 30%;
        width: 30%;
        @include flex(stretch, stretch);

    }

    .btn-checkout {
        width: 100%;
        height: 100%;
        background: $color-primary;
        color: #fff;
        border-radius: 0;
        white-space: normal;
        &:active {
            background: darken($color-primary, 10%);
        }
    }

    @include mobile-lg {
        .mobile-checkout-info {
            font-size: 14px;
        }

        .grand-total-num {
            font-size: 18px;
        }

        .btn-checkout {
            padding: 5px;
            font-size: 14px;
        }
    }

    @include media(374.98) {
        .btn-checkout {
            font-size: 12px;
        }
    }
}

// Subheader
.mobile-subheader {
    background: $color-bg;
    @include flex(space-between, center);
    padding: 1rem;

    .mobile-subheader-title {
        margin-bottom: 0;
    }

    .mobile-subheader-left {
        width: 30px;
    }

    .mobile-subheader-right {
        width: 30px;
    }

    i {
        color: $color-primary;
        font-size: 24px;
        cursor: pointer;
        width: 100%;
        transition: .3s;
    }
}


/*--------------------------------------------------------------------
	menu
-------------------------------------------------------------------*/
body.is-ready.is-menu-open{
    .custom-menu-content-control{
        visibility: hidden;
        opacity: 0;
        overflow-x:hidden;
    }

    .custom-menu-backdrop{
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    // gotop
    .gotop{
        opacity: 0;
    }

    .custom-menu-trigger-bar{
        visibility: visible;
        // 手機板時 給底色 當作 navbar
        background: #fcf9f4;
        // 手機板時 給底色 當作 navbar (end)

        .container{
            width: 90%;
            max-width: 90%;
        }

        @include tablet{
            .container{
                max-width: 100%;
                width: 100%;
            }
        }
    }

    .custom-menu{
        opacity: 1;
        visibility: visible;
        pointer-events: all;
    }

    .bars {
        transform: rotate(45deg);
        transition-delay: 0.4s;
        span {
            // background-color: #fff;
            &:first-child {
            transform: scaleX(0);
            transition: transform 0.2s cubic-bezier(0.694,  0.048, 0.335, 1.000);
            }
            &:nth-child(3) {
            width: 0;
            transition: width 0.2s cubic-bezier(0.694,  0.048, 0.335, 1.000);
            }
        }
        .other-bar {
            height: 30px;
            // background-color: #fff;
            transition: height 0.2s cubic-bezier(0.694,  0.048, 0.335, 1.000);
            transition-delay: 0.3s;
        }
    }
    
}

.custom-menu-trigger-bar{
    position: fixed;
    left: 0;
    right: 0;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    visibility: hidden;
    margin:auto;
    z-index: 201;
    top: 0;
    height: 70px;
    
    .is-ready & {
        transition: .3s;
        > .container{
            transition: .3s;
        }
        .bars{
            transition: transform 0.3s cubic-bezier(0.694,  0.048, 0.335, 1.000);
            span {
                &:first-child {
                    transition: transform 0.2s cubic-bezier(0.694,  0.048, 0.335, 1.000);
                    transition-delay: 0.4s;
                }
                &:nth-child(3) {
                    transition: width 0.2s cubic-bezier(0.694,  0.048, 0.335, 1.000);
                    transition-delay: 0.4s;
                }
            }
            .other-bar {
                transition: height 0.4s cubic-bezier(0.694,  0.048, 0.335, 1.000);
            }
        }
    }

    &.is-active{
        box-shadow: $shadow-wrap-dark;
    }

    > .container{
        height: 100%;
    }
    
    .custom-menu-trigger{
        margin-top: 22px;
        margin-left: auto;
    }

    .mobile-tobar{
        background: #000000;
    }

    .bars {
        width: 30px;
        height: 30px;
        position: relative;
        // border: 1px solid white;
        span {
            display: block;
            width: 100%;
            height: 3px;
            // background-color: $color-font;
            background-color: #ba9736;
            margin-top: 5px;
            &:first-child {
                margin-top: 0;
                transform: scaleX(1);
            }
            &:nth-child(3) {
                width: 65%;
            }
        }
        .other-bar {
            width: 3px;
            height: 0;
            background-color: $color-font;
            position: absolute;
            top: -5px;
            left: 50%;
            margin-left: -2px;
            z-index: 10;
        }
    }

}

.custom-menu-trigger{
    font-size: 2em;
    cursor: pointer;
    visibility: hidden;

    @include media($breakpoint-mobile-menu-transform){
        font-size: 2em;
        visibility: visible;
    }
}

.custom-menu-backdrop{
    background: #fcf9f4;
    position:fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    
    opacity:0;
    pointer-events: none;
    visibility:hidden;
    z-index: 15;
    
    .is-ready & {
        transition: .3s;
    }
}

.custom-menu{
    position: fixed;
    left: 50%;
    padding: 0;
    transform: translateX(-50%);

    overflow: auto;
    height: 100vh;
    padding: 1em;
    padding-top: 70px;
    padding-bottom: 70px;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    background: #fcf9f4;
    width: 90%;
    max-width: 90%;
    z-index: 15;

    .is-ready &{
        transition: .3s;
    }

    // 共用
    .input-group-search{
        .form-icon{
        }
        .form-control{
            &::placeholder{
            }
        }
    }

    .cart-info{
        .cart-num{
            background: $color-logo-red;
            color:#fff;
        }
    }

    // child
    .menu-item{
        min-height: 30px;
        transition: all 0.3s ease-in;
        list-style-type: none;

        &.item-search{
            height: auto;
            padding-left: 12px;
            padding-right: 12px;
        }
        &.item-lan{
            .lan-zh{
                padding-right: 8px;
            }
            .lan-en{
                background: linear-gradient(to right, $color-font 1px, transparent 1px);
                background-size: 50% 65%;
                background-repeat: no-repeat;
                background-position: left;
                padding-left: 13px;
            }

            .is-active{
                color: $color-logo-red;
            }
        }
    }

    // lan & cart
    .item-lan.item-cart{
        @include flex(space-between, center);
        margin-bottom: 1em;
        padding-left: 12px;
        padding-right: 12px;
        .cart-info{
            position: relative;
            right: -6px;
        }
    }

    .menu-link{
        @include flex(space-between,center);
        width: 100%;
        transition: .3s;
        display: flex;
        padding: 12px;
        &:focus{
            outline: none;
        }
        &.is-submenu-open{
            position: relative;
            background: $color-logo-red;
            color: #fff;
            .arrow{
                transform: rotate(180deg);
            }

            ~ .submenu{
                background: rgba($color-logo-red, .1);
                .link-item, .list-title, .link-more{
                    border-color: rgba(#fff, .5);
                }
            }
            
        }
        .arrow{
            width: 1em;
            height: 1em;
            font-size: 24px;
            @include flex(center,center);
            transition: .3s;
        }
    }


    // 次選單
    .submenu{
        display: none;
        transition: background .3s;
        .link-more{
            display: flex;
            padding: 10px 44px;
            border-bottom:  1px solid $color-hr;
            color: $color-primary;
        }
        .list-title{
            display: flex;
            padding: 10px 28px;
            border-bottom:  1px solid $color-hr;
        }
        .link-item{
            @include flex(space-between, center);
            padding: 10px 44px;
            border-bottom:  1px solid $color-hr;
            color: $color-font-gray;
            &:after{
                @include fa-icon('\f105');
                font-size: 24px;
            }
        }
    }


    // foot
    .foot-block{
        text-align: center;
        margin-top: 30px;

        .social-links{
            
        }
        .social-link{
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 0 8px;
            transition: .3s;
            font-size: 24px;
            &:hover{
                color: $color-primary;
            }
        }
    }
    // foot /

    .menu-item{
        transition: all 0.6s ease-in;
        margin-left: 0;
        align-items: center;
        &:not(.sty-abnormal){
            .menu-link{
                border-bottom: 1px solid $color-hr;
            }
        }
    }
 


    @include tablet{
        padding: 2em 0;
        padding-top: 80px;
        padding-bottom: 80px;

        width: 100%;
        max-width: 100%;

        .item-lan.item-cart{
            padding-left: 15px;
            padding-right: 15px;
        }

        .menu-link{
            padding: 12px 15px;
        }
    }

}

.custom-menu-content-control{
    padding-top: 0.05px;
    .is-ready & {
        transition:0.3s;
    }
}


/*--------------------------------------------------------------------
T:	Table
-------------------------------------------------------------------*/



/*--------------------------------------------------------------------
V:	 表單驗證欄位 verify block
-------------------------------------------------------------------*/
.verify-block {
    @include flex(auto, center);

    input[name="captcha"] {
        flex: 50;
    }

    input {
        padding: 5px 10px;
    }

    label {
        margin-bottom: 0;
    }

    // .form-control[name="verify-code"] {
    //     flex: 0 1 50%;
    // }

    .verify-img-wrapper {
        flex: 30%;
        @include flex(auto, center);

        .verify-img {
            display: inline-block;
            vertical-align: middle;
            max-width: 100px;
        }

        .verify-reload {
            line-height: 1;
            display: inline-block;
            vertical-align: middle;
            border: none;
            background: none;
            font-size: 20px;
            color: #aaa;
            width: 25px;
            height: 25px;
            cursor: pointer;
            outline: none;
            &:focus{
                outline: none;
            }
        }
    }

    .verify-forgot {
        flex: 20%;
        text-align: right;
    }

    &.verifiy-block--icon {
        .input-group {
            flex-wrap: nowrap;

            input {
                flex: 1 1 100%;
                flex-basis: 100%;
                max-width: 100%;
            }
        }

    }
}




/*--------------------------------------------------------------------
    切板新增元件
-------------------------------------------------------------------*/

// link
@mixin link-text-hover($color: $color-primary){
    color: currentColor;
    transition: .3s;
    &:hover{
        color: $color;
    }
}
.link-text-hover{
    @include link-text-hover;
}

// link(end)


//alternate
.alternate-divider{
    @include flex(center,center);
    color: $color-primary;
    &:before, &:after{
        content:'';
        display: block;
        height: 1px;
        background: currentColor;
        flex-grow: 1;
    }
    .content{
        padding: 0 2em;
    }
}

// alternate (end)


.full-w-slider{
    position: relative;
    &:before{
        content:'';
        display: block;
        padding-top: calc(747 / 1920 * 100%);
    }
    .owl-carousel{
        @include absolute(0,0,0,0);
    }
    .item{
        display: block;
        position: relative;
        .item-img {
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            padding-top: calc(747 / 1920 * 100%);
        }

        .mobile{
            display: none;
        }
    }
    .owl-dots{
        position: absolute;
        bottom: 20px;
        width: 100%;
        z-index: 1;
        text-align: center;
    }
    button.owl-dot{
        text-align: center;
        @include size(11.7px);
        border-radius: 50%;
        margin: 0 5px;
        background: rgba(#fff, .6);
        transition: .3s;
        &.active, &:hover{
            background: $color-primary;
        }
    }

    @include tablet {
        &:before{
            padding-top: calc(350 / 768 * 100%);
        }
        .item{
            .pc{
                display: none;
            }
            .mobile{
                display: block;
            }
            .item-img {
                padding-top: calc(350 / 768 * 100%);
            }
        }

        .owl-dots{
            bottom:5px;
        }
    }
}

.head-title{
    // head-title
    font-size: 36px;
    color: $color-primary;
    font-family: $ff-spectral;
    @include flex(center,center);
    margin-bottom: 0.75em;

    &:before, &:after{
        content: '';
        display: block;
        height:1px;
        flex-grow: 1;
        background: $color-primary;
    }

    &.wow{
        &:before, &:after{
            max-width: 0;
            transition: .6s cubic-bezier(0.77, 0, 0.175, 1); 
        }

        &.animated{
            &:before, &:after{
                max-width: 600px;
            }
        }
    }

    &.sty-no-line{
        &:before, &:after{
            display:none;
        }
    }

    .title-txt{
        font-size: 1em;
        margin: 5px 0;
    }
    .title-content{
        @include flex(center,center);
        // max-width: 12em;
        max-width: calc(100% - 30px);
        padding: 0 .83em;
        text-align: center;
    }

    .title-icon{
        width: 1.69em;
        height: 1.76em;
        margin-right: .53em;

        img{
            max-height: 100%;
            max-width: 100%;
        }
    }

    @include pc{
        font-size: 22px;
        margin-top: 1.5em;
        margin-bottom: 1.5em;
        .title-icon{
            max-height: 2.2em;
        }
    }

    @include tablet{
        margin-top: .5em;
        margin-bottom: .5em;
        // font-size: 20px;
        .title-icon{
            max-height: 2em;
            margin-right: 0.23em;
        }
    }

    @include mobile-lg{
        margin-top: .5em;
        margin-bottom: .5em;
        .title-content{
            flex-direction: column;
        }
    }
}

.owl-dots-bottom{
    position: absolute;
    bottom: 25px;
    transform: translateY(-50%);
    width: 100%;
    z-index: 1;
}

.owl-dot-simple{
    @include size(10px);
    border-radius: 50%;
    background: rgba(#fff, .6);
    &.active{
        background: $color-primary;
    }
}

.logo-box{
    display: inline-block;
    img{
        max-height: 100%;
    }
}

// product-box-block
.product-box-block{
    &.break-1500 {
        @include media-up(1500) {
            .row > [class*="col-"] {
                flex: 0 0 25%;
                max-width:25%;
            }
        }
    }

    @include mobile-lg{
        .row > [class*="col-"] {
            flex: 0 0 100%;
            max-width:100%;
        }
    }
}
// product-box-block /

// box product
.box-product{
    font-size: 24px;
    &:hover{
        .box-title{
            color: $color-primary;
        }
        .box-des{
            // color: $color-primary;
        }
        .btn{
            letter-spacing: .5px;
            .btn-icon{
                margin-left:0;
                opacity: 1;
            }
        }
    }
    .box-media{
        position: relative;
        background: $color-bg-light;
        &:before{
            content:'';
            display: block;
            width: 100%;
            padding-top: calc(250 / 370 * 100%)
        }
        img{
            max-height: 100%;
            @include absolute(0,0,0,0);
            margin:auto;

        }
    }
    .box-title{
        font-size: 1em;
        font-family: $ff-noto;
        @include text-ellipsis;
        transition: .3s ease-in;
    }
    .box-des{
        font-size: 16px;
        line-height: 1.4;
        margin-top: 5px;
        margin-bottom: 5px;
        @include text-lines-ellipsis(1.4em, 2);
        transition: .3s ease-in;
    }
    .btn-bar{
        text-align: right;
    }
    .btn{
        width: 130px;
        .btn-icon{
            font-size: 10px;
            margin: 0 5px;
            margin-left: -30px;
            opacity: 0;
            transition: .3s;
        }
    }

    @include mobile{
        .btn{
            width: 100%;
        }
    }

}
// box product (end)

// box product2
.tw{
    .box-product2.sty-discover{
        .box-btn::first-letter{
            font-size: 1em;
        }
    }
}
.box-product2 {
    font-size: 16px;
    margin-bottom: 2.625em;

    &.sty-discover{
        .box-media{
            margin-bottom: 15px;
        }
        .discover-foot{
            text-align: center;
        }
        .discover-title{
            font-size: 12px;
            color: $color-font-gray;
            margin-bottom: 10px;
            @include text-ellipsis;
        }
        .box-btn{
            min-width: 100px;
            height: 43px;
            line-height: 43px;
            display: inline-block;
            font-size: 12px;
            padding: 0 5px;
            &::first-letter{
                font-size: 1.3em;
            }
        }
        .discover-info-area{
            margin-bottom: 15px;
        }
    } 

    .is-agent-pc &.sty-discover {
        .box-btn:hover{
            color: $color-primary;
            background:none;
            border-color: $color-primary;
        }
    }
    .is-agent-mobile &.sty-discover {
        .box-btn:active{
            color: $color-primary;
            background:none;
            border-color: $color-primary;
        }
    }

    &.is-sold-out{
        .box-media{
            &:after{
                content: var(--text-sold-out);
                width: 100%;
                border-radius: 0%;
                opacity: 1;
            }
            @include mobile-lg{
                &:after{
                    height: 40px;
                }
            }
        }
    }

    .box-media{
        display: block;
        position: relative;
        overflow: hidden;
        &:hover, &:active{
            .box-overlay{
                opacity: 1;
                visibility: visible;
            }

            &:after{
                opacity: 1;
                visibility: visible;
            }
        }
        &:before{
            content:'';
            display: block;
            padding-top: calc(400 / 270 * 100%);
        }
        &:after{
            content: 'VIEW';
            width: 60px;
            height: 60px;
            @include absolute(0,0,0,0);
            margin: auto;
            @include flex(center,center);
            font-size: 1rem;
            text-align: center;
            line-height: 60px;
            border-radius: 50%;
            color: #fff;
            background: rgba($color-primary ,0.8);
            z-index: 2;
            box-shadow: 0 0 0 215px rgba(0,0,0,0.1);

            opacity: 0;
            transition: .3s;
        }
        img {
            max-height: 100%;
            @include absolute(0,0,0,0);
            margin:auto;
        }
    }
    .tool-btn-box{
        width: 90%;
    }
    .box-overlay{
        @include absolute(0,0,0,0);
        @include flex(center,center);
        background: rgba(#faf9f5, .8);
        opacity: 0;
        visibility: hidden;
        transition: .3s ease-out;

        // 20210126 先拿掉
        display:none;
        // 20210126 先拿掉 /

    }

    .box-footer{
        border-bottom: 1px solid $color-hr;
        text-align: center;
        padding: 12px 6px;
    }
    .box-title{
        font-size: 1em;
        color: $color-primary;
        font-family: $ff-noto;
        margin-bottom: 4px;
        @include text-lines-ellipsis(1em * 1.3, 2, block);
    }
    .box-des{
        font-size: 1em;
        color: $color-font-gray;
        font-family: $ff-nunito;
        @include text-lines-ellipsis(1.5em, 3, block);
        word-break: break-word;
    }

    .box-info{
        color: $color-money;
        font-family: $ff-noto;
        font-weight: bold;
        text-align: center;
        padding: 12px 6px;
        @include text-ellipsis;
    }

    // 其他
    .info-bar{
        color: #ba9736;
        display: block;
        align-items: center;
        line-height: 1.2;
        font-family: $ff-msjh;
        margin-bottom: 7px;
        font-size: 14px;
        @include text-ellipsis;
        max-width:100%;
        &.sty-line-divide{
            .info {
                position:relative;
                display: inline;
                text-align: left;
                &:not(:last-child){
                    padding-right: .6em;
                    &:after {
                        content:'';
                        display: block;
                        width: 1px;
                        background: #ba9736;
                        height: 1em;
                        margin: 0 0.3em;
                        position:absolute;
                        top: 50%;
                        right: 0;
                        transform: translateY(-50%);
                    }
                }
            }
        }
    }

    .price-infos{
        display: flex;
        justify-content: center;
        align-items: baseline;
        font-family: $ff-msjh;
        max-width: 100%;
        .dis-price{
            font-size: 18px;
            margin-right: 10px;
            color: #885b15;
            font-weight: bold;
            color: #885b15; 
            @include text-ellipsis;
            width: auto;
        }

        .org-price{
            font-size: 14px;
            text-decoration: line-through;
            color: #7d7d7d;
            font-weight: 300;
            @include text-ellipsis;
            width: auto;
        }
    }
    // 其他 /

    @include pc-lg {
        margin-bottom: 2em;
    }

    @include pc {
        margin-bottom: 1.5em;
        .box-footer{
            padding: 7px;
        }
        .box-info{
            padding: 7px;
        }
    }

    @include tablet{
        .box-media{
            &:active{
                .tool-btn-box .tool:before{
                    opacity: 1;
                }
            }
        }

        .box-overlay{
            opacity: 1;
            visibility: visible;
            top: calc(100% - 50px);
        }

        // 20200929 拿掉文字
        .tool-btn-box{
            .tool{
                width: 35px;
                height: 35px;
                font-size: 18px;
            }
            .tool:before{
                display: none;
            }
        }
    }


    @include mobile-lg{
        .box-overlay{
            top: calc(100% - 45px);
        }
        .tool-btn-box{
            .tool{
                width: 30px;
                height: 30px;
                font-size: 16px;
                margin: 0;
            }
        }
    }
}

.product2-owl{
    @include owl-nav-sty2;
    // for owl nav button
    .owl-carousel{
        padding: 0 25px;

        &.is-no-nav-style{
            padding-left: 0;
            padding-right: 0;
        }
    }

    .owl-nav{
        top: 42%;

        button.owl-prev, button.owl-next{
            transition: .3s;
            &:hover{
                i {
                    color: $color-primary;
                }
            }
        }
        button.owl-prev:hover{
            transform: translateX(-5px);
        }
        button.owl-next:hover{
            transform: translateX(5px);
        }
    }

    .box-product2{
        margin-bottom: 1px;
    }



    // 手機
    @include pc-xl{
        .owl-carousel{
            padding: 0;
        }
    }

}
// box product2 (end)

// tool btn box
.tool-btn-box{
    @include flex(space-around,center);
    flex-wrap: wrap;
    .tool{
        width: 46px;
        border-radius: 50%;
        @include flex(center,center);
        border: 1px solid currentColor;
        font-size: 23px;
        transition: .3s;
        position: relative;
        margin: 0 5px;
        &:hover{
            background: $color-primary;
            border-color: $color-primary;
            color: #fff;
        }
        &:after{
            content:'';
            display: block;
            padding-top: 100%;
        }
        &:before{
            position: absolute;
            top: 0;
            transform: translateY(-110%) translateX(-50%) translateX(-2px);
            display: block;
            font-size: 14px;
            left: 50%;
            // white-space: nowrap;
            color: $color-font;
            transition: .3s;
            visibility: hidden;
            content: attr(title);
            min-width: 4em;
            text-align: center;
        }

        i {
            @include absolute(0,0,0,0);
            margin:auto;
            @include flex(center,center);
        }

        &.add-fav{
            &.is-active{
                background: $color-primary;
                border-color: $color-primary;
                color: #fff;
            }

        }

        &.add-cart{
            &:before{
                min-width: 3em;
            }
        }

        &.view-detail{
            // &:before{
            //     content:'查看';
            // }
        }


        @include tablet {
            // 提示字
            &:before{
                visibility: visible;
            }


        }
    }


    // icon 位置
    .icon-browser{
        position: relative;
        right: -1px;
    }
}
// tool btn box (end)



.datepicker-simple{
    display: inline-block;// must be
    background:#fff;
    text-transform: uppercase;
    font-size: 18px;
    font-weight: bold;
    font-family: $ff-noto;
    .datepicker-inline{
        // reset
        width:100%;
    }
    .datepicker-days{
        // reset
        width: 100%;
    }
    .table-condensed{
        // table
        width: 100%;
    }

    td{
        // all td

    }

    .datepicker-switch{
        // 標題
        font-family: $ff-noto;
        font-weight: normal;
    }

    thead tr:nth-child(2) {
        // header
        color: #fff;
        &:hover{
            th {
                background: $color-black;
            }
        }
        th{
            background: $color-black;
            border-radius: 0;
            height: 40px;
        }

        .prev{
            border-radius: 0;
            // color: $color-black;
            i{
                font-size: 20px;
                color:#fff;
            }
        }
        .next{
            border-radius: 0;
            // color: $color-black;
            i{
                font-size: 20px;
                color:#fff;
            }
        }
    }

    thead tr:nth-child(3) {
        // days name
        th{
            margin-top: 1em;
            font-size: 16px;
        }
    }

    tbody td{
        // 日期
        font-size: 16px;
    }

    tbody tr:last-child{
        // 日期最後一行
        td{
            padding-bottom: 1em;
        }
    }

    // cell
    .dow, .day{
        padding: .5em 0;
    }

    .day{
        // 日期
        // &.active{
        //     background: none!important;
        //     &:before{
        //         content:'';
        //         display: block;
        //         width:100%;
        //         padding-top: 100%;
        //         background: $color-primary;
        //     }
        // }
    }
}

// input-grup-search
.input-group-search{
    position: relative;
    .form-icon{
        font-size: 1em;
        position: absolute;
        right: 0.635em;
        top: 50%;
        transform: translateY(-50%);
        color: #535353;
    }

    .form-control{
        padding-right: 1.875em;
    }

    .search-btn{
        appearance: none;
        border: none;
        background: none;
        padding: 0;
        cursor: pointer;
        &:hover{
            color: $color-primary;
            .form-icon{
                color: $color-primary;
            }
        }
    }
    input[name="search"] {
        &:focus {
            & + ul.has-value {
                display: block;
            }
        }
    }
    ul {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        margin: 0;
        width: 100%;
        border: 1px solid #ba9736;
        background: #fff;
        border-radius: 0.25rem;
        z-index: 9;
        max-height: 200px;
        overflow: auto;
        &::-webkit-scrollbar-track {
            background-color: #f1f1f1;
            border-radius: 0px;
        }
        &::-webkit-scrollbar {
            width: 11px;
            height: 5px;
        }
        &::-webkit-scrollbar-thumb {
            background: #6f6f6f;
            border-radius: 0px;
        }
        li {
            padding: 0.375rem 0.75rem;
            cursor: pointer;
            &:hover {
                color: #ba9736;
            }
        }
    }
}

// conscent box
.consent-box{
    @include flex(space-between, center);
    color: $color-font-gray;
    .box-item:first-child{
        margin-right:auto;
    }
    .box-item {
        + .box-item{
            margin-left: auto;
        }
    }
}

// event block
.event-block{
    @include flex(center, stretch);
    .event-card-carousel,
    .owl-stage-outer,
    .owl-stage,
    .owl-item
    // .event-card
    {
        height:100%;
    }

    .col-calendar{
        align-self: flex-start;
    }
}

// event-card-edge-container
.event-card-edge-container{
    padding: 20px;
}
// event-card-edge-container /

// event card
.event-card{
    background-size: 125%;
    background-position: center;
    position: relative;
    font-size: 20px;
    padding: 1.25em;
    padding-bottom: 1rem;
    .is-ready &{
        transition: .3s;
    }

    $corderSize:66px;
    .bg{
        // bg
        position: absolute;
        &.shadow {
            box-shadow: 0 0 20px 5px rgba(145,141,130, 0.5);
            &.bottom-right{
                width: 78px;
                height: 94px;
                border: 0;
                left: auto;
                transform: rotate(45deg);
                right: 21px;
                bottom: 14px;
            }
        }
        &.top{
            background: #fff;
            left:0;
            right:0;
            bottom:$corderSize;
            top:0;
        }
        &.bottom-left{
            background: #fff;
            left:0;
            right:$corderSize;
            top: calc(100% - #{$corderSize});
            bottom: 0;
        }
        &.bottom-right{
            right:0;
            bottom:0;
            // @include caret('bottom', 176px, 88px, #fff);
            @include caret('bottom', $corderSize * 2, $corderSize, #fff);
        }
    }
    .card-inner{
        position: relative;
        z-index: 1;
    }
    .card-head{
        @include flex(space-between, stretch);
    }
    .card-main{
        font-size: 16px;
        padding-bottom: 1.5em;
        // padding-right: 1em;
    }
    .card-title{
        font-size: 1em;
        font-family: $ff-noto;
        line-height: 1.6;
        padding-right: 1em;
    }

    .is-agent-pc & {
        .card-tool{
            .event-navigator{
                .prev-event{
                    &:hover{
                        color:$color-font;
                        i {
                            transform: translateX(-5px);
                        }
                    }
                }
                .next-event{
                    &:hover{
                        color:$color-font;
                        i {
                            transform: translateX(5px);
                        }
                    }
                }
            }
        }
    }

    .is-agent-mobile & {
        .card-tool{
            .event-navigator{
                .prev-event{
                    &:active{
                        color:$color-font;
                        i {
                            transform: translateX(-5px);
                        }
                    }
                }
                .next-event{
                    &:active{
                        color:$color-font;
                        i {
                            transform: translateX(5px);
                        }
                    }
                }
            }
        }
    }

    .card-tool{
        margin-bottom: 0.75rem;
        display: flex;
        flex-direction: column;
        flex-shrink: 0;
        .event-navigator{
            @include flex(center,center);
            margin-top: auto;
            margin-left: auto;
            font-size: 22px;
            color: $color-primary;
            i{
                margin: 0 5px;
                position: relative;
                top: 1px;
                transition: .3s;
            }
            .txt{
                font-size: 16px;
                transition: .3s;
            }
            .prev-event{
                padding-right: 1em;
                &:hover{
                    color:$color-font;
                    i {
                        transform: translateX(-5px);
                    }
                }
            }
            .next-event{
                padding-left: 1em;
                &:hover{
                    color:$color-font;
                    i {
                        transform: translateX(5px);
                    }
                }
            }
        }
    }
    .card-foot{
        position:relative;
        font-size: 1rem;
    }
    .divider-line{
        margin:20px 0;
        margin-top: 10px;
    }

    .event-title{
        font-size: 16px;
        margin-bottom: 10px;
        color: $color-primary;
        font-family: $ff-noto;
        font-weight: bold;
    }

    .event-item{
        display: flex;
        font-family: $ff-nunito;
        &:last-child{
            .content{
                padding-right: 1.9em;
            }
        }
        &:hover{
            .content{
                color:$color-primary;
            }
        }
        .title{
            color:$color-font;
            width: 73px;
            flex-shrink: 0;
            font-weight: bold;
        }
        .content{
            color: $color-font-gray;
            transition: .3s;
        }

    }

    .event-navigator{
        @include flex(center,center);
        .prev-event, .next-event{
            color: $color-primary;
            transition: .3s;
            i {
                transition: .3s;
                position: relative;
                top: -1px;
            }
        }

        .swiper-button-disabled{
            opacity: 0.4;
            pointer-events: none;
        }

        .prev-event{
            &:hover{
                i {
                    transform: translateX(-5px);
                }
            }
        }

        .next-event{
            &:hover{
                i {
                    transform: translateX(5px);
                }
            }
        }
    
        .swiper-pagination-bullet{
            width: 10px;
            height: 10px;
            background: $color-primary;
            margin: 0 13px;
        }
        .card-pagination{
            margin: 0 5px;
            width: auto;
        }
    }

    // 其他
    .card-more-btn{
        width: 180px;
        max-width: 100%;
    }

    @include tablet{
        .card-tool{
            .event-navigator{
                width: 285px;
                max-width: 100%;
                justify-content: space-between;
                .prev-event{
                    padding-right: .2em;
                    i{
                        margin-left: 0;
                    }
                }

                .next-event{
                    padding-left: 0.2em;
                    i {
                        margin-right: 0;
                    }
                }
            }
        }
    }

    @include mobile-xl{
        .event-navigator{
            .swiper-pagination-bullet{
                margin: 0 6px;
            }
        }
    }

    @include media(476){
        $corderSize: 46px;
        .bg{
            // bg
            position: absolute;
            &.shadow {
                box-shadow: 0 0 20px 5px rgba(145,141,130, 0.5);
                &.bottom-right{
                    width: 91px;
                    height: 62px;
                    border: 0;
                    left: auto;
                    transform: rotate(45deg);
                    right: 11px;
                    bottom: 24px;
                }
            }
            &.top{
                background: #fff;
                left:0;
                right:0;
                bottom:$corderSize;
                top:0;
            }
            &.bottom-left{
                background: #fff;
                left:0;
                right:$corderSize;
                top: calc(100% - #{$corderSize});
                bottom: 0;
            }
            &.bottom-right{
                right:0;
                bottom:0;
                // @include caret('bottom', 176px, 88px, #fff);
                @include caret('bottom', $corderSize * 2, $corderSize, #fff);
            }
        }

        .event-navigator{
            .txt{
                font-size: 15px;
            }
            .prev-event{
                font-size: 14px;
            }
            .next-event{
                font-size: 14px;
            }
        }
    }

    @include mobile-lg{
        .event-navigator{
            .txt{
                font-size: 15px;
            }
            .prev-event{
                font-size: 12px;
            }
            .next-event{
                font-size: 14px;
            }
            
        }
        .card-tool{
            .card-more-btn{
                width: 100%;
            }
        }
    }

    @include media(374.98){
        .card-tool{
        }
        .event-navigator{
            .swiper-pagination-bullet{
                margin: 0 5px;
            }
            .txt{
                font-size: 14px;
            }
        }
    }
}

// divider-line
@mixin divider-line-factory($name: '', $color:$color-gray) {
    .divider-line-#{$name} {
        display: block;
        width:100%;
        height:1px;
        background-color: $color;
        @content;
    }
}

@include divider-line-factory($color-primary);
@include divider-line-factory(light,$color-hr);



// img upload
.img-upload-box {
    position: relative;
    background: #f6f3ee;
    border-radius: 5px;
    transition: .3s;
    overflow: hidden;
    cursor: pointer;

    // 外觀 - 僅顯示模式
    &.is-display {
        background-size: cover;
        background-position: center;
        cursor: default;
        &:after {
            display: none;
        }
    }

    &:hover:not(.is-display) {
        background: none;
        .box-inner .img-show {
            filter: brightness(0.8);
        }
        .box-inner .default-icon{
            transform: translateY(-5px);
            filter: brightness(0.8);
        }
    }
    &:before {
        content: '';
        display: block;
        width: 100%;
        padding-top: calc(230 / 330 * 100%);
    }
    &:after {
        // border
        content: '';
        display: block;
        @include absolute(5px, 5px, 5px, 5px);
        border: 1px solid $color-primary;
        border-radius: 5px;
    }
    .box-inner {
        @include absolute(0, 0, 0, 0);
        @include flex(center, center);
        flex-direction: column;
        overflow: hidden;
        img {
            transition: .3s;
            margin-left:auto;
            margin-right:auto;
        }
        .img-show{
            max-width: calc(100% - 10px);
            max-height: calc(100% - 10px);
        }
        .default-icon {

            max-width: 35%;
            max-height: 50%;
        }
    }

    // 打叉
    .remove-btn{
        position: absolute;
        right: 10px;
        top: 10px;
        width: 30px;
        height: 30px;
        @include flex(center,center);
        font-size: 25px;
        color: #bb6217;
        opacity: 0;
        visibility: hidden;
        &.is-show{
            opacity: 1;
            visibility: visible;
        }
    }

    // 已上傳照片不顯示icon
    .img-show:not([src=""]) ~ .default-icon{
        display: none;
    }

}

.img-upload-box2 {
    @extend .img-upload-box;
    &:hover{
        .btn-select{
            background: darken($color-primary, 5%);
            .txt{
                letter-spacing: 1px;
                transform: translateX(-3px);
            }
        }
    }
    .btn-select{
        width: 100px;
        position: absolute;
        right: 0;
        bottom: 0;
        border-radius: 50%;
        background: $color-primary;
        color: #fff;
        transform: translateX(30%) translateY(64%);
        transition: .3s;
        z-index: 1;
        &:before{
            content:"";
            display: block;
            padding-top: 100%;
        }
        .txt {
            position: absolute;
            top: 0.7em;
            left: 1.7em;
            font-size: 14px;
            transition: .3s;
        }
    }

}

// img upload


// full-w-banner
.full-w-banner{
    background: $color-bg-gray;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 44px;
    color:#fff;
    position: relative;
    padding-top: calc(420 / 1920 * 100%);

    // 大小
    &.size-h-narrow{
        padding-top: 190px;
        .container{
            min-height: 190px;
        }
    }

    &.size-1380by385{
        padding-top: calc( 385 / 1380 * 100%);
    }

    // sty-vid-embed
    &.sty-vid-embed{
        min-height: 220px;
        .embed-box{
            width: 47%;
            min-width: 270px;
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            top: 50%;
        }
    }
    // sty-vid-embed /

    .bg{
        @include absolute(0,0,0,0);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;

        &.mobile{
            display: none;
        }
    }

    .container{
        @include flex(center, flex-start);
        flex-direction: column;
        @include absolute(0,0,0,0);
        padding-top:15px;
        padding-bottom:15px;
    }

    .banner-title{
        font-family: $ff-spectral;
        font-size: 1em;
        margin-bottom: 15px;
        line-height: 1.2;
    }
    .banner-des{
        font-family: $ff-nunito;
        font-size: 16px;
        line-height: 1.5;
    }

    // 手機
    @include media(1650) {
        &.sty-vid-embed{
            .embed-box{
                width: 37%;
            }
        }
    }
    @include media(1400) {
        &.sty-vid-embed{
            .embed-box{
                width: 33%;
            }
        }
    }
    @include pc {
        &.sty-vid-embed{
            .embed-box{
                width: 40%;
            }
        }
    }
    @include tablet{
        font-size: 34px;
        padding-top: calc(350 / 768 * 100%);

        &.sty-vid-embed{
            .embed-box{
                width: 70%;
            }
        }

        .bg{
            &.pc{
                display: none;
            }
            &.mobile{
                display: block;
            }
        }
        .container{
            min-height: 250px;
        }
        .banner-title{
            margin-bottom: 10px;
        }
    }

    @include media(640) {
        &.sty-vid-embed{
            .embed-box{
                width: 60%;
            }
        }
    }

    @include mobile-xl{
        font-size: 30px;
        .container{
            min-height: 200px;
        }
        .banner-title{
            margin-bottom: 5px;
        }
    }

    @include mobile-lg{
        font-size: 28px;
        .container{
            min-height: 150px;
        }
    }
}
// full-w-banner (end)

// inpage-banner
.inpage-banner-container{
    @include tablet{
        padding: 0;
    }
}
.inpage-banner{
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    font-size: 44px;
    color:#fff;
    position: relative;
    display: block;

    &:before{
        content:'';
        display: block;
        padding-top: calc( 420 / 1380 * 100%);
    }

    .banner-inner{
        @include absolute(0,0,0,0);
        padding: 15px;
    }

    // 大小
    &.size-h-lg{
        &:before{
            padding-top: calc( 530 / 1380 * 100%);
        }
    }
    &.size-h-narrow{
        padding-top: 190px;
        .container{
            min-height: 190px;
        }
    }

    &.size-1350by310{
        &:before{
            padding-top: calc( 310 / 1350 * 100%);
        }
    }

    &.size-1380by530{
        &:before{
            padding-top: calc( 530 / 1380 * 100%);
        }
    }

    // sty-vid-embed
    &.sty-vid-embed{
        .embed-box{
            width: 47%;
            position: absolute;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            top: 44%;
        }
    }
    // sty-vid-embed /

    .bg{
        @include absolute(0,0,0,0);
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
        background-color: $color-bg-gray;

        &.mobile{
            display: none;
        }
    }

    .banner-title{
        font-family: $ff-spectral;
        font-size: 1em;
        margin-bottom: 15px;
        line-height: 1.2;
    }
    .banner-des{
        font-family: $ff-nunito;
        font-size: 16px;
        line-height: 1.5;
    }

    &.break-1800{
        @include media(1800){
            font-size: 28px;
            .sty-1{
                font-size: 28px;
            }
            .bg{
                &.pc{
                    display: none;
                }
                &.mobile{
                    display: block;
                }
            }
            min-height: 250px;
            .banner-title{
                margin-bottom: 10px;
            }
        }

        @include media(1700){
            font-size: 24px;
            min-height: 200px;
            .sty-1{
                font-size: 24px;
            }
            .banner-title{
                margin-bottom: 5px;
            }
        }

        @include media(1600){
            font-size: 22px;
            min-height: 150px;
            .sty-1{
                font-size: 22px;
            }
        }
    }

    // 手機
    @include media(768){
        font-size: 34px;
        &:before{
            padding-top: calc( 350 / 768 * 100%)!important;
        }
        .bg{
            &.pc{
                display: none;
            }
            &.mobile{
                display: block;
            }
        }
        min-height: 250px;
        .banner-title{
            margin-bottom: 10px;
        }
    }

    @include mobile-xl{
        font-size: 30px;
        min-height: 200px;
        .banner-title{
            margin-bottom: 5px;
        }
    }

    @include mobile-lg{
        font-size: 28px;
        min-height: 150px;
    }
}

// inpage-banner (end)

// banner-msg-wrap
.banner-msg-wrap{
    &.sty-1{
        text-align: center;
        height: 100%;
        display: inline-flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-left: 55px;
        font-size: 36px;
        .banner-title{
            color: $color-primary;
        }
        .banner-btn{
            width: 115px;
            height: 30px;
            border-radius: 0;
            font-size: 18px;
        }
    }

    @include pc-xl{
        &.sty-1{
            .banner-title{
                font-size: 26px;
            }
        }
    }

     @include pc-lg{
        &.sty-1{
            .banner-title{
                font-size: 22px;
            }
        }
    }

    @include pc {
        &.sty-1{
            margin-left: 35px;
            .banner-title{
                font-size: 18px;
            }
            .banner-btn{
                font-size: 16px;
                height: 30px;
                min-height: 30px;
            }
        }
    }

    @include tablet {
        &.sty-1{
            margin-left: 25px;
            .banner-title{
                font-size: 26px;
                margin-bottom: 10px;
            }
            .banner-btn{
                font-size: 16px;
            }
        }
    }

    @include mobile-xl {
        &.sty-1{
            margin-left: 15px;
            .banner-title{
                font-size: 22px;
            }
            .banner-btn{
                font-size: 16px;
                min-height: 35px;
            }
        }
    }

    @include mobile-lg {
        &.sty-1{
            margin-left: 0px;
            .banner-title{
                font-size: 18px;
            }
            .banner-btn{
                font-size: 16px;
            }
        }
    }
}
// banner-msg-wrap /


// product-toolbar
.product-toolbar{
    margin-bottom: 15px;
    .inner{
        margin-left: -5px;
        margin-right: -5px;
        display: flex;
        flex-wrap: wrap;
    }

    .col{
        padding-left:5px;
        padding-right:5px;
    }

    .item-1of5{
        flex-basis: 20%;
        max-width: 20%;
    }

    .form-group{
        margin-bottom: 10px;
    }

    // mobile
    @include pc-lg{
        .item-1of5{
            flex-basis: 25%;
            max-width: 25%;
        }
    }

    @include pc{
        .item-1of5{
            flex-basis: 33.33%;
            max-width: 33.33%;
        }
    }

    @include tablet{
        .item-1of5{
            flex-basis: 50%;
            max-width: 50%;
        }
    }

    @include mobile-xl{
        .item-1of5{
            flex-basis: 100%;
            max-width: 100%;
        }
    }
}
// product-toolbar (end)

// list-toolbar
.list-toolbar{
    margin-bottom: 20px;

    // page new slae list
    &.sty-new-sale-list{
        align-items: center;
        label{
            font-weight: normal;
            margin-bottom: 0;
        }
        .col-right{
            text-align: right;
        }
        .toolbar-sort{
            display: inline-flex;
            width: 285px;
        }

        &.break-default{

            @include tablet{
                .col-left{
                    margin-bottom: 20px;
                }
                .col-left, .col-right{
                    flex: 100%;
                    max-width:100%;
                }
            }

            @include mobile-lg{
                .form-group{
                    width:100%;
                    flex-wrap: wrap;
                    label{
                        width:100%;
                        margin-right:0;
                        margin-bottom: 7px;
                        text-align: left;
                    }
                }
            }
        }
    }

    .bar-inner{
        @include flex(space-between, center);
        flex-wrap: wrap;
        margin-left:-5px;
        margin-right: -5px;
    }
    .bar-item{
        padding-top: 5px;
        padding-bottom: 5px;
    }
    .item-1of5{
        width: 20%;
        max-width: 20%;
    }
    .col{
        padding-left:5px;
        padding-right:5px;
    }
    .sort-by {
        @include flex(center,center);
        margin-bottom: 0;
        label{
            flex-shrink: 0;
            margin-right: .5em;
        }
        .custom-select{
            width:auto;
        }
    }

    @include pc-lg{
        .item-1of5{
            flex-basis: 25%;
            max-width: 25%;
        }
    }

    @include pc{
        .item-1of5{
            flex-basis: 33.33%;
            max-width: 33.33%;
        }
    }

    @include tablet{
        .item-1of5{
            flex-basis: 50%;
            max-width: 50%;
        }
    }

    @include mobile-xl{
        .item-1of5{
            flex-basis: 100%;
            max-width: 100%;
        }
    }
}
// list-toolbar (end)

// product-buy-box
.product-buy-box{
    @include flex(center,flex-start);
    font-size: 36px;
    font-family: $ff-msjh;

    .tw & {
        .product-detail-table{
            th {
                width:35%;
            }
        }
    }

    .box-media{
        width:41.6%;
        flex-shrink: 0;
        position: relative;
        text-align-last: center;
    }
    .box-main{
        flex-grow:1;
        padding-left: 1.33em;
        min-width: 0;
    }

    .box-title{
        font-size: 1em;
        font-family: $ff-noto;
        margin-bottom: 0.5em;
    }

    .box-title2 {
        font-size: 18px;
        margin-bottom: 10px;
        line-height: 1.3;
    }

    .box-des{
        line-height: 1.4;
        .des-inner{
            font-size: 17px;
            line-height: 1.5;
        }
    }

    .box-info-bar{
        line-height: 1;

        &.sty-2side{
            @include flex(space-between, center);
        }

        &.year-and-size{
            font-size: 0.66em;
            font-family: $ff-lato;
            .v-divider{
                background: $color-font-gray;
                margin: 0 0.5em;
            }
        }

        &.price-and-fav{
            font-family: $ff-lato;
        }

        // 其他
        .inf-txt-group{
            display: flex;
            align-items: center;
        }
        .inf-txt{
            color: $color-font-gray;
        }
        .price{
            font-size: 1em;
            font-weight: bold;
            .original{
                margin-right: 0.57em;
                color: #885b15;
            }
            .discount{
                font-weight: 300;
                font-size: 0.66em;
            }
        }
        .add-fav-btn {
            width: 1.06em;
            height: 1.06em;
            @include flex(center,center);
            &.is-fav, &.is-active {
                color: $color-primary;
                i.icon-heart{
                    &:before{
                        content: "\e914";
                    }
                }
            }
        }
        .v-divider{
            width: 1px;
            background: currentColor;
            height: .8em;
            display: inline-block;
        }
        .discount{
            color: $color-font-gray;
            text-decoration: line-through;
        }
        // 其他 /
    }

    .box-des{
        color:$color-font-gray;
    }

    .box-tool-bar{
        margin-bottom: 0.61em;
        .bar-inner{
            @include flex(flex-start,center);
            margin-left:-10px;
            margin-right: -10px;

        }
        .col-item{
            padding: 0 10px;
            min-width: 0;
        }
        .add-cart, .input-group-calc2{
            height: 54px;
            max-width: 100%;
        }
        .add-cart{
            width: 240px;
            font-size: 25px;
            font-family: $ff-msjh;

            &:hover{
                background: $color-primary;
            }
        }


    }

    .box-glance-list{
        font-size: 16px;
        > ul {
            margin:0;
        }

        li {
            @include flex(auto, center);
            line-height: 1.4;
            padding: .5em 0;
        }

        .icon {
            width:20px;
            height: 20px;
            @include flex(center,center);
            color: $color-primary;
            font-size: 19px;

            &.icon-wine-bottle{
                font-size: 25px;
            }
        }

        .content{
            padding-left: 13px;
        }
    }

    .en & {
        .product-detail-table{
            width:  418px;
        }
    }
    .product-detail-table{
        width: 358px;
        max-width: 100%;
        th{
            width: 45%;
        }
        td{
            // width: 45%;
        }
    }

    // 其他
    .box-v-spacer-45px{
        height: 45px;
    }
    .box-v-spacer-30px{
        height: 30px;
    }
    .box-v-spacer-20px{
        height: 20px;
    }
    .box-v-spacer-15px{
        height: 15px;
    }
    // 其他 /

    // 手機

    @include pc-lg{
        font-size: 26px;
    }

    @include pc{
        .box-main{
            padding-left: 1em;
        }
    }
    
    @include tablet{
        flex-wrap: wrap;
        font-size: 22px;
        .box-media{
            width: 100%;
            margin-bottom: 1em;
            img{
                margin: auto;
                display: block;
                max-height: 380px;
            }
        }
        .box-main{
            width: 100%;
            padding: 0;
        }

        .box-tool-bar{
            margin-bottom: 1em;
            .add-cart{
                font-size: 22px;
            }
        }

    }

    @include media(476) {
        .box-tool-bar{
            .bar-inner{
                flex-wrap: wrap;
            }

            .col-item{
                width: 100%;

                + .col-item{
                    margin-top: 15px;
                }
            }

            .item-amt-wrap{
                width: 100%;
            }

            .add-cart{
                width: 100%;
                min-height: 50px;
            }
        }
    }
}
// product-buy-box

// add-fav
.add-fav-btn{
    // width: 40px;
    // height: 40px;
    // border-radius: 50%;
    // font-size: 30px;
    // &.is-active{
    //     background: $color-primary;
    //     color: #fff;
    //     font-size: 0.7333em;
    // }
}
// add-fav (end)

// navtab-sty-1
.navtab-sty-1{
    font-size: 18px;
    border-bottom: 1px solid $color-hr;
    justify-content: center;
    font-family: $ff-noto;
    margin-bottom: 1.94em;
    .nav-link{
        padding: 0.53em 1.916em;
        position: relative;
        &:before, &:after{
            content:'';
            display: block;
            width:10px;
            height: 1px;
            background: currentColor;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: .3s ease-in;
            opacity: 0;
        }
        &:before{
            margin-right: 1em;
            left: calc( (1.916em / 2 ) - 15px);
        }
        &:after{
            right: calc( (1.916em / 2 ) - 15px);
            margin-left: 1em;
        }
        &.active{
            @include flex(center,center);
            &:before, &:after{
                opacity: 1;
            }
            &:before{
                margin-right: 1em;
                left: calc( (1.916em / 2 ) - 10px);
            }
            &:after{
                right: calc( (1.916em / 2 ) - 10px);
                margin-left: 1em;
            }
        }
    }


}
// navtab-sty-1

// navtab-bold-underline
.navtab-bold-underline{
    flex-wrap: nowrap;

    .nav-item{
        width: 100%;
        border-bottom: 2px solid #f3f3f3;
        position: relative;
        font-weight: bold;
        text-align: center;
    }
    
    .nav-link{
        &:before{
            content:'';
            display: block;
            position: absolute;
            left:0;
            bottom: -2px;
            right: 0;
            height: 0;
            transition: .3s;
        }

        &.active{
            &:before{
                height: 6px;
                background: #2e3a38;
            }
        }
    }

    &_auto-wrap{
        flex-wrap: wrap;
        .nav-item{
            width: auto;
            flex-grow: 1;
            align-self: stretch;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
    }


    &:not(.navtab-bold-underline_auto-wrap){
        @include mobile-xl{
            .nav-link{
                padding: 0.5rem 0.6rem;
            }
        }
    
        @include mobile-lg{
            .nav-link{
                padding: 0.5rem 0.4rem;
            }
        }
    }
}
// navtab-bold-underline /

// contact-grape
.contact-grape{
    display: flex;
    flex-wrap: wrap;
    font-size: 30px;
    .col-item{
        text-align: center;
    }
    .icon{
        display: block;
        margin: auto;
        margin-bottom: 0.6em;
        color:$color-primary;
        width: 1em;
        height: 1em;
        @include flex(center,center);
    }
    .content{
        display: block;
        line-height: 1.5;
        min-height: 3em;
        font-size: 16px;
    }
}
// contact-grape (end)

// social-link-grape
.social-link-grape{
    @include flex(space-between,center);
    width: 185px;
    margin: auto;
    .link{
        color: #999999;
        width: 20px;
        height: 20px;
        @include flex(center,center);
        transition: .3s;
        &:hover{
            color: $color-primary;
        }
    }
}
// social-link-grape (end)


// float card
.float-card{
    background: #fff;
    box-shadow: 0 0 30px 0 rgba(#060001, .2);
    width: 440px;
    padding: 52px 38px;
    // 背景
    &.bg-flower{
        // bg-flower
        background: url(/assets/images/dec/dec-grape.png), #fff;
        background-position: calc(100% + 80px) calc(0% - 30px);
        background-repeat: no-repeat;
    }

    .card-title{
        font-family: $ff-noto;
        font-size: 26px;
        letter-spacing: .2em;
    }

    .card-subtitle{
        font-size: 18px;
    }

    .card-des{
        color: $color-font-gray;
    }

    @include pc-lg{
        padding: 32px 18px;
    }

    @include pc{
        padding: 18px 10px;
    }
}

// flaote card(end)


// table

@mixin table-sty1-mobile{
    border-bottom: 0;
    tr{
        display: block;
    }
    th, td{
        display: flex;
        align-items: center;
        width: 100%;

        height:auto;
        min-height: 50px;
    }
}

.table-sty1{
    border: 1px solid #e5e5e5;
    width: 100%;
    table-layout: fixed;
    .table-title{
        font-weight: bold;
        letter-spacing: .2em;
        font-size: 18px;
        text-align: center;
        justify-content: center;
        border-bottom-width: 2px;
    }
    tr{
    }
    th, td{
        height: 50px;
        padding: 0 18px;
        border-bottom: 1px solid #e5e5e5;
    }
    th{
        background:#f6f3ee;
        font-family: $ff-nunito;
        width: 160px;
    }
    td{
        width: calc(50% - 160px);
    }

    &.break-768{
        @include tablet {
            @include table-sty1-mobile;
        }
    }
}


.payment-contact-table{

    img{
        &.tw, &.pc, &.en, &.mobile{
            display: none;
        }
    }

    .tw & {
        img.tw.pc{
            display: block;
        }
    }

    .en & {
        img.en.pc{
            display: block;
        }
    }


    th{
        width: 180px;
        text-align: center;
        letter-spacing: 3px;
    }

    @include tablet{
        &.break-768{
            th{
                justify-content: center;
                padding-top: 10px;
                padding-bottom: 10px;
            }
        }
    }

    @include media(575.98){
        .tw & {
            img.tw.pc{
                display: none;
            }
        }
    
        .en & {
            img.en.pc{
                display: none;
            }
        }

        .tw & {
            img.tw.mobile{
                display: block;
            }
        }
    
        .en & {
            img.en.mobile{
                display: block;
            }
        }
    }
}
// table


// delivery panel
.delivery-panel,
.grid2-form-panel
{
    $gape: 83px;
    $bg-color: #f6f3ee;
    font-size: 36px;

    padding: 1.056em;
    min-width: $gape;
    min-height: $gape;
    position: relative;
    display: flex;
    flex-wrap: wrap;

    .bg{
        position: absolute;
        &.top{
            left: 0;
            right: 0;
            bottom: $gape;
            top: 0;
            background: $bg-color;

        }

        &.bottom-left{
            left: 0;
            right: $gape;
            top: calc(100% - #{$gape});
            bottom: 0;
            background: $bg-color;

        }

        &.bottom-right{
            right:0;
            bottom:0;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: $gape $gape 0 0;
            border-color: #f6f3ee transparent transparent transparent;
        }
    }

    .form-group, .form-group-horizontal{
        font-size: 1rem;
    }

    .panel-title{
        font-size: 1em;
        font-family: $ff-noto;
        line-height: 1.2;
        margin-bottom: 0.8em;
    }

    .col-left, .col-right{
        position: relative;
    }
    .col-left{
        padding-left:0;
        padding-right: 1.24em;
    }
    .col-right{
        padding-right:0;
        padding-left: 1.24em;
        border-left: 1px solid $color-primary;
    }
    

    // 其他
    .custom-control{
        .custom-control-input:not([disabled]) ~ label{
            &:before{
                border-color:$color-font-gray-light;
            }
        }
    }
    .prompt-box{
        font-size: 18px;
    }
    // 其他 (end)

    @include tablet{
        font-size: 33px;
    }
    @include mobile-xl{
        font-size: 28px;
    }
}

// 手機板樣式
@mixin grid2-form-panel-mobile{
    padding: .8em;
    padding-bottom: 80px;
    .panel-title{
        margin-bottom: 0.3em;
    }

    .col-left{
        flex-basis: 100%;
        max-width: 100%;
        padding-right:0;
        margin-bottom: 1em;
    }

    .col-right{
        flex-basis: 100%;
        max-width: 100%;
        padding-left:0;
        border-left:0;
    }
}


.grid2-form-block{
    @extend .grid2-form-panel;
    padding: 0;
}

// 手機板樣式
@mixin grid2-form-block-mobile{
    .col-left{
        flex-basis: 100%;
        max-width: 100%;
        padding-right:0;
        margin-bottom: 1em;
    }

    .col-right{
        flex-basis: 100%;
        max-width: 100%;
        padding-left:0;
        border-left:0;
    }
}

// delivery panel



// no data
.no-data-box{
    font-size: 36px;
    font-family: $ff-noto;
    text-align: center;
    margin-bottom: 1.6667em;
    .box-title{
        margin-bottom: 0.55em;
        font-size: 1em;
    }
    .box-des{
        color: $color-font-gray;
        font-size: 17px;
    }
}

// no data


// box-event
.box-event{
    font-size: 20px;
    margin-bottom: 2.5em;
    .box-media{
        position: relative;
        margin-bottom: 10px;
        &:before{
            content:'';
            display: block;
            width: 100%;
            padding-top: calc(250 / 375 * 100%);
        }
        img {
            max-height: 100%;
            @include absolute(0,0,0,0);
            margin:auto;
        }
    }

    .box-title{
        font-size: 1em;
        font-family: $ff-noto;
        line-height: 1.5;
        @include text-lines-ellipsis(1.5em, 2);
        margin-bottom: 10px;
    }

    .box-main{
        border-bottom: 1px solid $color-hr;
        padding-bottom: 10px;
        margin-bottom: 15px;
    }

    .box-info-bar{
        @include flex(auto,center);
        .left, .right{
            min-width: 0;
        }
        .left{
            padding-right: 5px;
            flex-grow: 1;
        }
        .right{
            padding-left: 5px;
            max-width: 50%;
            flex-shrink: 0;
            .box-info-item{
                justify-content: flex-end;
            }
        }
    }

    .box-info-item{
        font-size: 16px;
        overflow: hidden;
        @include flex(auto, center);
        .icon {
            margin-right: 10px;
            width: 20px;
            height: 20px;
            @include flex(center,center);
        }
        .content{
            color: $color-font-gray;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
        }

        // icon adjust
        .fa-clock-o{
            font-size: 19px;
        }

        .fa-users{
            font-size: 15px;
        }
    }

    .box-footer{
        .btn-findout{
            letter-spacing: 0;
            width: 140px;
            margin: auto;

            &:hover {
                color: $color-primary;
                background: none;
                border-color: $color-primary;
            }
        }
    }

    @include tablet{
        font-size: 18px;
    }
}
// box-event (end)


// event-info-box
.event-info-box{
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    position: relative;
    padding-bottom: 40px;
    margin-bottom: 35px;
    .col-media, .col-main{
        position: relative;
        z-index: 1;
        padding:0;
    }
    .col-main{
        padding-left: 20px;
    }
    .col-media{
        padding-right: 20px;
    }
    .box-title{
        font-family: $ff-noto;
        line-height: 1.2;
        font-size: 30px;
    }
    .box-title2{
        font-family: $ff-noto;
        font-size: 18px;
        line-height: 1.33;
        color: $color-primary;
        margin-bottom: 0.8em;
    }
    .add-to-calendar{
        color: $color-primary;
        margin-bottom: 0.66em;
        display: block;
        text-align: right;
    }
    .box-info-item{
        display: flex;
        align-items: flex-start;
        line-height: 1.4;
        + .box-info-item{
            margin-top: 5px;
        }
        .title{
            padding-right: 1.2em;
            flex-shrink: 0;
        }
        .content{
            color: #9999;
        }
    }

    .btn-join{
        width: 240px;
        margin-top: 34px;
        letter-spacing: 0;
    }

    .dec-1{
        position: absolute;
        right:0;
        bottom:0;
        max-width: 37%;
    }

    // 手機
    @include pc-lg{
        .box-title{
            font-size: 26px;
        }
        .btn-join{
            margin-top: 24px;
        }
    }
    @include pc{
        .col-media {
            width: 100%;
            max-width: 100%;
            text-align: center;
            margin-bottom: 1em;
            padding-right:0;
        }
        .col-main{
            width: 100%;
            max-width: 100%;
            padding-left:0;
        }
    }
    @include tablet{
        .box-title{
            font-size: 22px;
        }
        .btn-join{
            width: 100%;
        }
    }
    
}

.en .event-info-box{
    // 英文
    .box-info-item {
        .title{
            min-width: 74px;
        }
    }
}
// event-info-box


// describe-block
.describe-block{
    display: flex;
    flex-wrap: wrap;
    .title{
        margin:0;
        margin-bottom: 15px;
        font-weight: bold;
    }
    .col-left, .col-right{
        padding:0;
    }
    .col-left{
        padding-right: 37px;
    }
    .col-right{
        padding-left: 37px;
    }
    @include pc-lg{
        .col-left {
            flex-basis: 100%;
            max-width: 100%;
            margin-bottom: 1em;
            padding-right:0;
        }
        .col-right{
            text-align: center;
            flex-basis: 100%;
            max-width: 100%;
            padding-left:0;
        }
    }
}
// describe-block


// intrest-box
.intrest-box2{
    display: block;
    position: relative;
    background-image:cover;
    margin-right: 6px;
    margin-bottom: 6px;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 5px;
    transition: .3s;
    &:hover{
        opacity: .9;
    }
    + .intrest-box2{
        margin-left: 21px;
    }

    + .link-list{
        margin-left: 65px;
    }

    &:before{
        content:'';
        display: block;
        padding-top: calc(136 / 199 * 100%)
    }
    &:after{
        content:'';
        display: block;
        @include absolute(5px,-5px, -5px, 5px);
        border: 1px solid $color-primary;
        border-radius: inherit;
    }
    .content{
        color: #fff;
        padding: 20px 17px;
        @include absolute(0,0,0,0);
        width: 100%;
        bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .up-title{
        font-family: $ff-noto;
        font-size: 14px;
        margin-top: auto;
    }
    .down-title{
        font-size: 18px;
    }
}

// intrest-box (end)


// scroll-toggle
.scroll-toggle {
    .scroll-toggle-head {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: center;
        background: #fff;
        position: relative;
        cursor: pointer;
        &:after {
            @include fa-icon('\f106');
            position: absolute;
            right: 15px;
            top: 50%;
            transition: .3s;
            transform: translateY(-50%);
            font-size: 24px;
        }
    }
    &.is-opened .scroll-toggle-head:after {
        transform: translateY(-50%) rotate(180deg);
    }
    &.mobile-md .scroll-toggle-head {
        display: none;
        min-height: 40px;
    }

    // 樣式 - lg
    &.scroll-toggle-lg {
        .scroll-toggle-head {
            min-height: 60px;
        }
    }
    // 樣式 - dark
    &.scroll-toggle-dark {
        .scroll-toggle-head {
            background: #323232;
            color: #fff;
        }
    }

    // 手機樣式
    @mixin  _scroll-toggle-mobile {
        border-radius: 5px;
        overflow: hidden;
        border: 1px solid $color-input-border;
        margin-bottom: 1.5rem;
        .scroll-toggle-head {
            display: flex;
            width: 100%;
        }
        .scroll-toggle-content {
            display: none;
            border-top: 1px solid $color-input-border;
        }
        .tab-simple .nav-link.nav-link:not(.active) {
            border-left: 0;
            border-right: 0;
        }
        // tab hilight
        .tab-simple-hilight {
            .nav-link {
                border-color: #F5E7DC;
            }
        }

        // 個元件調整
        .product-toolbar{
            padding: 15px;
            padding-bottom: 5px;
            margin-bottom: 0;
        }
    }

    @include tablet {
        &.mobile-md {
            @include _scroll-toggle-mobile;
        }
    }

}
// scroll-toggle (end)



// checkout block
@mixin checkout-block-mobile{
    flex-wrap: wrap;
    padding-right: 0;
    .col-left, .col-right{
        flex-basis:100%;
        max-width: 100%;
    }
    .col-left{
        margin-bottom: 1em;
    }
}

.checkout-block{
    @include flex(auto, flex-start);
    // 共用

    &.en-title-145px{
        .en & {
            .col-item.sty-horizontal .col-label{
                width: 145px;
            }
        }
    }

    .col-left{
        flex-grow: 1;
    }
    .col-right{
        width: 393px;
    }

    .col-item{
        margin-bottom: 7px;
        &.sty-horizontal{
            display: flex;
            .col-label{
                width: 90px;
                padding-right: 5px;
                flex-shrink: 0;
                margin-bottom: 0;
            }
            
            &.sty-pure-custom-control-md{
                .col-label{
                    padding-top: 4px;
                }
            }
        }
    }

    .block-title{
        font-family: $ff-noto;
        margin-bottom: 0.5em;
    }

    .custom-control{
        .custom-control-label{
            margin-left: 6px;
        }
    }

    .checkout-info{
        @include flex(space-between, center);
        font-family: $ff-noto;

        .title{
            max-width: 50%;
            min-width: 0;
            overflow: hidden;
            text-overflow: ellipsis;
        }
        .content{
            color: $color-font-gray;
            max-width: 50%;
            flex-grow: 1;
            text-align: right;
            flex-shrink: 0;
        }

        &:not(:first-child):not(.total) {
            margin-top: 7px;
        }

        &.total {
            .content{
                color: $color-money;
                font-size: 24px;
                font-weight: bold;
            }
        }
    }


    // content
    .col-right{
        .btn-checkout{
            margin-top: 29px;
            width: 100%;
        }
    }

    // 其他
    .form-group.sty-horizontal{
        .col-label{
            padding-top: 0;
        }
    }

    // 手機
    @include tablet{
        @include checkout-block-mobile;
    }

    @include media(374.98) {
        .col-item.sty-horizontal{
            flex-direction: column;
            .col-label{
                width: 100%;
                margin-bottom: 3px;
            }
        }
    }
}

// checkout block



// terms block
.terms-block{
    .title{
        margin-bottom: 35px;
    }

    .text-editor-block{
        .divider-line2{
            margin-bottom: 39px;
        }
    }

    .article-content,
    .article-item-list
    {
        font-size: 17px;
        color: $color-font-gray;
        margin-bottom: 44px;
    }


    .article-item-list {
        > ul {
            margin-left: 18px;
        }
    }

    .article-section-title{
        font-size: 20px;
        line-height: 1.5;
        font-weight: bold;
        margin:0;

    }
}

// terms block(end)


// popup
.custom-popup{
    background: $color-bg-light;
    position: absolute;
    // 預設不顯示
    opacity: 0;
    visibility: hidden;
    .popup-content{
        padding: 30px;
    }
}

.cart-popup{
    width: 320px;
    .cart-info-bar{
        display: flex;
        align-items: center;
        margin-bottom: 22px;
        .title{
            flex-grow: 1;
            min-width: 0;
            @include text-ellipsis;
            color: $color-font-gray;
        }
        .content{
            flex-shrink: 0;
            @include text-ellipsis;
            max-width: 50%;
            font-size: 16px;
            color: $color-money;
            font-family: $ff-noto;
            font-weight: bold;
        }
    }
    .cart-item-list{
        max-height: 340px; // for scrollbar
        margin-bottom: 22px;
        .mCSB_inside>.mCSB_container{
            margin-right: 20px;
        }
        &.mCS_no_scrollbar {
            // 沒軌道時 不用 間距
            .mCSB_inside>.mCSB_container{ 
                margin-right: 0;
            }
        }
    }
    .cart-item{
        @include flex(auto, flex-start);
        position: relative;
        padding-right: 22px;
        &:not(:last-child){
            margin-bottom: 22px;
        }
        &:hover{
            .item-title{
                color: $color-primary;
            }
        }
        .item-media{
            width: 67px;
            flex-shrink: 0;
            // &:before{
            //     content:'';
            //     display: block;
            //     padding-top: calc(310 / 460 * 100%);
            // }
            // img{
            //     @include absolute(0,0,0,0);
            //     margin:auto;
            //     max-height: 100%;
            // }
        }
        .item-title{
            margin-bottom: 8px;
            line-height: 1.4;
            @include text-lines-ellipsis(1.4em, 3);
            transition: .3s;
        }
        .item-main{
            flex-grow: 1;
            padding-left: 18px;
            font-size: 13px;
            color: $color-font-gray;
            line-height: 1.4;
        }
        .item-info{
            font-size: 14px;
            font-family: $ff-noto;
            @include text-ellipsis;
            .price{
                color: $color-money;
                font-weight: bold;
            }
        }
        .item-tool{
            position: absolute;
            top: 0;
            right:0;

            &:hover{
                color: $color-primary;
            }
        }
    }
    .btn-checkout{
        width: 100%;
    }
}


.member-popup{
    width: 260px;
    padding-bottom: 30px;
    .popup-content{
        padding-bottom: 0;
    }
    .popup-link{
        font-size: 16px;
        text-align: left;
        margin-bottom: .5em;
        transition: .3s;
        display: block;
        line-height: 1.4;
        &:hover{
            color: $color-primary;
        }
    }
}
// popup

// regions-list-box

.reginos-list{
    > ul {
        margin:0;
        padding:0;
        font-size: 16px;
        color: $color-font-gray;
        padding-left: 7px;
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        margin-left: -15px;
        margin-right: -15px;
    }
    &.sty-per3{
        .list-item{
            width: 33%;
            display: inline-flex;
        }
    }

    .item-title{
        padding-right: 1em;
    }
    .list-item{
        @include flex(auto, center);
        margin-bottom: 0.5em;
        padding: 0 15px;
        a {
            @include link-hover;
            @include link-hover-underline-ani($color-primary);
        }
    }


    @include pc{
        &.sty-per3{
            .list-item{
                width: 50%;
            }
        }
    }

    @include tablet{
        &.sty-per3{
            .list-item{
                width: 100%;
            }
        }
    }
}

.regions-list-box-block{
    .col-item{
        width: 1000px;
        max-width: 100%;
        margin-left:auto;
        margin-right:auto;
        margin-bottom: 70px;
        padding: 0 15px;
        // padding-left:15px;
        // padding-right: 15px;
    }

    .info-tag-media-box{
    }

    // @include media-up(768) {
    //     .col-item:nth-child(odd){
    //         padding-right: 45px;
    //     }
    //     .col-item:nth-child(even){
    //         padding-left: 45px;
    //     }
    // }

    @include pc-lg {
        .info-tag-media-box{
            .box-media{
                top: 32px;
            }
        }
    }

    @include tablet{
        // .col-item{
        //     width: 100%;
        // }

        .info-tag-media-box{
            margin-bottom: 1em;
        }
    }
}
// regions-list-box (end)


// info-group-table
.info-group-table{
    margin-bottom: 2em;
    .table-cotnent{
        display: flex;
        flex-wrap: wrap;
    }
    .table-title{
        border-bottom: 1px solid $color-hr;
        padding-bottom: 0.4em;
    }
    .info-item{
        width: 50%;
        position: relative;
        padding-left: 1em;
        &:before{
            content:'-';
            position: absolute;
            top: 0;
            left:0;
            height: 1em;
        }

        @include link-hover;
    }
}

// info-group-table (end)


// map-describe-block
.map-describe-block{
    display: flex;
    position: relative;
    padding-bottom: 100px;
    .map-img{
        display: block;
        margin:auto;
        cursor: pointer;
    }

    .dec-1{
        position: absolute;
        left: 50%;
        bottom: 0;
        transform: translateX(-50%);
        z-index: -1;
    }
}

// map-describe-block (end)


// info-tage-media-box
.info-tag-media-box{
    background: #efefef;
    position: relative;
    font-size: 20px;
    border-radius: 6px;
    margin-top: 27px;
    margin-bottom: 2em;
    &:before{
        content:'';
        display: block;
        width: 100%;
        padding-top: calc(362 / 467 * 100%);
    }
    &:after{
        content:'';
        display: block;
        @include absolute(5px,5px,5px,5px);
        border: 1px solid $color-primary;
        border-radius: inherit;
    }

    .map-anchor{
        position: absolute; 
        z-index: 1;
        opacity: 0;
        // background: lightblue;
        // color: red;
        overflow: hidden;
        text-overflow: ellipsis;
        height:4.5%;
        font-size: 12px;
        &.chenove{
            top: 15.4%;
            left: 36%;
            width: 7%;
        }

        &.marsannay-la-cote{
            top: 20.4%;
            left: 28%;
            width: 15%;
        }

        &.couchey{
            top: 26.4%;
            left: 36%;
            width: 7%;
        }

        &.fixin{
            top: 31.1%;
            left: 37.1%;
            width: 7%;
            height: 2.5%;
        }

        &.brochon{
            top: 33.4%;
            left: 36%;
            width: 7%;
        }

        &.gevery-cchambertin{
            top: 37.8%;
            left: 28%;
            width: 15%
        }

        &.morey-saint-denis{
            top: 44.1%;
            left: 28.4%;
            width: 15%;
        }

        &.chambolle-musigny{
            top: 50%;
            left: 27.4%;
            width: 16%;
        }

        &.vougeot{
            top: 56.3%;
            left: 35.4%;
            width: 7.8%;
        }

        &.vosne-romanee{
            top: 61%;
            left: 29.9%;
            width: 13.8%;
        }

        &.gilly-les-citeaux{
            top: 53.6%;
            left: 64.9%;
            width: 13.8%;
        }

        &.flagey-echezeaux{
            top: 57.9%;
            left: 65.9%;
            width: 13.8%;
        }

        &.premeaux{
            top: 77.3%;
            left: 58.9%;
            width: 9.8%;
        }

        &.comblanchien{
            top: 82%;
            left: 58.9%;
            width: 9.8%;
        }

         &.corgoloin{
            top: 86.7%;
            left: 58.9%;
            width: 9.8%;
        }
    }

    .box-media{
        @include absolute(5px,5px,5px,5px);
        img {
            max-height: 100%;
            @include absolute(0,0,0,0);
            margin:auto;

        }
    }

    .info-tag{
        position: absolute;
        left: -8px;
        top: -27px;
        font-size: 16px;
        color: #fff;
        z-index: 1;
        line-height: 1.3;
        padding: 7px 10px;
        max-width: 95%;
        div{
            @include text-ellipsis;
        }
        .size-md{
            font-size: 20px;
        }
        *{
            position: relative;
        }
        &:before{
            content:'';
            display: block;
            background: $color-primary;
            @include absolute(0,0,0,0);
            transform: skew(-10deg);
        }
    }
}

// info-tage-media-box



// about-box
.about-box{
    font-size: 16px;
    margin-bottom: 30px;
    .box-media{
        position: relative;
        background: $color-bg-light;
        &:before{
            content:'';
            display: block;
            width:100%;
            padding-top: calc(350 / 550 * 100%);
        }

        img{
            @include absolute(0,0,0,0);
            margin:auto;
            max-height: 100%;
        }
    }
    .box-main{
        padding: 16px 6px;
    }
    .box-title{
        font-size: 1em;
        margin-bottom: 1em;
        color: $color-primary;
        font-family: $ff-noto;
        @include text-ellipsis;
        text-align: center;
    }
    .box-des{
        font-size: 1em;
        margin-bottom: 1em;
        color: $color-font-gray;
        line-height: 1.5;
        @include text-lines-ellipsis(1.5em, 3);
    }

    .more-link{
        text-align: center;
        line-height: 1;
        a{
            border-bottom: 1px solid currentColor;
            @include link-text-hover;
            &:hover{
                letter-spacing: 1px;
            }
        }
    }

    @include tablet{
        .box-title{
            margin-bottom: 0.5em;
        }
        .box-des{
            margin-bottom: 0.5em;
        }
    }
}
// about-box (end)


// warning-bar
.warning-bar{
    background: #ab8f46;
    border-bottom: 2px solid $color-primary;
    color: #fff;
    font-size: 30px;
    padding: 9px 15px;
    @include flex(center,center);
    line-height: 1.4;
    position: fixed;
    bottom: calc(0px + var(--fixed-bottom-bar-height));
    right: 0;
    left: 0;
    z-index:11;
    .warning-bar-inner{
        @include flex(center,center);
    }

    .no-drink{
        margin-right: 55px;
    }
    .no-drive{
        margin-left: 55px;
    }
    .bar-mid{
        text-align: center;
    }

    .center-wrap{
        display: inline-block;
        text-align: center;
    }

    @include pc-lg {
        font-size: 26px;
        .no-drink{
            margin-right: 35px;
        }
        .no-drive{
            margin-left: 35px;
        }
    }

    @include pc {
        font-size: 22px;
        .no-drink{
            margin-right: 25px;
        }
        .no-drive{
            margin-left: 25px;
        }
    }

    @include tablet{
        font-size: 18px;
        .no-drink{
            margin-right: 10px;
            max-width: 30px;
        }
        .no-drive{
            margin-left: 10px;
            max-width: 30px;
        }
    }

    @include media($breakpoint-pc-hover-to-mobile-active) {
        font-size: 16px;
        &:active{
            background: darken(#8a1e28, 5%);
        }
    }
}
// warnning-bar /


// checkout-result-info-table
.checkout-result-info-table{
    text-align:left;
    tr{
    }
    td, th{
        padding: .3em .5em;
    }
}
// checkout-result-info-table /


// embed-box
.embed-box{

    .embed-responsive{
        position: relative;
        display: block;
        width: 100%;
        padding: 0;
        overflow: hidden;

        &:before{
            display: block;
            content: "";
            // background: #dedede;
            background: url(/assets/images-m/icon/video_player.svg), rgba(0,0,0,.12);
            animation: AnimationName 2s ease infinite reverse;
            animation-delay: -1s;
            background-repeat: no-repeat;
            background-position: center;
            background-size: 60px;
        }

        &:after{
            // loading 的燈光
            content:'';
            display: block;
            @include absolute(0,0,0,0);
            z-index: 1;
            animation: loading-light 1.5s infinite;
            background: linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));
            transform: translateX(-100%);
        }
        

        @include keyframes(AnimationName) { 
            0%{background-position: center center, 0% 92%}
            100%{background-position: center center, 100% 9%}
        }

        @include keyframes(loading-light) {
            to {
                transform: translateX(100%)
            }
        }

        iframe{
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            width: 100%;
            height: 100%;
            border: 0;
            z-index: 2;
        }
    }

     .youtube{
        z-index: 3;
        @include absolute(0,0,0,0);
        &.hover{
            cursor: pointer;

            &:hover{
                .fa-youtube-play{
                    color: #ff0000;
                }
            }
        }

        &.hidden{
            img, .fa-youtube-play {
                opacity:0;
            }
        }

        &.iframe-hidden {
            iframe{
                opacity:0;
                transition: .5s;
            }
        }

        .fa-youtube-play{
            pointer-events:none;
            width:100%; height:50px;
            position: absolute;
            z-index: 2;
            top: 50%;
            right: 0;
            left: 0;
            bottom: 0;
            transform: translateY(-50%);
            margin: 0;
            font-size: 70px;
            color: rgba(0,0,0, 0.7);
            text-align:center;
            transition: .5s;
            &:after{
                content:'';
                display: block;
                // background: #fff;
                @include caret('right', 20px, 20px, #fff);
                // width: 20px;
                // height: 20px;
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translateY(-50%) translateX(-50%) translateX(2px) translateY(1px);
            }
            &:before{
                transform: translateY(-12.1%);
                display: inline-block;
                position: relative;
                z-index:1;
            }
        }


        img {
            width: 100%;
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            transition: .5s;
        }

        @include tablet{
            .fa-youtube-play{
                font-size: 60px;
                &:before{
                    transform: translateY(-7.2%);
                }
            }
        }
    }

    
    .embed-responsive-16by9{
        &:before{
            padding-top: 56.25%;
        }
    }
}

// embed-box /

// embed-responsive
.embed-responsive{
    img.embed-responsive-item{
        width: auto;
        height: auto;
        max-width: 100%;
        max-height: 100%;
        margin: auto;
        right: 0;
    }
    &.embed-responsive-768by768{
        &:before{
            padding-top: 100%;
        }
    }
}
// embed-responsive /


// flat-product-box
.flat-product-box{
    text-align: center;
    display: block;
    margin-bottom: 30px;

    &:hover{
        .box-des{
            color: $color-primary;
        }
    }

    &.is-sold-out{
        .box-media{
            &:after{
                content: var(--text-sold-out);
                width: 100%;
                height: 60px;
                @include absolute(0,0,0,0);
                margin: auto;
                @include flex(center,center);
                font-size: 1rem;
                text-align: center;
                line-height: 60px;
                border-radius: 50%;
                color: #fff;
                background: rgba($color-primary ,0.8);
                z-index: 2;
                box-shadow: 0 0 0 215px rgba(0,0,0,0.1);
                transition: .3s;
                border-radius: 0%;
                opacity: 1;
            }

            @include mobile-lg{
                &:after{
                    height: 40px;
                }
            }
        }
    }

    .box-media{
        padding-top: calc(400 / 270 * 100%);
        position: relative;
        margin-bottom: 15px;
        overflow: hidden;
        img {
            @include absolute(0,0,0,0);
            margin:auto;
            max-height: 100%;
        }
    }
    .box-des{
        font-size: 12px;
        margin-bottom: 5px;
        @include text-lines-ellipsis(1.2em, 4);
        color: $color-font-gray;
        font-family: $ff-msjh;
    }
    .box-btn{
        min-width: 105px;
        min-height: 35px;
    }
}
// flat-product-box /


// v-icon-title
.v-icon-title{
    font-size: 18px;
    text-align: center;
    .title-txt{
        letter-spacing: 1px;
        font-size: 1em;
        &:first-letter{
            font-size: 1.37em;
        }
    }

    .link{
        font-size: 12px;
        display: inline-block;
        color:$color-font-gray;
        transition: .3s;
        &:first-letter{
            font-size: 1.33em;
        }

        &:hover{
            color: $color-primary;
            letter-spacing: 1px;
        }
    }

    .icon{
        display: block;
        margin: auto;
    }
}
// v-icon-title /

// mid-page-banner-block
.mid-page-banner-block{
    position: relative;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    &.sty-attachment{
        background-attachment: fixed;
    }

    .block-inner{
    }
}
// mid-page-banner-block /

// bookmark-box
.bookmark-box-block-custom{

    .row{
        justify-content: center;
    }

    &.break-992{

        .bookmark-box{
            @include pc {
                font-size: 24px;

                .box-main{
                    padding: 0.7em;
                }
                .box-des{
                    margin-top: 40px;
                    margin-bottom: 40px;
                }
            }

            @include pc{
                font-size: 20px;
                display: flex;

                .box-media{
                    width: 40%;
                    flex-shrink: 0;
                    margin: 0.5em;
                    margin-right: 0;
                }

                .box-main{
                    flex-grow: 1;
                    padding: 0.5em 1em;
                }

                .box-des{
                    margin-top: 10px;
                    margin-bottom: 10px;
                    @include text-lines-ellipsis(1.3em, 5);
                }
            }

            @include tablet{
                .box-des{
                    margin-top: 5px;
                    margin-bottom: 5px;
                    @include text-lines-ellipsis(1.3em, 3);
                }
            }

            @include mobile-lg{
                display: block;

                .box-media{
                    margin: 0;
                    width: 100%;
                }

                .box-main{
                    padding: 1em;
                }

                .box-des{
                    height: auto;
                    max-height: none;
                    display: block;
                    margin: 10px 0;
                }
            }
        }

    }
}

.bookmark-box{
    text-align: center;
    background:#fff;
    font-size: 30px;
    margin-bottom: 1em;
    position: relative;
    .box-media{
        position: relative;
        &:before{
            content:'';
            padding-top: calc(200 / 270 * 100%);
            display: block;
        }
        img{
            @include absolute(0,0,0,0);
            max-height:100%;
            margin:auto;
        }
    }

    .box-main{
        padding: 1em;
    }

    .box-title{
        font-size: 1em;
        min-height: 1.2em;
    }

    .box-des{
        font-size: 14px;
        margin-top: 60px;
        margin-bottom: 50px;
        min-height: 1.2em;
    }

    .box-btn{
        width: 100%;
        font-size: 17px;
        border-radius: 0;
        &:hover{
            color: $color-primary;
            background: none;
            border-color: $color-primary;
        }
    }

    .first-letter-hilight{
        display: inline-block;
    }
}
// bookmark-box /

// article-preivew-box
.article-preivew-box-block{

    &.sty-stacked-line{
        .article-preivew-box{
            + .article-preivew-box{
                border-top: 1px solid #636363;
                padding-top: 25px;
                margin-top: 25px;
            }
        }
    }

    @include pc{
        .article-preivew-box{
            font-size: 24px;
        }
    }

    @include tablet{
        .article-preivew-box{
            font-size: 20px;
        }
    }

    @include mobile-xl{
        .article-preivew-box{
            font-size: 18px;

            .box-toolbar{
                &.up-info{
                    margin-bottom: 5px;
                }
            }

            .box-des{
                margin-bottom: 5px;
            }
        }
    }

    @include mobile-lg{
        .article-preivew-box{
            font-size: 16px;

            .box-media{
                width: 40%;
                &:after{
                    width: 50px;
                    height: 50px;
                    line-height: 50px;
                }
            }

            .box-toolbar{
                &.up-info{
                    font-size: 14px;
                }
            }
        }
    }

}

.article-preivew-box{
    @include flex(center,flex-start);
    font-size: 30px;
    line-height: 1.2;

    &:hover{
        .box-media{
            &:after, &:before{
                opacity: 1;
            }
        }

        .box-title{
        }
    }

    .box-media{
        flex-shrink: 0;
        width: 48%;
        min-width: 120px;
        margin-right: 1em;
        position: relative;
        &:before{
            content:'';
            display: block;
            padding-top: calc( 460 / 700 * 100%);
            background: rgba(0,0,0,0.3);
            position: relative;
            z-index:1;
            opacity:0;

            transition: all .3s ease;
        }
        &:after{
            content:'View';
            display: block;
            width: 60px;
            height: 60px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            border-radius: 50%;
            font-size: 1rem;
            line-height: 60px;
            text-align: center;
            color: #fff;
            background-color: rgba(186,151,54,0.8);
            z-index: 2;
            opacity: 0;

            transition: all .3s ease;
        }

        img{
            @include absolute(0,0,0,0);
            max-height: 100%;
            margin:auto;
        }
    }

    .box-main{
        flex-grow: 1;
    }

    .box-title{
        font-weight: bold;
        font-size: 1em;
        transition: .3s;
    }

    .box-des{
        font-size: 0.8em;
        margin-bottom: 10px;
    }
    
    .box-toolbar{
        &.up-info{
            margin-bottom: 10px;
            font-size: 16px;
        }
    }

    .box-infobar{
        font-size: 16px;
    }

    // 其他
    .tag{
        color: $color-blue;
    }
    .inf-txt{
        color: $color-font-gray;
    }

    .edit-info{
        font-size: 12px;
    }
    // 其他 /
}

// article-preivew-box /

// knowledge-box
@mixin knowledge-box-hori-mobile{
    .knowledge-box{
        display: flex;
        .box-media{
            width: 125px;
            flex-shrink: 0;
        }
        .box-main{
            flex-grow: 1;
            padding: 10px;
        }
        .box-des{
            height: 3.9em;
            .inner{
                @include text-lines-ellipsis(1.3em, 3);
                height: auto;

            }
        }
    }
}

.knowledge-box-block{

    @include media(1300){
        .knowledge-box{
            font-size: 24px;

            .box-des{
                font-size: 18px;
            }
        }
    }

    @include tablet{
        .knowledge-box{
            font-size: 22px;

            .box-des{
                font-size: 16px;
            }
        }
    }

    @include mobile-xl{
        @include knowledge-box-hori-mobile;
        .knowledge-box{
            font-size: 18px;
            .box-main{
                font-size: 16px;
            }
            .box-link{
                font-size: 16px;
            }
        }
    }
}

.knowledge-box-custom-block {

    &[data-items="5"] {
        .col-item{
            max-width: 20%;
        }
    }

    &[data-items="4"] {
        max-width: 25%;
    }

    .col-item{
        flex-grow: 1;
        padding-left: 15px;
        padding-right: 15px;
    }

    .knowledge-box{
        font-size: 22px;
    }

    .box-des{
        font-size: 16px;
    }


    &.break-1200{
        @include media(1200) {
            .col-item{
                max-width: 50%;
                width: 50%;
            }
            @include knowledge-box-hori-mobile();
        }

        @include pc{
            .knowledge-box{
                font-size: 20px;
            }
        }

        @include tablet{
            .col-item{
                max-width: 100%;
                width: 100%;
            }
        }

        @include mobile-xl{
            .knowledge-box{
                font-size: 18px;
                .box-main{
                    font-size: 16px;
                }
                .box-link{
                    font-size: 16px;
                }
            }
        }
    }
}

.knowledge-box{
    display: block;
   
    font-size: 28px;
    margin-bottom: 1em;
    text-align: center;
    font-family: 'Noto Serif TC',Serif, "cwTeXMing";
height: auto;
  padding-bottom: 20px;
    &:hover{
        .box-main{
            background: rgba($color-primary, .2);
        }

        img {
            transform: scale(1.05);
        }
    }

    .box-media{
        position: relative;
        overflow: hidden;
        &:before{
            content:'';
            display: block;
            padding-top: 20px;
        }
        img{
            @include absolute(0,0,0,0);
            max-height: 100%;
            margin: auto;
            backface-visibility: hidden;
            transition: .3s;
width: 100%;
        }
    }

    .box-main{
        padding-top: 18px;
padding-bottom: 18px;
        transition: .3s;
    }

    .box-title{
       color: #D3B799;
font-size: 18px;
  text-align: left;
    }

   /* .box-des{
        font-size: 15px;
        color: #FFF;
max-height: 125px;
    overflow: hidden;
        height: AUTO;
        margin-bottom: 5px;
        @include flex(center,center);
        .inner{
            @include text-lines-ellipsis(1.3em, 5);
            height: auto;
max-height: 125px;
      overflow: hidden;
text-align: left;
        }
    }*/
    .box-des {
    font-size: 15px;
    color: #2f402c;
    max-height: 125px;
    overflow: hidden;
    height: 125px;
    margin-bottom: 5px;

}






 .box-des .inner {        
        height:125px;
        max-height: 125px;
        overflow: hidden;
        text-align: left;
    }
    .box-link{
        color: #ba932f;
        font-size: 18px;
padding-top: 18px;
        a, .indicator{
            text-decoration: underline;
           
        }
    }
}
// knowledge-box /


// double-vline-title
.double-vline-title{
    border-top:1px solid $color-font;
    border-bottom: 1px solid $color-font;
    padding: 5px;
    font-size: 30px;
    text-align: center;
    margin-bottom: 15px;
}
// double-vline-title /

// range-toolbox
.en .range-toolbox{
    .en-w-38px{
        width: 38px;
    }
}
.range-toolbox{
    margin-bottom: 20px;

    .box-title{
        font-weight: bold;
        margin-bottom: 20px;
    }

    .range-item{
        display: flex;
        align-items: center;
        margin-bottom: 5px;
        .item-prefix{
            margin-right: 25px;
            flex-shrink: 0;
        }

        .item-postfix{
            margin-left: 15px;
            flex-shrink: 0;
            color: $color-font-gray;
        }
    }

    .box-btn{
        border-radius: 0;
        min-width: 61px;
        height: 44px;
    }

    // 其他
    .form-group{
        margin-bottom: 0;
    }

    .input-group{
        input, select{
            border-radius: 0;
        }
    }
    // 其他 /

}
// range-toolbox /


// regions-table
.regions-table{
    border-bottom:0;

    &.break-1200{
        @include media(1200) {
            .cell-inner{
                width: 50%;
            }

        }
    }

    .cell-inner{
        border-right: 1px solid $color-border;
        border-bottom: 1px solid $color-border;
    }
    .table{
        width: 100%;
        border-top: 1px solid $color-border;
        border-left: 1px solid $color-border;
    }
    .table-row{
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }
    .cell-inner{
        display: flex;
        padding: 13px 16px;
        width: 25%;
        &:hover{
            color: $color-primary;
            .info{
                color: inherit;
            }
        }
    }

    .table-footbar{
        margin-top: 13px;
        text-align: right;
    }

    // 其他
    .name{
        padding-right: 5px;
        margin-right: auto;
    }
    .info{
        color: $color-font-gray;
    }

    .table-show-more-link{
        color: $color-font-gray;
        display: inline-block;
        font-size: 12px;    
        transition: .3s;

        &:hover{
            color: $color-primary;
        }
    }
    // 其他 /

    @include pc{
        .cell-inner{
            padding: 10px 12px;
        }
    }

    @include mobile-lg{
        .cell-inner{
            flex-direction: column;
            .name{
                margin-bottom: 5px;
            }
        }
    }
}
// regions-table /


// article-view-block
.article-header{
    margin-bottom: 40px;
}

.article-view-block{
    background: #e0e0e0;
    padding: 100px 85px;
    line-height: 2;
    margin-bottom: 30px;

    @include pc{
        padding: 80px 65px
    }

    @include tablet{ 
        padding: 60px 45px;
    }

    @include mobile-xl{
        padding: 40px 25px;
    }

    @include mobile{
        padding: 40px 15px;
    }
}

.article-section-title{
    font-size: 26px;

    @include tablet{
        font-size: 22px;
    }

    @include mobile-xl{
        font-size: 20px;
    }
}
.article-section-content{
    font-size: 18px;
    color:$color-font-gray;
}

.article-content-constrain-900px{
    width: 900px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto; 
}
// article-view-block /


// divider-line-table
.divider-line-table{
    font-size: 18px;
    table{
        width: 100%;
    }
    tr {
        border-top :1px solid $color-font;
    }
    th, td{
        padding: 5px;
    }
    .table-title{
        font-size: 25px;
        margin-bottom: 7px;
        font-weight: bold;

        display: flex;
        align-items:center;

        transition: .3s;

        .plus-minus-ani-btn{
            width: .8em;
            height: .8em;
            margin-left: 5px;
        }

        &:hover{
            color: $color-primary;
            .plus-minus-ani-btn{
                &:before, &:after{
                    background: currentColor;
                }
            }
        }

        &:not(.collapsed) {
            .plus-minus-ani-btn{
                &:before{ transform: rotate(90deg); }
                &:after{ transform: rotate(180deg); }
            }
        }
    }
}
// divider-line-table /

// fake-icon-bar
.fake-icon-bar{
    height: 40px;
    @include flex(center,center);
    padding: 10px;
    background: $color-opacity-primary;
    font-size: 18px;
    margin-bottom: 1.5em;
    cursor: pointer;

    .bar-title{
        font-size: 1em;
        margin: 0 1em;
    }
}
// fake-icon-bar /

// global-backdrop
.global-backdrop{
    display: block;
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background: $color-bg-backdrop;
    width: 100vw;
    z-index: 200;
    transition: .3s;

    opacity:0;
    visibility:hidden;

    &.is-open{
        opacity:1;
        visibility:visible;
    }
}
// global-backdrop /

// ani-bean
.ani-bean{
    position: relative;
    overflow: hidden;
    &:after{
        content: "";
        position: absolute;
        background-color: rgba(255,255,255,0.5);
    }

    &.ani-to-top{
        &:after{
            margin-right: -1px;
            bottom: 0;
            right: 1px;
            width: 2px;
            height: 1.87em;
            animation: ani-bean-to-top infinite 3.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
    }

    &.ani-to-right{
        &:after{
            margin-top: -1px;
            left: 0;
            top: 0;
            height: 2px;
            width: 1.87rem;
            animation: ani-bean-to-right infinite 3.6s cubic-bezier(0.77, 0, 0.175, 1);
        }
    }



    @include keyframes(ani-bean-to-top) {
        0% {
            transform: translateY(100%); 
            bottom: 0;
        }
        30% {
            transform: translateY(-101%); 
            bottom: 100%;
        }
        100% {
            transform: translateY(-101%);
            bottom: 100%
        }
    }

    @include keyframes(ani-bean-to-right) {
        0% {
            transform: translateX(-101%); 
            left: 0;
        }
        30% {
            transform: translateX(1001%); 
            left: 100%;
        }
        100% {
            transform: translateX(101%);
            left: 100%;
        }
    }
}

// .hover-ani-bean
.hover-ani-bean{
    position: relative;
    overflow: hidden;
    &:after{
        content: "";
        position: absolute;
        margin-top: -1px;
        right: 0;
        bottom: 0;
        height: 2px;
        width: 1.87rem;
    }
    
    &:hover{
        &:after{
            background-color: $color-primary;
            animation: hover-ani-bean-to-right 1 3.6s cubic-bezier(0.77, 0, 0.175, 1);
            animation-delay: -0.5s;
        }
    }

    @include keyframes(hover-ani-bean-to-right) {
        0% {
            transform: translateX(-70vw); }
        30% {
            transform: translateX(101%); }
        100% {
            transform: translateX(101%);
        }
    }
}
// .hover-ani-bean /

// ani-bean /

.drop-wave-ani{
    position: relative;
    .drop {
        position: absolute;
        width: 20px;
        height: 20px;
        top: -30px;
        margin: 0 auto;
        background: #FFF;
        -moz-border-radius: 20px;
        -webkit-border-radius: 20px;
        border-radius: 20px;
        -moz-animation-name: drip;
        -webkit-animation-name: drip;
        animation-name: drip;
        -moz-animation-timing-function: cubic-bezier(1,0,.91,.19);
        -webkit-animation-timing-function: cubic-bezier(1,0,.91,.19);
        animation-timing-function: cubic-bezier(1,0,.91,.19);
        -moz-animation-duration: 2s;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        &:before {
            content: "";
            position: absolute;
            width: 0;
            height: 0;
            border-left: 10px solid transparent;
            border-right: 10px solid transparent;
            border-bottom: 30px solid rgba(255,255,255,1);
            top: -22px;
        }
    }
    
    .wave {
        position: absolute;
        opacity: 0;
        top: 0;
        width: 2px;
        height: 1px;
        border: #FFF 7px solid;
        -moz-border-radius: 300px / 150px;
        -webkit-border-radius: 300px / 150px;
        border-radius: 300px / 150px;
        -moz-animation-name: ripple;
        -webkit-animation-name: ripple;
        animation-name: ripple;
        -moz-animation-delay: 2s;
        -webkit-animation-delay: 2s;
        animation-delay: 2s;
        -moz-animation-duratioadd-cartn: 2s;
        -webkit-animation-duration: 2s;
        animation-duration: 2s;
        -moz-animation-iteration-count: infinite;
        -webkit-animation-iteration-count: infinite;
        animation-iteration-count: infinite;
        &:after {
        content: "";
            position: absolute;
            opacity: 0;
            top: -5px;
            left: -5px;
                width: 2px;
                height: 1px;
            border: #FFF 5px solid;
                -moz-border-radius: 300px / 150px;
                -webkit-border-radius: 300px / 150px;
                border-radius: 300px / 150px;
            -moz-animation-name: ripple-2;
            -webkit-animation-name: ripple-2;
            animation-name: ripple-2;
            -moz-animation-duration: 2s;
            -webkit-animation-duration: 2s;
            animation-duration: 2s;
            -moz-animation-iteration-count: infinite;
            -webkit-animation-iteration-count: infinite;
            animation-iteration-count: infinite;
        }
    }
    
    
    @keyframes ripple {
        from {
            opacity: 1;
        }
        to {
            width: 600px;
            height: 300px;
            border-width: 1px;
            top: -100px;
            opacity: 0;
        }
    }
    
    @keyframes ripple-2 {
        0% {
          opacity: 1;
        }
        50% {
          opacity: 0;
        }
      100% {
        width: 200px;
        height: 100px;
        border-width: 1px;
        top: 100px;
        left: 200px;
      }
    }
    
    @keyframes drip {
        to {
            top: 190px;
        }
    }

}


// agent-preview-card
.agent-preview-card-block{
    .agent-preview-card{
        margin-bottom: 42px;
        @include mobile-xl{
            margin-bottom: 40px;
        }
        @include mobile-lg{
            margin-bottom: 30px;
        }
    }

}
.agent-preview-card{
    display: block;
    margin-bottom: 30px;
    &:hover{
        .card-media{
            &:after{
                opacity:1;
            }
            &:before{
                opacity: 0.7;
            }
        }
    }

    .card-media{
        position:relative;
        // margin-bottom: 30px;
        overflow: hidden;
        background-position: center;
        

        &:before{
            content:'';
            display: block;
            padding-top: calc(350 / 325 * 100%);
            background: $color-bg-gray;
            opacity: 0;
        }

        &:after{
            content: 'VIEW';
            width: 60px;
            height: 60px;
            @include absolute(0,0,0,0);
            margin: auto;
            @include flex(center,center);
            font-size: 1rem;
            text-align: center;
            line-height: 60px;
            border-radius: 50%;
            color: #fff;
            background: rgba($color-primary ,0.8);
            z-index: 2;
            box-shadow: 0 0 0 155px rgba(0,0,0,0.1);

            opacity: 0;
            transition: .3s;
        }

        img {
            @include absolute(0,0,0,0);
            max-height: 100%;
        }
    }

    .card-title{
        margin: 0;
        font-size: 24px;
        padding: 25px 10px;
        text-align: center;
        border: 1px solid #eaeaea;
        .inner{
            @include text-lines-ellipsis(1.2em, 2);
        }
    }

    @include pc-xl{
        .card-title{
            font-size: 20px;
        }
    }

    @include tablet{
        .card-title{
            padding: 15px 10px;
        }
    }

    @include mobile-xl{
        .card-title{
            font-size: 18px;
        }
    }

    @include mobile-lg{
        .card-title{
            font-size: 16px;
            padding: 10px 5px;
        }

    }

}
// agent-preview-card /

// grow-line-arrow
.grow-line-arrow {
    cursor: pointer;
    width: 20px;
    height: 35px;
    transition: transform .1s;
    position: relative;
    $transition-time: .15s;

    &.size-xl{
        height: 77px;
        width: 50px;
    }

    .arrow{
        &-top,
        &-bottom {
            background-color: #666;
            height: 4px;
            left: -5px;
            position: absolute;
            top: 50%;
            width: 100%;
    
            &:after {
                background-color: $color-primary;
                content: '';
                height: 100%;
                position: absolute;
                top: 0;
                transition: all $transition-time;
            }
        }
    
        &-top {
            transform: rotate(45deg);
            transform-origin: bottom right;
    
            &:after {
                left: 100%;
                right: 0;
                transition-delay: 0s;
            }
        }
    
        &-bottom {
            transform: rotate(-45deg);
            transform-origin: top right;
    
            &:after {
                left: 0;
                right: 100%;
                transition-delay: $transition-time;
            }
        }
    }

    &.left{
        .arrow-top{
            transform: rotate(135deg) translateY(4px);
        }
        .arrow-bottom{
            transform: rotate(-135deg) translateY(-4px);
        }
    }

    &:hover .arrow {
        &-top:after {
            left: 0;
            transition-delay: $transition-time;
        }

        &-bottom:after {
            right: 0;
            transition-delay: 0s;
        }
    }

    &:active {
        transform: translateX(-50%) translateY(-50%) scale(0.9);
    }

}
// grow-line-arrow  /

// included-block
.included-block{
}
// included-block /


// contact-block
.contact-block{
    .sect-btn.mobile{
        display: none;
    }

    .contact-grape{
        margin-bottom: 60px;
    }

    .title{
        margin-top: 50px;
    }

    .title-des{
        text-align: center;
        line-height: 1.5;
        color: $color-primary;
    }

    .social-link-grape{
        margin-top: 30px;
        margin-bottom: 75px;
    }

    .contact-form-block{
        .col-left{
            padding-right: 39px;
        }
        .col-right{
            padding-left:39px;
        }
        .map-box{
            width:545px;
            height: 425px;
            max-width: 100%;
        }
        .col-custom-control{
            padding-left: 15px;
        }
        .btn-send{
            width: 195px;
            min-height: 45px;
        }

        .captcha {
            .col-content{
                max-width: 65%;
            }
        }

    }

    @include media(1400) {
        .tw & {
            @include form-group-horizontal-title(70px)
        }
        .contact-form-block {
            .col-left{
                padding-right: 15px;
            }
            .col-right{
                padding-left: 15px;
            }
        }
    }


    @include pc{
        .contact-grape{
            margin-bottom: 0;
            flex-direction: column;
            .col-item{
                margin-bottom: 1em;
                max-width: 100%;
                flex-basis: 100%;
            }
        }

        .social-link-grape{
            margin-bottom: 40px;
        }

        .contact-form-block{
            flex-wrap: wrap;
            .map-box{
                margin:auto;
                width: 100%;
            }
            .col-left{
                flex-basis:100%;
                max-width: 100%;
                padding-right:15px;
                margin-bottom: 5em;
            }
            .col-right{
                flex-basis:100%;
                max-width: 100%;
                padding-left:15px;
            }

            .btn-form-group{
                display: none;
            }  

            .sect-btn.mobile{
                display: flex;
                margin-top: 4em;
            }

        }
    }

    @include mobile-lg{
        
    }

    @include mobile-lg{
        @include form-group-horizontal-mobile;
        .contact-form-block .captcha .col-content{
            max-width: 100%;
        }
    }
}
// contact-block /

// plus-minus-ani-btn
.plus-minus-ani-btn{
    position: relative;
    width: 30px;
    height: 30px;
    display: inline-block;

    &:before,
    &:after{
        content: "";
        position: absolute;
        background-color: $color-font;
        transition: transform 0.25s ease-out, background .3s;
    }

    /* Vertical line */
    &:before{
        top: 0;
        left: 50%;
        width: 2px;
        height: 100%;
        margin-left: -1px;
    }

    /* horizontal line */
    &:after{
        top: 50%;
        left: 0;
        width: 100%;
        height: 2px;
        margin-top: -1px;
    }
    
    &.is-minus{
        cursor: pointer;
        
        &:before{ transform: rotate(90deg); }
        &:after{ transform: rotate(180deg); }
    }
}
//plus-minus-ani-btn /


// img-bg-box
.img-bg-box-block{
    padding-left: 10px;
    padding-right: 10px;
    
    .row{
        > [class*="col-"] {
            padding-left: 10px;
            padding-right: 10px;
        }
    }

    .img-bg-box{
        margin-bottom: 20px;
    }


    @include pc-lg{
        .img-bg-box{
            font-size: 28px;
        }
    }

    @include pc{
        .img-bg-box{
            font-size: 26px;
        }
    }

    @include tablet{
        .img-bg-box{
            font-size: 24px;
            margin-bottom: 15px;
        }

        padding-left: 7.5px;
        padding-right: 7.5px;

        .row{
            > [class*="col-"] {
                padding-left: 7.5px;
                padding-right: 7.5px;
            }
        }
    }

    @include mobile-xl{
        .row{
            > [class*="col-"] {
                max-width: 100%;
                flex-basis: 100%;
            }
        }

        .img-bg-box{
            font-size: 22px;
            &:before{
                padding-top: calc(9 / 16 * 100%);
            }
        }
    }
}

.img-bg-box{
    display: block;
    position: relative;
    background: #b99d76;
    font-family: $ff-msjh;
    overflow: hidden;
    font-size: 32px;
    &:hover{
        .box-img{
            transform: scale(1.05);
        }
    }

    &:before{
        content:'';
        display: block;
        padding-top: 100%;
    }

    &:after{
        content: '';
        display: block;
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: linear-gradient( 180deg , rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.2), rgba(0, 0, 0, .05));
    }

    &.size-16by9{
        &:before{
            padding-top: calc(9 / 16 * 100%);
        }
    }

    .box-img{
        @include absolute(-0.5px,-0.5px,-0.5px,-0.5px);
        background-size:cover;
        background-position: center;
        transition: 2s ease-in-out;
        backface-visibility: hidden
    }
    .box-content{
        @include absolute(0,0,0,0);
        @include flex(center,center);
        text-align: center;
        z-index:1;
    }

    .box-content-inner{
        max-width: calc(100% - 20px);
    }

    .box-title{
        font-size: 1em;
        margin-bottom: 0.8em;
        color: #fff;
        font-weight: lighter;
    }
    
    .btn{
        border-radius: 0;
        width: 170px;
        max-width: 100%;
    }
}
// img-bg-box /


// page-connected-des-area
.page-connected-des-area{
    padding: 80px 60px;
    background: $color-primary;
    color:#fff;
    width: 840px;
    max-width: 100%;
    margin-left:auto;
    margin-right:auto;

    &.sty-fluid{
        width: 100%;
        padding: 30px;
    }

    &.sty-black{
        background: #121617;
        color: #978148;
        margin-bottom: 3px;
    }

    .demo-title-35px{
        font-size: 35px;
        margin: 0;
        margin-bottom: 10px;
        margin-left: 35px;
    }

    .demo-title-theme-like{
        padding-left: 17.5px;
        position:relative;
        &:before{
            content:'';
            display: block;
            width: 2px;
            background: #978148;
            position: absolute;
            left: 0;
            top: 0.2em;
            bottom: 0.2em;
        }
    }

    .divider-line{
        background: #978148;
    }

    .area-content-wrap{
        display: inline-block;
    }

    .area-sub-des{
        padding-top: 15px;
        padding-left: 53px;
        letter-spacing: 0.2em;
    }

    @include pc-lg{
        .demo-title-35px{
            font-size: 30px;
        }
    }

    @include pc{
        .demo-title-35px{
            font-size: 27px;
            margin-left: 25px;
        }
        .area-sub-des{
            padding-left: 43px;
        }
    }

    @include tablet{
        &:not(.sty-fluid){
            padding: 50px 30px;
        }
        .demo-title-35px{
            font-size: 24px;
            margin-left: 15px;
        }
        .area-sub-des{
            padding-left: 33px;
        }
    }

    @include mobile-xl{
        .demo-title-35px{
            font-size: 22px;
        }
    }

    @include mobile-lg{
        &.sty-fluid{
            padding: 20px;
        }
        .demo-title-35px{
            font-size: 20px;
        }
    }

    @include media(374.98){
        .area-sub-des{
            padding-left: 0;
        }
    }
}
// page-connected-des-area /

// transit-img-box
.transit-img-box-block{
    .transit-img-box{
        border-right: 1px solid #fff;
        border-top: 1px solid #fff;
    }

    &.break-default{
        @include tablet{
            .transit-img-box{
                font-size: 20px;
            }
        }
    }
}
.transit-img-box{
    display: block;
    color:#fff;
    font-size: 22px;
    background: $color-gray-light;
    &:hover{
        .box-media-item.after{
            opacity:1;
        }
        .box-foot{
            background: #b6ae9b;
        }
    }

    .box-media{
        position:relative;
        overflow:hidden;
        padding-top: 3px;

        &:before{
            content:'';
            display: block;
            @include loading-light;
        }
    }

    .box-media-item{
        @include absolute(0,0,0,0);
        background-size: cover;
        background-position: center;
        transition: .3s;
        z-index: 1;
        &.after{
            opacity: 0;
        }
    }

    .box-foot{

        padding: 30px 10px;
        color:#fff;
        text-align: center;
height: 190px;
        transition: .3s;
    }

    .box-title{
        font-size: 0.6em;
        @include text-ellipsis;
    }

    .box-subtitle{
        font-size: 10px;
        @include text-ellipsis;
    }
}
// transit-img-box /


// prompt-box
.prompt-box{
    display: flex;
    align-items: center;

    .box-icon{
        font-size: 30px;
        margin-right: 15px;
        color:$color-danger;
    }
}
// prompt-box /


// padding 監控
.modal-open, .swal2-shown, .viewer-open {
    .js-layout-pd-monit{
        padding-right: var(--scrollbar-width);
    }
}
// padding 監控 /


// language 
body:not(.tw) .tw-show{
    display:none!important;
}
body:not(.en) .en-show{
    display:none!important;
}
// language /



// date-inf-header
.date-inf-header{
    color: $color-font;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 2px solid $color-font;
    margin-bottom: 15px;
    padding-bottom: 4px;
}
// date-inf-header /



// ank-card
.ank-swiper{
    margin-bottom: 20px;
    .swiper-button-prev , .swiper-button-next{
        top: 40%;
    }

    .custom-swiper-pagination{
        text-align: center;
        padding-top: 1.5rem;
    }

    .swiper-pagination-bullet{
        width: 10px;
        height: 10px;
        background: $color-primary;
    }
    @include tablet{
        .swiper-button-prev , .swiper-button-next{
            top: 32%;
        }
    }
    @include media(499.98){
        .swiper-button-prev , .swiper-button-next{
            top: 40%;
        }
    }
}
.ank-card{
    display: block;
    position: relative;
    box-shadow: 0 3px 5px rgba(0, 0, 0, .2);
    overflow: hidden;
    border-radius: 15px;
    
    .is-ready & {
        transition: .3s;

        .card-media{
            &:before{
                transition: all .3s ease;
            }
        }

        .card-title{
            transition: .3s;
        }
    }

    body:not(.is-mobile-size) &:hover{
        transform: translateY(-10px);
        .card-title{
            color: $color-primary;
        }
        .card-media{
            img {
            }
        }
    }

    .card-media{
        position: relative;
        background: #dedede;
        &:before{
            content: '';
            display: block;
            padding-top: calc( 460 / 700 * 100%);
            background: rgba(0,0,0,0.3);
            position: relative;
            z-index: 1;
            opacity: 0;
        }
        img{
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translateX(-50%) translateY(-50%);
            max-height: 100%;
            margin: auto;
        }
    }

    .card-main{
        padding: 10px;
    }

    .card-title{
        font-size: 18px;
        font-weight: bold;
        margin-bottom: 5px;
        margin-top: 5px;
        font-family: $ff-msjh;
        @include text-lines-ellipsis(1.3em, 2);
        width: 100%;
    }

    .card-des{
        font-family: $ff-msjh;
        @include text-lines-ellipsis(1.3em, 3);
        width:100%;
    }

    .card-tag-grape{

    }

    .card-inf-bar{
        &.sty-2side{
            display: flex;
            justify-content: space-between;

            .card-tag-grape{
            }
        }
    }

    .card-tag{
        display: inline-block;
        margin-right: 3px;
        margin-bottom: 5px;
        color: #10477f;
        font-size: 14px;
    }

    // 其他
    .inf-txt{
        font-size: 14px;
        color: #7d7d7d;
    }
}
// ank-card /

// ank-calendar-block
.ank-calendar-block{
    > .row{
        flex-wrap: nowrap;
    }
    .block-side{
        width: 29%;
        min-width: 350px;
        flex-shrink: 0;
        padding: 0 15px;
    }
    .block-main{
        flex-grow: 1;
        min-width: 0;
        padding: 0 15px;
    }

    .inf-txt{
        
    }

    .card-inf-bar{
        &.mobile{
            display:none;
        }
    }

    &.break-default{
        @include media(1200) {
            > .row{
                flex-wrap: wrap;
            }
            .block-side{
                min-width: unset;
                width: 100%;
                width: 440px;
                margin: auto;
                max-width: 100%;
                margin-bottom: 40px;
            }
            .block-main{
                width:100%;
            }
        }

        @include media(768) {
            .card-des{
                position: relative;
                margin-bottom: 8px;
            }

            .inf-txt{
                &.pc{
                    display: none;
                }
            }

            .card-title{
                margin: 0;
            }

            .card-inf-bar{
                position: relative;
                &.mobile{
                    display:block;
                    padding-top: 5px;
                    &:after{
                        content:'';
                        display: block;
                        position: absolute;
                        top: -7px;
                        left: 0;
                        right: 0;
                        background: #dedede;
                        height: 1px;
                    }

                }
            }
        }
    }
}
// ank-calendar-block /

// data-table-limit-tr
[data-table-limit-tr]{
    opacity: 0;
    .is-ready & {
        transition: .3s;
    }

    &.is-inited{
        opacity: 1;
    }
}
// data-table-limit-tr /

// fixed-bg-prevent-bleed
.fixed-bg-prevent-bleed{
    position:absolute;
    background: #fff;

    &.sty-top{
        bottom: 100%;
        left: 0;
        right: 0;
        height: 1000px;
    }

    &.sty-bottom{
        top: 100%;
        left:0;
        right: 0;
        height: 1000px;
    }

    &.sty-black{
        background: #121617;
    }
}
// fixed-bg-prevent-bleed /

// cabinet-viewer
.cabinet-viewer{
    &__media{
        max-width: calc(100% - 56px);
        margin: 0 auto;
        position: relative;
        margin-bottom: 15px;
        // background: rgba(222, 222, 222, 0.3);
        &:before{
            content:'';
            display: block;
            padding-top: calc(1485 / 1000 * 100%);
        }
        img{
            @include absolute(0,0,0,0);
            margin:auto;
            max-height: 100%;
            cursor: pointer;
        }
    }
    &__subnail{
        display: flex;
        align-items: center;
        .swiper-slide{
            cursor: pointer;
            // background: rgba(222, 222, 222, 0.3);
            &:before{
                content:'';
                display: block;
                padding-top: calc(1485 / 1000 * 100%);
            }
            &:after{
                content:'';
                display: block;
                @include absolute(1px,0, 1px, 0);
                border: 2px solid #ba9736;
                opacity: 0;
            }
            img{
                @include absolute(0,0,0,0);
                margin:auto;
                max-height: 100%;
            }
        }

        .swiper-button-disabled{
            opacity: 0.3;
            cursor: default;
        }

        .cabinet-viewer__active{
            &:after{
                opacity: 1;
            }
        }
    }
   
    &__navi{
        width: 28px;
        flex-shrink: 0;
        cursor: pointer;
    }
    &__subnail-prev{
        @include caret('left', 12px, 27px, #999999);
        display: block;
    }
    &__subnail-next{
        @include caret('right', 12px, 27px, #999999);
        display: block;
        margin-left: auto;
    }
    &__subnail-swiper{
        flex-grow: 1;
    }
}
// cabinet-viewer /

// page-search-tool
.page-search-tool{
    margin-bottom: 50px;
    .search-result-summary{
        color: #C49722;
        font-size: 20px;
        text-align: center;
        padding-top: 20px;
    }

    @include mobile-xl{
        margin-bottom: 35px;
    }

    @include mobile-lg{
        margin-bottom: 30px;
    }
}
// page-search-tool /

// bs-grid
.row{
    &.gutter-10px{
        margin-left: -5px;
        margin-right: -5px;
        > [class*="col"] {
            padding: 0 5px;
        }
    }
}
// bs-grid /
.visible-control.invoice-4{
    .col-label{
        display: none !important;
    }    
}
    .box8{
  
width: 100%;
    height: auto;
    max-height: 410px;
    }    
    .box9{
       position: absolute;
width: 100%;
    height: auto;
    max-height: 420px;
    }    
    .box9:hover  {
transition: .3s;
      opacity: 0;

    }    


 .row>* {
     padding-right: calc(var(--bs-gutter-x) * .3) !important;
     padding-left: calc(var(--bs-gutter-x) * .3) !important;
}


.transit-img-box-block .row>* {
     padding-right: calc(var(--bs-gutter-x) * .0) !important;
     padding-left: calc(var(--bs-gutter-x) * .0) !important;
}


.namelogo {
     width: 300px;
}

@media only screen and (max-width: 767px) {
.namelogo {
     width: 120px;
}
}
.flaglogo{
     width: 90px;
margin-bottom: 15px;
}

@media only screen and (max-width: 767px) {
.flaglogo {
     width: 60px;
}

.multi-columns-row{
padding: 15px;

}
}