@charset "UTF-8";
/******************************

=====================
    Table Of Index:
=====================

01 - Base - Default
02 - Base - Color
03 - Base - Typhography
04 - Base - Animation
05 - Component - Button
06 - Component - Hero Slider
07 - Component - Banner
08 - Component - Product
09 - Component - Company Logo
10 - Component - Modal
11 - Component - Breadcrumb
12 - Component - Shop Sorting
13 - Component - Pagination
14 - Component - Sidebar Widget
15 - Component - Gallery
16 - Component - Tabstyle
17 - Component - Comment
18 - Component - Form
19 - Layout - Header
20 - Layout - Mobile Menu
21 - Layout - Vertical Menu
22 - Layout - Footer
23 - Layout - Custom Layout
24 - Layout - Offcanvas
25 - Layout - Addcart Offcanvas
26 - Layout - Slider Customize
27 - Layout - Utilities
28-  Layout - New Add
29 - Article Info

******************************/
/*****************************
01 - Base - Default
*****************************/
/*===== Google Fonts =====*/
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@200;300;400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@300;400;500;600;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@200;300;400;500;600;700;800;900&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display+SC&display=swap');
* {
    margin: 0;
    padding: 0;
    list-style: none;
    word-wrap: break-word;
    outline: none;
}
*,
*::after,
*::before {
    box-sizing: border-box;
}
html,
body {
    height: 100%;
}
.wrap {
    min-height: 100% !important;
    height: auto !important;
    height: 100%;
}
.main {
    padding-bottom: 343px;
}
@media (max-width: 768px) {
    .main {
        padding-bottom: 0;
    }
}
.main.product {
    overflow: auto;
    padding-bottom: 350px;
}
.clearfix {
    clear: both;
}
body {
    font-family: "Noto Sans TC", Serif, "arial";
    font-size: 16px;
    font-weight: 400;
    color: #383838;
    /* letter-spacing: 0.5px; */
}
h1,
h2,
h3,
h4,
h5,
h6 {
    color: #383838;
}
h1 {
    font-size: 40px;
}
h2 {
    font-size: 32px;
}
h3 {
    font-size: 24px;
}
h4 {
    font-size: 20px;
}
h5 {
    font-size: 18px;
}
h6 {
    font-size: 16px;
}

dl,
ol,
ul {
    margin-top: 0;
    margin-bottom: 0;
    padding: 0;
}

a {
    color: #383838;
    text-decoration: none;
}
a:hover {
    color: var(--header_link_hover_color, #d0343d);
}

a.red-link {
    color: var(--header_link_hover_color, #d0343d);
    text-decoration: underline;
}
a.red-link:hover {
    color: var(--header_link_hover_color, #d0343d);
    text-decoration: underline;
}

i {
    font-size: 16px;
}

* button {
    border: none;
    background: transparent;
    outline: none !important;
}
.img-responsive {
    width: 100%;
    height: auto;
}
#div_side_menu_4_v2{
	padding-bottom:56px;
}
@media (min-width: 1440px) {
    #div_side_menu_4_v2 .new .container,
    #div_side_menu_4_v2 .news .container,
    #div_menu_4_outer .container,
    #menu_section_online .container {
        margin-left: unset !important;
        margin-right: unset !important;
        padding-left: calc((100vw - 1288px) / 2) !important;
        padding-right: 0 !important;
        max-width: unset !important;
    }

    #div_side_menu_4_v2 .new .swiper-container,
    #div_side_menu_4_v2 .news .swiper-container,
    #div_menu_4_outer .menu-title-area,
    #div_menu_4_outer .swiper-container,
    #div_side_menu_4_v2  .online .swiper-container {
        padding-right: calc((100vw - 1288px) / 2) !important;
    }
}

@media (max-width: 1199px) and (min-width: 744px) {
    #div_side_menu_4_v2 .new .container,
    #div_side_menu_4_v2 .news .container,
    #div_menu_4_outer .container,
    #menu_section_online .container {
        padding-right: 0 !important;
        margin-left: unset !important;
        margin-right: unset !important;
        padding-left: 40px !important;
        max-width: unset !important;
    }

    #div_side_menu_4_v2 .new .swiper-container,
    #div_side_menu_4_v2 .news .swiper-container,
    #div_menu_4_outer .menu-title-area,
    #div_menu_4_outer .swiper-container,
    #div_side_menu_4_v2  .online .swiper-container {
        padding-right: 40px !important;
    }
}
@media(min-width: 1200px) {
    #div_side_menu_4_v2 .new .container,
    #div_side_menu_4_v2 .news .container,
    #div_menu_4_outer .container,
    #menu_section_online .container {
        padding-left: 76px !important;
        margin-left: unset;
        margin-right: unset;
        padding-right: 0;
        max-width: unset;
    }

    #div_side_menu_4_v2 .new .swiper-container,
    #div_side_menu_4_v2 .news .swiper-container,
    #div_menu_4_outer .menu-title-area,
    #div_menu_4_outer .swiper-container,
    #div_side_menu_4_v2  .online .swiper-container {
        padding-right: 76px !important;
    }
}

@media (max-width: 743px) {
    #div_side_menu_4_v2 .new .swiper-container,
    #div_side_menu_4_v2 .news .swiper-container,
    #div_menu_4_outer .swiper-container,
    #div_side_menu_4_v2 .online .swiper-container {
        padding-right: 16px !important;
    }
    #div_side_menu_4_v2 .new .container,
    #div_side_menu_4_v2 .news .container,
    #div_menu_4_outer .container,
    #menu_section_online .container {
        margin-left: unset !important;
        margin-right: unset !important;
        padding-left: 16px !important;
        padding-right: 0 !important;
        max-width: unset !important;
    }
    /*#div_menu_4_outer .new .swiper_area,*/
    /*#div_menu_4_outer .news .swiper_area,*/
    /*#div_menu_4_outer .swiper_area,*/
    /*#div_menu_4_outer .online .swiper_area {*/
    /*    margin-right: -20px !important;*/
    /*}*/
    .new .swiper_area {
/*        margin-left: -10px !important;*/
    }
    #div_menu_4_outer .new .swiper-container,
    #div_menu_4_outer .news .swiper-container,
    #div_menu_4_outer .swiper-container,
    #div_menu_4_outer .online .swiper-container {
        padding-right: 16px !important;
        padding-bottom:0;
    }
}

@media(min-width: 744px) {
    /*.new .container,*/
    /*.news .container,*/
    /*#div_menu_4_outer .container,*/
    /*.online .container {*/
    /*    padding: 0 60px;*/
    /*}*/

    /* 爆版產物-爆版失敗 */
    /*.new .swiper_area {*/
    /*    margin-right: -60px !important;*/
    /*    overflow-x: visible !important;*/
    /*}*/

    /*.new .swiper-container {*/
    /*    padding-right: 60px;*/
    /*    overflow-x: hidden;*/
    /*}*/
}

@media(max-width:840px) and (min-width: 744px) {
    .search-key .container {
        padding: 0 60px;
    }
}

@media(max-width:743px) {
    /*.menu_new_text_content {*/
    /*    height: 80px;*/
    /*    grid-template-columns: 1fr;*/
    /*    display: block;*/
    /*}*/

    #div_swiper_online_new_content_menu .img-responsive,
    #div_menu_media_info .img-responsive {
        /*grid-template-columns: 1fr;*/
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        aspect-ratio: 3 / 2;
    }
}

@media(min-width:744px) and (max-width:991px) {
    /*.menu_new_text_content {*/
    /*    height: 80px;*/
    /*    grid-template-columns: 50% 1fr;*/
    /*    display: block;*/
    /*}*/

    #div_swiper_online_new_content_menu .img-responsive,
    #div_menu_media_info .img-responsive {
        /*grid-template-columns: 50% 1fr;*/
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        aspect-ratio: 3 / 2;
    }
}

@media(min-width:992px) {
    /*.menu_new_text_content {*/
    /*    height: 80px;*/
    /*    grid-template-columns: 28.4% 1fr;*/
    /*    display: block;*/
    /*}*/

    #div_swiper_online_new_content_menu .img-responsive,
    #div_menu_media_info .img-responsive {
        /*grid-template-columns: 28.4% 1fr;*/
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
        display: block;
        aspect-ratio: 3 / 2;
    }
}

#div_swiper_online_store_content_menu .img-responsive,
.div_swiper_online_product_content_menu .img-responsive {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    aspect-ratio: 1 / 1;
}

.menu_online_new_div .img-responsive {
    height: auto;
    display: block;
}

.border-around {
    border: 1px solid #e0e0e0;
    border-radius: 3px;
}

/*ALIGN*/
.t_right {
    text-align: right !important;
}
.t_left {
    text-align: left !important;
}
.t_center {
    text-align: center !important;
}
.t_justify {
    text-align: justify !important;
}
.list-space--small li {
    margin-bottom: 10px;
}
.list-space--small li:last-child {
    margin-bottom: 0;
}

.pos-relative {
    position: relative;
}

.pos-absolute {
    position: absolute;
}

.overflow-hidden {
    overflow: hidden;
}

.float-left {
    float: left;
}

.float-right {
    float: right;
}

.color-invert {
    filter: invert(100%);
}
.vertical-middle{
	vertical-align:middle;
}

/*****************************
02 - Base - Color
*****************************/
.gray-bg {
    background-color: #f2f2f2;
}

.black-bg {
    background-color: #000000 !important;
}

.white-color {
    color: #ffffff !important;
}

.black-color {
    color: #000000 !important;
}
.red-color {
    color: var(--header_link_hover_color, #d0343d) !important;
}
.gray-color {
    color: #a09d9c !important;
}
.dgray-color {
    color: #383838 !important;
}
.blue-color {
    color: #0099ff !important;
}
.gold-color {
    color: #dec388 !important;
}
.white-bg {
    background: #fff !important;
}
.transparent-bg {
    background: transparent !important;
}
.orange-color{
	 color: #d0343d !important;

}
.red-bg {
    background: var(--header_link_hover_color, #d0343d) !important;
}
.orange-bg{
	background: linear-gradient(to right,  #d0343d 65%,#d0343d 60%, #FBEFEF 100%);
    padding: 2px 10px 2px 10px;
    color: #fff;
    font-size: 13px;
    border-top-right-radius: 15px;
    border-bottom-right-radius: 15px;
}
/*****************************
03 - Base - Typhography
*****************************/
/*...::: Font Weight :::... */
/*...::: Title - Font Style :::...*/
.title--large {
    font-family: "League Spartan";
    line-height: 60px;
    font-size: 40px !important;
    font-weight: 400;
    margin-bottom: 16px;
    display: flex;
}
.subtitle--large {
    font-family: "League Spartan";
    line-height: 27px;
    font-size: 22px;
    font-weight: 300;
    margin-left: 20px;
}
@media (max-width: 767px) {
    .main-padding {
        padding-top: 100px;
    }
    #main-container {
        padding-top: 0;
    }
    .title--large {
        display: block;
        text-align: center;
        margin-bottom: 5px;
    }
    .subtitle--large {
        display: block;
        text-align: center;
        margin-bottom: 20px;
        margin-left: 0;
    }
}
@media (max-width: 767px) {
    #main-container {
        padding-top: 62px;
    }
}
.title--medium {
    font-size: 32px;
}

.section-content {
    position: relative;
}
.section-content__title {
    font-size: 22px;
    line-height: 1.6;
    color: #181818;
}
.section-content__title > h1 {
    font-size: 3rem;
}
.section-content__title span {
    margin-left: 20px;
    font-size: 22px;
    font-weight: 400;
}
.topic-block .section-content__title > h1 {
    margin: 50px 10px 0;
}
@media (max-width: 768px) {
    .section-content__title .float_left {
        float: left;
    }
    .section-content__title > h1 {
        font-size: 1.9rem;
        float: left;
        text-align: left;
        word-break: break-all;
        line-height: 1.6;
    }
    .topic-block .section-content__title > h1 {
        margin: 30px 10px 0;
        text-align: center;
        width: 100%;
    }
}
@media (max-width: 480px) {
    .section-content__title > h1 {
        font-size: 1.5rem;
    }
}

.block-quote {
    margin-left: 80px;
    color: #666;
    background: #eef0f1;
    border-left: 5px solid var(--header_sub_bg_color);
    padding: 15px 30px;
    margin: 30px 0 30px 80px;
    text-align: justify;
    font-weight: 600;
    font-style: italic;
    line-height: 1.8;
    word-break: break-all;
}

.text--gray {
    color: #666;
}
.text-area {
    margin-bottom: 60px;
}
.text-area:last-child {
    margin-bottom: 0;
}
@media (min-width: 768px) {
    .text-area {
        margin-bottom: 80px;
    }
}
@media (min-width: 992px) {
    .text-area {
        margin-bottom: 100px;
    }
}
.text-area h5 {
    margin-bottom: 30px;
}

.title--border {
    border-bottom: 1px solid #cccccc;
}
@media (max-width: 991px) {
    .title--border {
        padding-bottom: 15px;
    }
}

.section-content__title.large {
    font-family: "League Spartan";
    color: #383838;
    font-size: 96px;
    line-height: 96px;
    font-weight: 200;
    margin-bottom: 50px;
}

.section-content__title {
    margin-bottom: 0;
}
.section-content__title__center {
    font-family: "League Spartan";
    color: #383838;
    font-size: 76px;
    line-height: 94px;
    font-weight: 200;
    width: fit-content;
    margin: 0 auto 28px;
}

.content__subtitle {
    color: #383838;
    font-size: 25px;
    line-height: 38px;
    text-align: right;
    display: block;
}
.section-content__title__left {
    font-family: "League Spartan";
    font-size: 60px;
    line-height: 100px;
    font-weight: 200;
    margin-bottom: 0;
    text-align: left;
}
@media (max-width: 991px) {
    .section-content__title.large {
        font-size: 76px;
        line-height: 76px;
    }
    .section-content__title {
        font-family: "League Spartan";
        font-size: 76px;
        line-height: 76px;
        font-weight: 200;
        margin-bottom: 0;
        text-align: left;
    }
}
@media (max-width: 768px) {
    .section-content__title.large {
        color: #383838;
        font-size: 50px;
        line-height: 44px;
        font-weight: 200;
        margin-bottom: 20px;
        text-align: center;
    }
    .section-content__title {
        font-family: "League Spartan";
        color: #383838;
        font-size: 44px;
        line-height: 45px;
        font-weight: 200;
        text-align: center;
    }
    .section-content__title__center {
        font-family: "League Spartan";
        color: #383838;
        font-size: 50px;
        line-height: 100px;
        font-weight: 200;
        width: fit-content;
        margin: 0 auto 30px;
    }
    .section-content__title__center.sec {
        width: fit-content;
        margin: 0 auto;
    }
    .section-content__title__left {
        font-family: "League Spartan";
        font-size: 44px;
        line-height: 100px;
        font-weight: 200;
        margin-bottom: 0;
        text-align: center;
    }
    .section-content__title__center.first {
        padding-top: 46px;
    }
    .content__subtitle {
        margin-top: -15px;
    }
}
@media(max-width:575px){
	.section-content__title__center {
        font-size: 45px;
    }
}

.section-content__title img,
.section-content__title__center img {
    max-width: 100%;
}
.content__subtitle {
    color: #383838;
    font-size: 18px;
    line-height: 0;
    text-align: right;
    display: block;
}
.lang_content_subtitle {
    font-size: 30px;
    line-height: 20px;
    text-align: right;
    display: block;
}
.website_lang_hr {
    opacity: 1;
    color: #e1e1e1;
}
.hr-div {
    display: flex;
    justify-content: center;
    margin-top: -36px;
}
.hr-div div {
    width: 15%;
}
.h-3 {
    height: 3px !important;
}
.h-5 {
    height: 5px !important;
}

.section-left-title {
    font-family: "League Spartan";
    font-size: 40px;
    font-weight: 400;
    text-align: left;
}
@media (max-width: 768px) {
    .lang_content_subtitle {
        font-size: 25px;
        line-height: 0px;
    }
    .hr-div div {
        width: 25%;
    }
}
@media (max-width: 768px) {
    .t_center > h1 {
        font-size: 24px;
    }
}

.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}
.text-left {
    text-align: left;
}
/*****************************
05 - Component - Button
*****************************/
.btn {
    display: inline-block;
    font-size: 16px;
    line-height: 1;
    outline: none;
    transition: all 0.3s ease;
    border-radius: 0;
    padding: 0;
}
.btn:focus {
    box-shadow: none;
}
.btn--box {
    display: inline-block;
}
.btn--block {
    display: block;
}
.btn--radius {
    border-radius: 50px;
}
.btn--border-white {
    color: #181818;
    border: 1px solid #e0e0e0;
}
.btn--border-black {
    color: #383838;
    border: 2px solid #cccccc;
    background: #f0f0f0;
}
.btn--border-red {
    color: var(--header_link_hover_color, #d0343d);
    border: 2px solid var(--header_link_hover_color, #d0343d);
}
.btn--border-red:hover {
    color: var(--header_link_hover_color, #d0343d);
    border: 2px solid #d0343d;
}
.btn--search {
    right: 0;
    width: 60px;
    text-align: center;
    height: auto;
}
.btn--underline {
    padding-bottom: 3px;
    border-bottom: 1px solid;
}
.btn--underline-black {
    color: #181818;
}
.btn--large {
    padding: 25px 42px;
}
@media (min-width: 768px) {
    .btn--large {
        padding: 16px 25px;
    }
}
@media (max-width: 991px) {
    .btn--large {
        padding: 17px 12px;
    }
}
@media (min-width: 1200px) {
    .btn--large {
        padding: 18px 40px;
    }
}
.btn--medium {
    padding: 13px 40px;
}
.btn--small {
    padding: 12px 20px;
}
@media (min-width: 768px) {
    .btn--small {
        padding: 15px 15px;
    }
}
.btn--tiny {
    padding: 15px 20px;
}
.btn--white {
    background: #fff;
    color: #000;
}
.btn--black {
    background: #181818;
    color: #fff;
}
.btn--gray {
    background: #e0e0e0;
    color: #000;
}
.btn--red {
    background: var(--header_link_hover_color, #d0343d);
    color: #fff;
}
.btn--red:hover {
    background: var(--header_link_hover_color, #d0343d);
    color: #fff;
}
button.btn--block {
    width: 100%;
}

.link--gray {
    color: #666;
    text-decoration: none !important;
    font-weight: 600;
}
.link--icon-left {
    display: inline-flex;
    align-items: center;
}
.link--icon-left i {
    margin-right: 10px;
}

/*****************************
06 - Component - Hero Slider
*****************************/
.hero {
    position: relative;
    overflow: hidden;
}
.hero .hero-slider {
    position: relative;
}
.hero .hero-slider img {
    width: 100%;
    object-fit: cover;
    height: 420px;
}
@media (min-width: 576px) {
    .hero .hero-slider img {
        height: 425px;
    }
}
@media (min-width: 768px) {
    .hero .hero-slider img {
        height: 550px;
    }
}
@media (max-width: 991px) {
    .hero .hero-slider img {
        height: 635px;
    }
}
@media (min-width: 1200px) {
    .hero .hero-slider img {
        height: 90vh;
    }
}
.hero__content {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}
.hero__content .title--small.pos-relative {
    padding-left: 40px;
    margin-top: 27px;
}
@media (min-width: 768px) {
    .hero__content .title--small.pos-relative {
        margin-top: 32px;
    }
}
.hero__content .btn {
    margin-top: 30px;
}
@media (min-width: 768px) {
    .hero__content .btn {
        margin-top: 45px;
    }
}
.hero .slick-active .hero__content--inner .hero-title-1 {
    animation: animate-top 0.5s linear 0.2s backwards;
}
.hero .slick-active .hero__content--inner .hero-title-2 {
    animation: animate-top 0.5s linear 0.8s backwards;
}
.banner__box {
    max-width: 100%;
    overflow: hidden;
}
.banner__box--single {
    margin-left: auto;
    margin-right: auto;
}
.banner__box--single-text-style-1 .btn {
    left: 50%;
    transform: translateX(-50%);
}
.banner__link, .new_link, .store_link {
    display: block;
}
.banner__img {
    width: 100%;
    height: auto;
    object-fit: cover;
}
.banner__content {
    padding: 0 20px;
}
@media (min-width: 1200px) {
    .banner__content {
        padding: 0 60px;
    }
}
.banner__content .btn {
    z-index: 9;
}
.banner__content--center {
    bottom: 0;
    width: 100%;
    transform: translateY(-50%);
}
.banner__content--bottom {
    bottom: 0;
    width: 100%;
    padding: 0 8%;
}
.banner__title {
    font-size: 32px;
    line-height: 45px;
    margin-bottom: 20px;
    font-weight: 500;
    text-shadow: 1px 1px 6px #555555;
    display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	Overflow:hidden;
}
.banner__sdesc {
    font-size: 20px;
    margin-bottom: 10px;
    font-weight: 500;
    text-shadow: 1px 1px 6px #555555;
    display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
	Overflow:hidden;
}
@media (max-width: 991px) {
    .banner__title {
        font-size: 22px;
        line-height: 30px;
        font-weight: 500;
        margin-bottom: 7px;
    }
    .banner__sdesc {	    
        font-size: 15px;
        font-weight: 500;
        margin-bottom: 7px;
	}
    .banner__author {
        font-size: 12px;
        line-height: 13px;
        font-weight: 400;
    }
}
.banner-wbg {
    background: rgba(255, 255, 255, 0.3);
    padding: 15px 30px;
    backdrop-filter: blur(5px);
}
@media(max-width:576px){
.banner-wbg {
    padding: 10px 15px;
}
}
.banner-wbg span {
    color: #ffffff;
}
.banner__author {
    font-size: 16px;
    font-weight: 400;
    text-shadow: 1px 1px 4px #000000;
}

/*****************************
08 - Component - Product
*****************************/

/*2024/03/14 NR 以下調整商品圖片尺寸，所以把設計統一用這個寫法一次完成*/
.product__img-box {
    overflow: hidden;
    position: relative;
}
 .product__img-box .product__img {
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
.article__img-box img {
    min-height:270px;
    height: 19.1vw;
    object-fit: cover;
}

.product__img--link .product__img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.product__img--link:hover .product__img:nth-child(2) {
    opacity: 1;
}
.product__img {
    width: 100%;
    transition: all 0.3s ease;
}
.dm__img--link .dm__img:nth-child(2) {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
}
.dm__img--link:hover .dm__img:nth-child(2) {
    opacity: 1;
}
.dm__img {
    max-width: 100%;
    transition: all 0.3s ease;
    max-height:415px;
    overflow:hidden;
    object-fit: cover;
    object-position:top;
}
.dm__img.other {
    max-height:403px;
    object-fit: contain;
}
@media(max-width:768px){
	.dm__img {
    max-height:100%;
}
}
.product__img-nav--right {
    top: 10px;
    right: 0px;
    background: #fff;
    padding: 10px 15px;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}
.product__img-nav--right li {
    margin-bottom: 5px;
}
.product__img-nav--right li a {
    display: inline-block;
    text-align: center;
    color: #181818;
    transition: all 0.3s ease;
}
.product__img-nav--right li a:hover {
    color: var(--header_link_hover_color, #d0343d);
}
.product__img-box:hover .product__img-nav--right {
    right: 10px;
    opacity: 1;
    visibility: visible;
}
.product__tag {
    position: absolute;
    top: 10px;
    left: 10px;
    text-align: center;
    padding: 1px 8px;
    color: #fff;
    font-size: 12px;
}
.product__content--bottom {
    display: flex;
    justify-content: space-between;
    width: 100%;
    left: 0;
    bottom: -5px;
    padding: 2.5px 0;
    transition: all 0.3s ease-in-out;
    opacity: 0;
    visibility: hidden;
}
.product__content--bottom-white {
    background: #fff;
}
.product__content--bottom li a {
    display: inline-block;
    text-align: center;
    color: #181818;
    transition: all 0.3s ease;
    font-size: 13px;
}
.product__content--bottom li a:hover {
    color: var(--header_link_hover_color, #d0343d);
}
.product__content--bottom li a i {
    padding-right: 10px;
}
.product__price-del {
    font-size: 14px;
    color: #a4a4a4;
    text-decoration: line-through;
    margin-right: 5px;
}
.product__price-reg {
    font-size: 16px;
    font-weight: 600;
    color: var(--header_link_hover_color, #d0343d);
}
.product__link {
    display: block;
    overflow: hidden;
    color: #383838;
    height: 46px;
    font-size: 16px;
    line-height: 24px;
    text-decoration: none;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}
.product__link:hover {
    color: var(--header_link_hover_color, #d0343d);
}
.product__desc {
    font-size: 14px;
    color: #777777;
    line-height: 24px;
}
.product__box:hover .product__content--bottom {
    bottom: 0;
    opacity: 1;
    visibility: visible;
    font-size: 14px;
}

/*****************************
10 - Component - Company Logo
*****************************/
.company-logo__area .slick-list {
    margin-left: -100px;
}
.company-logo__area .slick-slide {
    margin-left: 100px;
}
.company-logo__item {
    text-align: center;
}
.company-logo__link {
    display: block;
}
.company-logo__img {
    max-width: 100%;
    height: auto;
    transition: all 0.3s ease;
    opacity: 0.7;
}
.company-logo__img:hover {
    opacity: 1;
}

/*****************************
11 - Component - Modal
*****************************/
@media (max-width: 991px) {
    .modal-dialog {
        max-width: 870px !important;
    }
    .modal-header {
        padding: 0;
    }
    .modal__border {
        border-left: 1px solid #ddd;
    }
}
@media (min-width: 1200px) {
    .modal-dialog {
        min-width: 825px !important;
    }
    .modal-dialog-sm {
        min-width: 600px !important;
    }
}
.modal-header {
    justify-content: end !important;
    padding: 0 !important;
    color: #888888 !important;
    height: 50px;
    border-bottom: 0;
}
.modal-header i {
    font-size: 30px;
}
.modal-header .close {
    margin: 0 !important;
    color: #888888 !important;
}
/*****************************
11 - Component - Breadcrumb
*****************************/
.breadcrumb {
    text-align: left;
    padding: 0;
    background-color: transparent;
    color: #b5b5b4;
    font-weight: 500;
    letter-spacing:1.2px;
}
.breadcrumb ul {
    list-style: none;
}
.breadcrumb ul li,
.breadcrumb ul li a h2 {
    font-size: 14px;
    font-weight: 400;
    display: inline-block;
    position: relative;
}
@media (max-width: 768px) {
    .breadcrumb {
        margin-bottom: 0;
    }
    .breadcrumb ul li {
        font-size: 11px;
    }
}
.breadcrumb ul li a {
    color: #b5b5b4;
}
.breadcrumb ul li.square {
    width: 27px;
}
.breadcrumb ul li.square::before {
    content: "";
    position: absolute;
    top: -14px;
    left: 0;
    background: #e5e5e6;
    width: 16px;
    height: 16px;
}
@media (max-width: 768px) {
    .breadcrumb ul li.square {
        width: 15px;
    }
    .breadcrumb ul li.square::before {
        content: "";
        position: absolute;
        top: -7px;
        left: 0;
        width: 7.5px;
        height: 7.5px;
        margin-right: 7.6px;
    }
}
.breadcrumb ul li.active a {
    color: #000000;
}

/*****************************
12 - Component - Shop Sorting
*****************************/
.select-sort {
    padding: 5px 100px 5px 15px;
    border-radius: 3px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}
.select-sort option {
    text-align: right;
    border: 1px solid #777;
    padding: 5px 15px;
    margin: 5px 0;
}

.shop-grid .product__box--default {
    transform: scale(0.3);
    transition: all 0.3s ease;
}

.shop-grid.active .product__box--default {
    transform: scale(1);
}

.shop-list > .product__box--list {
    transform: translateX(100px);
    transition: all 0.5s ease;
}

.shop-list.active > .product__box--list {
    transform: translateX(0);
}

.product__box--list .product__img {
    margin: 0 auto;
    text-align: center;
    display: block;
}
/*****************************
13 - Component - Pagination
*****************************/
.page-pagination {
    padding-top: 50px !important;
    border-top: 1px solid #777777;
}
@media (max-width: 991px) {
    .page-pagination {
        margin-top: 72px;
    }
}
.page-pagination__link {
	font-size:12px!important;
    color: #636363!important;
    position: relative;
    border:1px solid transparent!important;
}
.page-pagination__link::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #d9d9d9;
    width: 100%;
    height: 3px;
}
.page-pagination__link:hover {
    color: var(--header_link_hover_color, #d0343d)!important;
    background:transparent!important;
}
.page-pagination__link.active::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--header_link_hover_color, #d0343d);
    color: var(--header_link_hover_color, #d0343d);
    width: 100%;
    height: 3px;
}
.page-pagination__link:hover::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: var(--header_link_hover_color, #d0343d);
    color: var(--header_link_hover_color, #d0343d);
    width: 100%;
    height: 3px;
}
.page-pagination__item{
	margin-bottom:0!important;
}
.page-pagination__link.active{
	background-color:transparent!important;
	
}
/*****************************
14 - Component - Sidebar Widget
*****************************/
.sidebar {
    margin-top: 60px;
}
@media (min-width: 768px) {
    .sidebar {
        margin-top: 80px;
    }
}
@media (max-width: 991px) {
    .sidebar {
        margin-top: 0px;
    }
}
.sidebar__tag li {
    display: inline-block;
    margin-right: 5px;
}
.sidebar__menu-filter-list {
    margin-bottom: 10px;
}
.sidebar__menu-filter-list:last-child {
    margin-bottom: 0;
}
.accordion a {
    text-decoration: none !important;
    color: #181818;
}
.accordion a:hover {
    color: var(--header_link_hover_color, #d0343d);
}

/*****************************
15 - Component - Gallery
*****************************/
.product-gallery-box {
    padding: 0 20px;
}
.product-gallery-box__vertical {
    display: flex;
    align-items: center;
}
.product-gallery-box__tab-left {
    flex-direction: row-reverse;
}
.product-gallery-box .swiper-slide {
    height: 100% !important;
}

.product-gallery-box--gallery {
    float: left;
}
.product-gallery-box--gallery img {
    width: 50%;
}

.product-image--large .img-fluid {
    max-width: 100% !important;
}
.product-image--gallery .img-responsive {
    margin: 10px;
}

/*set a border on the images to prevent shifting*/
#gallery-zoom img {
    border: 2px solid #777;
}

/*Change the colour*/
.zoom-active img {
    border: 2px solid #333 !important;
}
.product__stock {
    font-weight: 700;
    color: #777;
}
.product__stock i {
    color: #62ab00;
}

.product-var {
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}
.product-var__item {
    margin-bottom: 30px;
}
.product-var__text {
    display: block;
    margin-bottom: 9px;
    font-weight: 500;
}

.product-social span {
    color: #777;
    margin-bottom: 20px;
    display: inline-block;
    font-size: 16px;
}
.product-social-link li {
    display: inline-block;
    margin-right: 10px;
}
.product-social-link li:last-child {
    margin-right: 0;
}
.product-social-link li:nth-child(1) a:hover {
    background: #3c5b9b;
}
.product-social-link li:nth-child(2) a:hover {
    background: #00b901;
}
.product-social-link li:nth-child(3) a:hover {
    background: var(--header_link_hover_color, #d0343d);
    color:#fff;
}
.product-social-link li:nth-child(4) a:hover {
    background: var(--header_link_hover_color, #d0343d);
    color:#fff;
}
.product-social-link a {
    color: #4c484a;
    display: block;
    border: 2px solid #4c484a;
    text-align: center;
    line-height: 40px;
    transition: all 0.3s ease;
    padding: 0px 10px;
}
.product-social-link a:hover {
    color: #fff;
    border: 2px solid transparent;
}

/*****************************
16 - Component - Tabstyle
*****************************/
/*商品單頁介紹的tab li樣式*/
.tablist--style-title li > .nav-link {
    font-size: 1.1rem;
    line-height: 22px;
    font-weight: 400;
    text-transform: uppercase;
    text-align: center;
    padding: 0 0 10px 0;
}
.tablist--style-gap-70 li > .nav-link {
    margin: 0 30px;
}


.tablist li {
    position: relative;
}
.tablist--style-black .nav-link {
    color: #444444;
    padding: 0 0 24px 0;
    margin-bottom: 0;
    position: relative;
    font-weight: 300;
}
@media (min-width: 1200px) {
    .tablist--style-black .nav-link {
        margin-bottom: -2px;
        padding-bottom: 18px;
    }
}
.tablist--style-black .nav-link::after {
    position: absolute;
    content: "";
    bottom: -2px;
    left: 50%;
    right: 50%;
    width: 0%;
    height: 3px;
    background: var(--header_link_hover_color, #d0343d);
    transition: all 0.3s ease;
}
@media (min-width: 1200px) {
    .tablist--style-black .nav-link::after {
        bottom: 0px;
    }
}
.tablist--style-black .nav-link.active,
.tablist--style-black .nav-link:hover {
    color: var(--header_link_hover_color, #d0343d);
    font-weight: 500;
}
.tablist--style-black .nav-link.active::after,
.tablist--style-black .nav-link:hover::after {
    left: 0%;
    right: 0%;
    width: 100%;
    z-index: 1;
}
/* .tablist--style-blue .nav-link {
    color: #888;
} */
.tablist--style-title li > .nav-link {
    font-size: 16px;
    line-height: 35px;
    font-weight: 700;
    text-transform: uppercase;
    text-align: center;
}
@media (max-width: 1199px) {
    .tablist--style-title li > .nav-link {
        line-height: 24px;
        font-weight: 500;
        padding-bottom: 8px;
    }
}

.tablist--style-gap li:last-child > .nav-link {
    margin-right: 0;
}
.tablist--style-gap-24 li > .nav-link {
    margin-left: 24px;
}
.tab-content {
    padding-top: 45px;
}
.tab-content .tab-pane {
    display: block;
    height: 0;
    max-width: 100%;
    visibility: hidden;
    overflow: hidden;
    opacity: 0;
}

.tab-content .tab-pane.active {
    height: auto;
    visibility: visible;
    opacity: 1;
    overflow: visible;
}
.tablist-right-menu {
    border-bottom: 1px solid #dddddd;
    padding-top: 20px;
    float: right;
}
@media (max-width: 991px) {
    .tablist-right-menu {
        padding-right: 0;
    }
}
@media (max-width: 768px) {
    .tablist-right-menu {
        margin-bottom: 30px;
    }
}
.tablist-right-border {
    border-bottom: 1px solid #dddddd;
    width: 16%;
    right: 65px;
    position: absolute;
    z-index: -1;
}
@media (min-width: 1400px) {
    .tablist-right-border {
        width: 30%;
    }
}
.tablist-block {
    width: 1px;
    height: 28px;
    background: #888888;
    margin: 0 20px;
}

/*****************************
18 - Component - Form
*****************************/
.form-box__single-group {
    display: flex;
    flex-direction: column;
    margin-top: 25px;
}
@media (max-width: 768px) {
    .form-box__single-group {
        margin-top: 10px;
    }
}
.form-box__single-group label {
    font-size: 14px;
    font-weight: 600;
    text-align: left;
}
.form-box__single-group select,
.form-box__single-group textarea {
    border: 1px solid transparent;
    padding: 5px 10px;
    width: 100%;
    outline: 0;
    font-size: 16px;
}
.form-box__single-group input {
    border: 1px solid transparent;
    padding: 5px 10px;
    outline: 0;
    font-size: 16px;
}

input.large {
    background: #eeeeee;
    border: 0;
    border-radius: 3px;
    padding: 28px 28px 28px 78px;
    width: 100%;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
    input.large {
        background: #eeeeee;
        border: 0;
        border-radius: 3px;
        padding: 16px 72px 16px 48px;
    }
}
input.normal {
    background: #eeeeee;
    border: 0;
    border-radius: 3px;
    padding: 18px 78px 18px 78px;
    width: 100%;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}
input.normal.v2 {
    background: #eeeeee;
    border: 0;
    border-radius: 3px;
    padding: 18px 28px 18px 78px;
    width: 100%;
    outline: none;
    font-size: 16px;
    font-weight: 400;
    box-shadow: inset 2px 2px 5px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
    input.normal.v2 {
        background: #eeeeee;
        padding: 16px 28px 16px 44px;
        outline: none;
        font-size: 14px;
    }
}
@media (max-width: 576px) {
    input.normal.v2 {
        padding: 16px 72px 16px 44px;
    }
}
input i {
    margin-right: -25px;
    font-size: 40px;
}

.normal-select {
    outline: none;
    border: 1px solid #cccccc;
    color: #383838;
    padding: 11px 15px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.03);
    background: url("../../img/arrow-down.webp") no-repeat scroll 95% center #ffffff;
    background-size: 15px 15px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
button,
input,
optgroup,
select,
textarea {
    font-family: "Noto Sans TC";
}
.select-wbg {
    outline: none;
    border: 0;
    padding: 5px 15px;
    background-color: transparent;
    box-shadow: none;
}
::placeholder {
    color: #9d9d9d;
}

input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}
input[type="checkbox"]::after {
    position: absolute;
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid #e0e0e0;
    top: -15px;
    line-height: 20px;
    background: #fff;
    text-align: center;
    transition: all 0.3s ease;
}

input[type="checkbox"]:checked::after {
    content: "";
    font-family: "Font Awesome 5 Light";
    color: #fff;
    background: var(--header_link_hover_color, #d0343d);
}

input[type="radio"].shipping-select::after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 5 Free";
    background: #fff;
    text-align: center;
    transition: all 0.3s ease;
    top: -20px;
    color: var(--header_link_hover_color, #d0343d);
    font-size: 20px;
}

input[type="radio"].shipping-select:checked::after {
    content: "";
}

input[type="radio"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    position: relative;
}
input[type="radio"]::after {
    position: absolute;
    content: "";
    font-family: "Font Awesome 5 Free";
    background: #fff;
    text-align: center;
    transition: all 0.3s ease;
    top: -17px;
    color: #0063d1;
}

input[type="radio"]:checked::after {
    content: "";
}

.from-box__buttons {
    flex-direction: column;
    align-items: flex-start !important;
}
@media (min-width: 576px) {
    .from-box__buttons {
        flex-direction: row;
    }
}

.form-box-right {
    margin-top: 25px;
}
@media (min-width: 576px) {
    .form-box-right {
        margin-top: 0;
    }
}
.search__toggle {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
}
.search__toggle--btn {
    position: absolute;
    font-size: 30px;
    left: 20px;
    border-right: 1px solid #dddddd;
    padding-right: 15px;
    color: var(--header_link_hover_color, #d0343d);
}
.search__toggle--btn i {
    font-size: 30px;
}
@media (max-width: 768px) {
    .search__toggle--btn {
        font-size: 20px;
        left: 10px;
        border-right: 1px solid #dddddd;
        padding-right: 5px;
    }
    .search__toggle--btn i {
        font-size: 20px;
    }
}
.close__toggle--btn {
    position: absolute;
    font-size: 20px;
    right: 80px;
    border-left: 1px solid #dddddd;
    padding-left: 15px;
    color: #cccccc;
}
.send__toggle--btn {
    position: absolute;
    font-size: 30px;
    font-weight: lighter;
    right: 30px;
    padding-left: 20px;
    border-left: 1px solid #dddddd;
    padding-left: 15px;
    color: #cccccc;
}
.send__toggle--btn i {
    font-size: 30px;
    font-weight: lighter;
}
@media (max-width: 768px) {
    .close__toggle--btn {
        font-size: 15px;
        right: 50px;
        padding-left: 5px;
        border-left: 0;
    }
    .send__toggle--btn {
        font-size: 25px;
        right: 20px;
        padding-left: 5px;
        border-left: 0;
    }
    .send__toggle--btn i {
        font-size: 25px;
        font-weight: lighter;
    }
}

/*****************************
28 - Page - Contact
*****************************/
#map iframe {
    width: 100%;
    border: none;
    height: 600px;
}
@media (min-width: 576px) {
    #map iframe {
        height: 400px;
    }
}
@media (min-width: 360px) {
    #map iframe {
        height: 340px;
    }
}

.contact-form {
    padding: 25px 20px;
}
/* @media(max-width:575px){
.contact-form {
    padding: 0 0 25px;
}
} */
@media (min-width: 576px) {
    .contact-form {
        padding: 25px 30px;
    }
}
@media (min-width: 768px) {
    .contact-form {
        padding: 30px 40px;
    }
}

.social-link li {
    display: inline-block;
    margin-right: 15px;
}

.social-link a {
    color: #181818;
    font-size: 22px;
}

.blog-feed__img {
    width: 100% !important;
    height: auto !important;
}

/*****************************
19 - Layout - Header
*****************************/
.header__mobile {
    position: fixed!important;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 999;
    background: var(--header_main_bg_color, #ffffff);
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 5%);
    height: 62px;
    padding-top: 13px;
}
.header__mobile i {
    font-size: 18px;
    transition: all 0.3s ease;
}
.header__mobile i:hover {
    color: var(--header_link_hover_color, #d0343d);
}
.header__mobile-logo {
    width: 124px;
}
.header__mobile--rightside li,
.header__mobile--leftside li {
    margin-left: 9px;
}
.header__mobile--rightside li:first-child,
.header__mobile--leftside li:first-child {
    margin-left: 0;
}
.header__mobile--rightside li:last-child,
.header__mobile--leftside li:last-child {
    margin-right: 0;
}
.header__logo-img {
    width: 130px;
    height: auto;
}
@media(max-width:430px){
.header__logo-img {
    width: 110px;
}
}
.header__search-form {
    position: relative;
}
.header__search-input {
    display: flex;
    font-size: 13px;
    color: #fff;
}
.header__search-input button {
    color: #fff;
    margin-right: 10px;
}
.header__search-input button i {
    font-size: 26px;
}
.header__search-input input[type="search"] {
    width: 100%;
    height: 44px;
    padding: 10px 10px 10px 10px;
    outline: none;
    border: none;
    background: transparent;
    color: #fff;
}
.header__search-input input[type="search"]::placeholder {
    color: #fff;
}
.header__search-input-white-bg input[type="search"] {
    color: #181818;
}
.header__search-input-white-bg input[type="search"]::placeholder {
    color: #000;
}
.header__search-input--mobile input[type="search"] {
    padding: 10px 10px 10px 140px;
}
@media (min-width: 576px) {
    .header__search-input--mobile input[type="search"] {
        padding: 10px 10px 10px 184px;
    }
}
.header__menu {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    font-size: 18px;
    font-weight: 200;
    color: var(--header_main_f_color, #383838);
}
.header__menu li {
    margin-left: 30px;
}
.header__menu li:hover {
    color: var(--header_link_hover_color, #d0343d);
}

.header__user-action-icon li {
    margin-right: 27px;
}
.header__user-action-icon li:last-child {
    margin-right: 0;
}
.header__user-action-icon a {
    text-decoration: none;
    color: var(--header_main_f_color, #383838);
}
.header__user-action-icon i {
    font-size: 24px;
    color: var(--header_main_f_color, #383838);
}
.header__popup-search-form {
    position: absolute;
    top: 30px;
    right: 0;
    display: none;
    z-index: 99;
}
.header__popup-search-form input {
    padding: 10px 10px;
    width: 200px;
}
@media (min-width: 576px) {
    .header__popup-search-form input {
        padding: 10px 10px;
        width: 250px;
    }
}
.header__popup-search-form button {
    padding: 0 15px;
}
@media (min-width: 576px) {
    .header__popup-search-form button {
        padding: 0 20px;
    }
}
.header__popup-search-form i {
    color: #fff !important;
}

.wishlist-item-count {
    bottom: 2px;
    right: -9px;
    color: var(--header_main_bg_color, #ffffff);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    line-height: 18px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
}
.wishlist-item-count--red {
    background: var(--header_link_hover_color, #d0343d);
    color: var(--header_main_f_color, #383838) !important;
}

.sticky-header {
    width: 100%;
    background: var(--header_main_bg_color, #ffffff);
    color: var(--header_main_f_color, #383838);
    box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 5%);
    height: 80px;
    position: relative;
    z-index: 99;
}
.sticky-header.is-sticky {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    box-shadow: 0 1px 5px 1px rgb(0 0 0 / 5%);
    margin-top: 0;
    z-index: 999;
    background: var(--header_main_bg_color, #ffffff);
}
.sticky-header.is-sticky.header__color--silver {
    color: var(--header_main_f_color, #383838);
    box-shadow: 0 1px 1px 1px rgba(0, 0, 0, 0.2);
}

.header__nav {
    display: flex;
    margin: 0;
    align-items: baseline;
}
.header__nav-item {
    padding-right: 20px;
    display: inline-block;
}
@media (min-width: 1566px) {
    .header__nav-item {
        padding-right: 30px;
    }
}
.header__nav-item:last-child {
    padding-right: 0;
}
.header__nav-link {
    display: block;
    height: 60px;
    line-height: 36px;
    text-decoration: none !important;
    text-transform: uppercase;
    font-weight: 500;
    font-size: 16px;
    display: flex;
    align-items: center;
    position: relative;
}
.header__nav-link i {
    margin-left: 5px;
}
.header__nav-link::after {
    position: absolute;
    content: "";
    height: 2px;
    width: 0%;
    bottom: 15px;
    left: auto;
    right: 0;
    transition: all 0.3s ease;
}
.header__nav-link--white {
    color: var(--header_main_f_color, #383838);
}
.header__nav-link--white-hover-white::after {
    color: var(--header_main_f_color, #383838);
}
.header__nav-link--black {
    color: #181818;
}
.header__nav-link--black-hover-golden::after {
    color: var(--header_link_hover_color, #d0343d);
}
.header__nav-item:hover .header__nav-link--white-hover-white {
    color: var(--header_link_hover_color, #d0343d);
}
.header__nav-item:hover .header__nav-link--black-hover-golden {
    color: var(--header_link_hover_color, #d0343d);
}
.header__nav-item:hover .header__nav-link::after {
    width: 100%;
    left: 0;
    right: auto;
}

.dropdown__menu,
.dropdown__submenu {
    top: 100%;
    right: 0;
    /* width: 230px; */
    background: #fff;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    transform-origin: 0% 0%;
    transform-style: preserve-3d;
    transform: rotateX(-90deg);
    transition: all 0s linear;
    padding: 10px 0;
    text-transform: uppercase;
    font-size: 16px;
    font-weight: 400;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.1);
}
.top-position{
	top:152%!important;
}
@media(max-width:768px){
.top-position{
	top:136%!important;
}
}
.dropdown__submenu {
    top: 0;
    left: -100%;
}
@media (min-width: 1566px) {
    .dropdown__submenu {
        left: 100%;
    }
}
.dropdown__list {
    padding: 5px 15px;
    display: block;
    position: relative;
    text-align: left;
}
.dropdown__list a{
	color:#000000!important;
}
.dropdown__list a:hover{
	color: var(--header_link_hover_color, #d0343d)!important;
}
.dropdown__list.v2{
    padding: 0 15px;
}
.dropdown__list::before {
    content: "";
    position: absolute;
    left: 15px;
    top: 10px;
    height: 14px;
    width: 4px;
    background: #000000;
}
.dropdown__sublayer {
    padding: 5px 0;
    display: block;
    position: relative;
    text-align: left;
}

.dropdown__link,
.dropdown__submenu-link {
    text-decoration: none !important;
    display: inline-block;
    width: 100%;
    color: #000000;
    transition: all 0.3s ease;
    margin-left: 15px;
}
.dropdown__link:hover,
.dropdown__submenu-link:hover {
    color: var(--header_link_hover_color, #d0343d);
}

.mega-menu {
    top: 100%;
    left: 50%;
    margin: 0 auto;
    width: 720px;
    background: #fff;
    z-index: 999;
    visibility: hidden;
    opacity: 0;
    padding: 30px;
    text-transform: uppercase;
    transform-origin: 0% 0%;
    transform-style: preserve-3d;
    transform: translateX(-45%) rotateX(-90deg);
    transition: all 0s linear;
    border-bottom: 2px solid #546583;
}
@media (min-width: 1566px) {
    .mega-menu {
        transform: translateX(0%) rotateX(-90deg);
        left: 0;
        right: 0;
    }
}
.mega-menu__box {
    display: flex;
    justify-content: space-between;
}
.mega-menu__item-box {
    margin-right: 30px;
}
.mega-menu__item-box:last-child {
    margin-right: 0;
}
.mega-menu__title {
    display: block;
    font-weight: 600;
    color: var(--header_sub_bg_color);
}
.mega-menu__item {
    margin-top: 15px;
}
.mega-menu__item a {
    color: var(--header_main_f_color, #383838);
    font-size: 14px;
}
.mega-menu__item p {
    color: #666666;
    font-size: 12px;
    line-height: 18px;
}
.mega-menu__list {
    padding-bottom: 5px;
}
.mega-menu__list:last-child {
    margin-bottom: 0;
}
.mega-menu__link {
    text-decoration: none !important;
    display: inline-block;
    width: 100%;
    color: var(--header_main_f_color, #383838);
    transition: all 0.3s ease;
}
.mega-menu__link:hover {
    color: var(--header_link_hover_color, #d0343d);
}

.header__nav-item:hover .dropdown__menu,
.dropdown__list:hover .dropdown__submenu {
    visibility: visible;
    opacity: 1;
    transform: rotateX(0deg);
    transition: all 0.3s linear;
}

.header__nav-item:hover .mega-menu {
    visibility: visible;
    opacity: 1;
    transition: all 0.3s linear;
    transform: translateX(-45%) rotateX(0deg);
}
@media (min-width: 1566px) {
    .header__nav-item:hover .mega-menu {
        transform: translateX(0%) rotateX(0deg);
    }
}

.popup-expand-menu-button i {
    color: #fff;
    font-size: 40px;
}
.popup-expand-menu-button i:hover {
    color: #f17b08;
}

.popup-expand-menu {
    display: none;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
}

/*****************************
20 - Layout - Mobile Menu
*****************************/
.offcanvas {
    padding: 40px 20px;
}
/*****************************
21 - Layout - Vertical Menu
*****************************/
.header-menu-vertical .menu-title {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    cursor: pointer;
    margin: 0;
    background: #0063d1;
    padding: 15px 20px;
    border-radius: 3px;
    display: block;
}
.header-menu-vertical .menu-content {
    width: 100%;
    background: #fff;
    border: 1px solid #eaeaea;
    top: 100%;
    left: 0;
    display: none;
}
@media (max-width: 991px) {
    .header-menu-vertical .menu-content {
        display: block;
    }
}
.header-menu-vertical .menu-content li {
    display: block;
    position: relative;
}
.header-menu-vertical .menu-content li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
}
.header-menu-vertical .menu-content li a {
    position: relative;
    display: block;
    overflow: hidden;
    line-height: 24px;
    text-transform: capitalize;
    word-wrap: break-word;
    background: #fff;
    color: #47494a;
    padding: 7px 20px;
    font-size: 14px;
    font-weight: 400;
    transition: all 0.3s linear;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.header-menu-vertical .menu-content li a:hover {
    color: #0063d1;
}
.header-menu-vertical .menu-content li.expand a i {
    padding-right: 15px;
    font-weight: 700;
}
.header-menu-vertical .menu-content li .sub-menu {
    position: absolute;
    z-index: 9;
    text-align: left;
    top: 0;
    left: 100%;
    background: #fff;
    padding: 15px 10px 15px 10px;
    display: inline-block;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s linear;
    border: 1px solid #eaeaea;
    width: 705px;
}
@media (min-width: 1200px) {
    .header-menu-vertical .menu-content li .sub-menu {
        width: 890px;
    }
}
.header-menu-vertical .menu-content li .sub-menu > li {
    width: 33.33%;
    float: left;
}
.header-menu-vertical .menu-content li .sub-menu li a {
    margin: 5px 0px 5px 0px;
}

/*****************************
22 - Layout - Footer
*****************************/
footer {
    background-color: #eeeeee;
    font-weight: 400;
    font-size: 14px;
    color: #383838;
    margin-top: -240px;
    position: relative;
    clear: both;
    overflow: hidden;
}
footer.m-t-100 {
    margin-top: 60px;
}
@media (max-width: 768px) {
    footer {
        margin-top: 80px;
    }
}
@media (max-width: 991px) {
    footer.m-t-100 {
        margin-top: 100px;
    }
}
.footer__top {
    padding-top: 51px;
    padding-bottom: 51px;
}

@media (max-width: 991px) {
    .footer__top [class^="col"] {
        margin-bottom: 0;
    }
    .footer__top {
        padding-top: 25px;
        padding-bottom: 33px;
    }
}

@media (max-width: 991px) {
    .footer__social__bar {
        background: #d7d7d7;
        padding: 10px 15px;
    }
    .footer .footer__social {
        float: right;
    }
    .footer .footer__social ul li {
        display: inline-block;
        margin-left: 30px;
        line-height: 40px;
    }
    .footer .footer__social i {
        font-size: 30px;
    }
    .footer .footer__social-link {
        color: var(--footer_main_f_color, #333333);
    }
    .footer .footer__social-link:hover {
        color: var(--footer_main_f_color, #333333);
    }
    .footer .footer__social-link.active {
        color: var(--footer_main_f_color, #333333);
    }
}
.footer__menu {
    margin-top: 0px;
}
.footer__nav-title {
    font-size: 18px;
    margin-bottom: 15px;
    color: var(--footer_main_f_color, #d0343d);
    font-weight: 700;
}
.footer__des {
    font-size: 16px;
    font-weight: 400;
    color: var(--footer_link_f_color, #383838);
}
.footer__list {
    margin-bottom: 10px;
}
.footer__link {
    color: var(--footer_link_f_color, #383838);
    transition: all 0.3s ease;
    font-size: 16px;
    text-decoration: none !important;
    display: block;
}
.footer__link:hover {
    color: var(--footer_link_hover_color, #383838);
}
.footer__form-box {
    font-size: 16px;
    margin-top: 50px;
    position: relative;
}
.footer__form-box input {
    width: 100%;
    padding: 12px 120px 12px 10px;
    outline: none;
    border: none;
    background: #242424;
    border-right: none;
    color: #e0e0e0;
}
.footer__form-box button {
    position: absolute;
    padding: 16px 10px;
    right: 0;
}
.footer__bottom {
    padding: 40px 0;
    border-top: 1px solid #666;
}
.footer__copyright-text {
    text-align: center;
    margin-bottom: 20px;
}
@media (max-width: 991px) {
    .footer__copyright-text {
        text-align: left;
        margin-bottom: 0;
    }
}
.footer__copyright-text p {
    margin: 0;
}
.footer__copyright-text a {
    color: #888;
}
.footer__copyright-text a:hover {
    color: var(--footer_link_hover_color, #d0343d);
}
.footer .btn--border-black {
    font-family: "Noto Sans TC", Serif, "arial";
    color: #383838;
    border: 1px solid #cccccc;
    background: #f0f0f0;
    padding: 13px 15px;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.03);
    border-radius: 1.75px;
}
.footer i {
    font-size: 20px;
}
.footer select {
    font-size: 16px;
    outline: none;
    border: 1px solid #cccccc;
    padding: 9px 15px!important;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.03);
    border-radius: 1.75px;
    background: url("../../img/arrow-down.webp") no-repeat scroll 95% center transparent;
    background-size: 15px 15px;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
}
@media (max-width: 768px) {
    .footer select {
        background: url("../../img/arrow-down.webp") no-repeat scroll right center transparent;
        background-size: 15px 15px;
        min-width: 165px;
    }
}

.footer .select2-selection--single {
    font-size: 16px;
    outline: none;
    border: 1px solid #cccccc !important;
    padding: 4px 15px;
    background-color: transparent !important;
    box-shadow: 0 2px 2px 2px rgba(0, 0, 0, 0.03);
    border-radius: 1.75px !important;
    height: calc(1.5em + 0.75rem + 2px) !important;
}

@media (max-width: 768px) {
    .footer select {
        outline: none;
        border: 0;
        padding: 9px 0;
        background-color: transparent;
        box-shadow: none;
        border-radius: 0;
    }
    .footer .select2-selection--single {
        border: none !important;
        box-shadow: none;
    }
}
.copyright-area {
    background: #ffffff;
    height: 60px;
    line-height: 60px;
    text-align: center;
}
.copyright-text {
    color: #000000;
    font-size: 12px;
}
@media (max-width: 768px) {
    .copyright-area {
        background: #000000;
    }
    .copyright-text {
        color: #ffffff;
        text-align: left;
    }
}

.footer .barcode {
    width: 100px;
    height: auto;
}
@media (min-width: 1199px) {
    .footer .app-area {
        background: #fbfbfb;
        padding-left: 10%;
    }
    .footer .app-area {
        text-align: center;
    }
}
.footer .app-area {
    background: #fbfbfb;
}
.footer__nav{
	display:flex;
	flex-direction:column;
	gap:12px;
}
.footer__form .row{
	align-items:center;
}

/*****************************
23 - Layout - Custom Layout
*****************************/
.container {
    max-width: 100%;
    padding-right: 20px;
    padding-left: 20px;
    margin-right: auto;
    margin-left: auto;
}
@media (min-width: 576px) {
    .container {
        width: 100%;
    }
}
@media (min-width: 1200px) {
    .container {
        max-width: 1166px;
    }
}

.container-fluid {
    width: 100%;
    padding-left: 0;
    padding-right: 0;
    overflow-x: hidden;
    height:auto;
}

.image {
    clear: both;
    width: 100%;
    margin-bottom: 40px;
    display: block;
}

.category {
    float: left;
    clear: both;
    font-size: 13px;
    line-height: 15px;
    color: #181818;
    text-transform: capitalize;
    letter-spacing: 0.5px;
}

/*****************************
24 - Layout - Offacnvas
*****************************/
/* Body Style When OffCanvas Open */
.offcanvas-close {
    color: var(--header_link_hover_color, #d0343d);
}
.offcanvas-close i {
    font-size: 24px;
}

/* OffCanvas Overlay */
.offcanvas-overlay {
    position: fixed;
    z-index: 999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    display: none;
    background-color: rgba(0, 0, 0, 0.5);
}

/* OffCanvas */
.offcanvas {
    font-size: 16px;
    font-weight: 400;
    z-index: 99;
    position: fixed;
    top: 0;
    right: 0;
    left: auto;
    display: block;
    overflow: auto;
    width: 100%;
    height: 100vh;
    padding: 20px;
    transition: all 0.5s ease 0s;
    transform: translateX(100%);
    background-color: #ffffff;
    box-shadow: none;
}
@media (min-width: 576px) {
    .offcanvas {
        width: 400px;
    }
}
.offcanvas.offcanvas-open {
    transform: translateX(0);
}
.offcanvas__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #181818;
    text-transform: capitalize !important;
    margin-top: 10px;
    margin-bottom: 30px;
}
.offcanvas__top-text {
    font-size: 20px;
    font-weight: 400;
    margin-bottom: 0;
}
.offcanvas__top-text i {
    font-size: 20px;
    color: #181818;
    text-align: center;
    display: inline-block;
    margin-right: 10px;
}
.offcanvas.offcanvas-mobile-menu {
    right: 0;
    padding: 25px;
    transform: translateX(100%);
}
.offcanvas.offcanvas-mobile-menu.offcanvas-open {
    transform: translateX(0);
}
/*****************************
25 - Layout - Addcart Offcanvas
*****************************/
.offcanvas-add-cart__list {
    padding: 20px 0 !important;
    border-top: 1px solid #e0e0e0;
}
.offcanvas-add-cart__img-box {
    overflow: hidden;
}
.offcanvas-add-cart__item-dismiss {
    background: var(--header_link_hover_color, #d0343d) !important;
}
.offcanvas-add-cart__checkout-info {
    padding-top: 25px;
}
.offcanvas-add-cart__checkout-right-info {
    color: #546583 !important;
}
.offcanvas-add-cart__btn-checkout {
    margin-top: 50px !important;
}
/*****************************
26 - Layout - Slider Customize
/* *****************************/
.gap__col--30 .slick-list {
    margin-left: -15px;
    margin-right: -15px;
}
.gap__col--30 .slick-slide {
    margin-left: 15px;
    margin-right: 15px;
}
.gap__row--30 .slick-slide > div {
    margin-bottom: 30px;
}
.gap__row--30 .slick-slide > div:last-child {
    margin-bottom: 0;
}
.gap10{
	gap:10px;
}
.slider-dot-fix .slick-dots li button,
.slick-dots li button {
    text-indent: -9999px;
    display: inline-block;
}
.dot-gap__X--10 .slick-dots li {
    margin-right: 10px;
}
.dot-gap__X--10 .slick-dots li:last-child {
    margin-right: 0;
}
@media (max-width: 767px) {
    .dot-gap__X--10 .slick-dots li {
        margin-right: 10px;
        margin-top: 10px;
    }
    .dot-gap__X--10 .slick-dots li:last-child {
        margin-right: 0;
    }
}
.slider-dot .slick-dots {
    display: flex;
    justify-content:center;
    gap:8px;
}
.slider-dot .slick-dots li :first-childe {
    margin-left: 0;
}
.slider-dot.slider-dot--start .slick-dots {
    justify-content: flex-start;
}
@media (max-width: 768px) {
    .slider-dot.slider-dot--right .slick-dots {
        margin-top: 5px;
        padding-right: 10px;
    }
}

.slick-dots-container{
	display: flex;
    margin-top: 16px !important;
    justify-content: center;
    gap: 8px;
}
.slider-dot-size--medium .slick-dots li button ,
.slick-dots li button ,
section.separate_swiper_navigation .swiper-pagination-bullet:not(.swiper-pagination-bullet-active) {
    width: 8px;
    height: 8px;
    border-radius: 30px;
    background: rgba(34,34,34,0.4);
    display:flex;
    flex-wrap:wrap;
    align-items: baseline;
}

.slider-dot-size--small .slick-dots li button {
    width: 5px;
    height: 5px;
}
.slider-dot-circle .slick-dots li button,
section.separate_swiper_navigation .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)
{
    border-radius: 30px;
}
.slider-dot-style--border .slick-dots li button {
    border: 1px solid #d0343d;
}
.slider-dot-style--border-black-active-red .slick-dots li button {
    border-color: #181818;
}
.slider-dot-style--border-black-active-red .slick-dots li.slick-active button {
    border-color: #d0343d;
}
.slider-dot-style--border-black-active-golden .slick-dots li button {
    border-color: #181818;
}
.slider-dot-style--border-black-active-golden .slick-dots li.slick-active button {
    border-color: #d0343d;
}
.slider-dot-style--fill .slick-dots li button ,
section.separate_swiper_navigation .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)
{
    background: #d9d9d9;
}
.slider-dot-style--fill-white-active-white .slick-dots li button {
    background: rgba(255, 255, 255, 0.3);
}
.slider-dot-style--fill-white-active-white .slick-dots li.slick-active button {
    background: #d9d9d9;
}
.slider-dot-style--fill-white-active-golden .slick-dots li button,
section.separate_swiper_navigation .swiper-pagination-bullet:not(.swiper-pagination-bullet-active)
{
    background: rgba(34,34,34,0.4);
    -webkit-transition-delay: 0s;
	-o-transition-delay: 0s;
	transition-delay: 0s;
}
.slick-dots li.slick-active button,
.slider-dot-style--fill-white-active-golden .slick-dots li.slick-active button,
section.separate_swiper_navigation .swiper-pagination-bullet.swiper-pagination-bullet-active
{
    background: rgba(34,34,34,1);
    width: 60px;
    height: 8px;
    border-radius:30px;
    -webkit-transition: all .3s;
    -o-transition: all .3s;
    transition: all .3s;
    display:flex;
}
.hero-slider__arrow {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid #dbdbdb;
    color: #000000;
    background: #ffffff;
    font-weight: bold;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 98;
    padding: 0 10px;
}
.hero-slider_product__arrow {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid #dbdbdb;
    color: #000000;
    background: #ffffff;
    font-weight: bold;
    position: absolute;
    top: 33%;
    transform: translateY(-50%);
    z-index: 99;
    padding: 0 10px;
}
#div_media_area .hero-slider__arrow {
	background:transparent !important;
	border:none !important;
}
@media(max-width:991px){
.hero-slider_product__arrow {
	top: 40%;
}
}
.hero-slider_product__arrow--left {
    left: 0px;
}
.hero-slider_product__arrow--right {
    right: 0px;
}
.hero-slider_Middle__arrow {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.15);
    border: 1px solid #dbdbdb;
    color: #000000;
    background: #ffffff;
    font-weight: bold;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 99;
    padding: 0 10px;
}
@media (max-width: 1199px) {
    .hero-slider__arrow {
        top: 35%;
    }
}
[id *='div_page_kv_'] .hero-slider__arrow {
        top: 50%;
    }
.hero-slider__arrow--left {
    left: 0px;
}
.hero-slider__arrow--right {
    right: 0px;
}

.default-slider__arrow {
    width: 50px;
    height: 50px;
    background: #fff;
    color: #181818;
    font-size: 24px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    opacity: 0;
    visibility: hidden;
    border: 1px solid #181818;
    transition: all 0.3s ease;
    z-index: 99;
}
.default-slider__arrow i {
    font-size: 24px;
}
@media (max-width: 991px) {
    .default-slider__arrow {
        display: block;
    }
}
.default-slider__arrow--left {
    left: 0;
}
@media (min-width: 1566px) {
    .default-slider__arrow--left {
        left: calc(0% - 55px);
    }
}
.default-slider__arrow--right {
    right: 0;
}
@media (min-width: 1566px) {
    .default-slider__arrow--right {
        right: calc(0% - 55px);
    }
}
.default-slider:hover .default-slider__arrow {
    opacity: 1;
    visibility: visible;
}
.default-slider:hover .default-slider__arrow--left {
    left: calc(0% - 25px);
}
@media (max-width: 991px) {
    .default-slider:hover .default-slider__arrow--left {
        left: calc(0% - 15px);
    }
}
@media (min-width: 1566px) {
    .default-slider:hover .default-slider__arrow--left {
        left: calc(0% - 65px);
    }
}
.default-slider:hover .default-slider__arrow--right {
    right: calc(0% - 25px);
}
@media (max-width: 991px) {
    .default-slider:hover .default-slider__arrow--right {
        right: calc(0% - 15px);
    }
}
@media (min-width: 1566px) {
    .default-slider:hover .default-slider__arrow--right {
        right: calc(0% - 65px);
    }
}
.default-slider--hover-bg-red .default-slider__arrow:hover {
    color: #fff;
    background: var(--header_link_hover_color, #d0343d);
    border-color: var(--header_link_hover_color, #d0343d);
}
.default-slider--hover-bg-red .default-slider__arrow.slick-disabled {
    background: #fff;
    color: #181818;
    border: 1px solid #181818;
}
.default-slider--hover-bg-golden .default-slider__arrow:hover {
    color: #fff;
    background: var(--header_link_hover_color, #d0343d);
    border-color: var(--header_link_hover_color, #d0343d);
}
.default-slider--hover-bg-golden .default-slider__arrow.slick-disabled {
    background: #fff;
    color: #181818;
    border: 1px solid #181818;
}

.product-default-slider .slick-slide {
    transform: scale(0.75);
}
.product-default-slider .slick-slide.slick-active {
    transform: scale(1);
}
.gallery__nav {
    position: absolute;
    color: #777;
    z-index: 99;
}
.gallery__nav-horizontal {
    top: 50%;
    transform: translateY(-50%);
}
.gallery__nav-horizontal--right {
    right: -15px;
}
.gallery__nav-horizontal--left {
    left: -15px;
}
.gallery__nav-vertical {
    left: 50%;
    transform: translateX(-50%);
}
.gallery__nav-vertical--up {
    top: -20px;
}
.gallery__nav-vertical--down {
    bottom: -20px;
}

.inner-slider__arrow {
    width: 30px;
    height: 30px;
    background: #fff;
    color: #181818;
    font-size: 16px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    display: none;
    opacity: 0;
    visibility: hidden;
    border: 1px solid #181818;
    transition: all 0.3s ease;
    z-index: 99;
    line-height: 18px;
}
.inner-slider__arrow i {
    font-size: 18px;
}
.inner-slider__arrow--left {
    left: calc(0% + 5px);
}
.inner-slider__arrow--right {
    right: calc(0% + 5px);
}
.inner-slider:hover .inner-slider__arrow {
    opacity: 1;
    visibility: visible;
}
.inner-slider:hover .inner-slider__arrow--left {
    left: calc(0% + 15px);
}
.inner-slider:hover .inner-slider__arrow--right {
    right: calc(0% + 15px);
}

.inner-slider-grid-4 .slick-list {
    margin-right: -20px;
}
.inner-slider-grid-4 .slick-slide {
    margin-right: 20px;
}

/*****************************
28 - Layout - New Add
*****************************/

/*:::::::::: Width & Height :::::::::: */
.w-100 {
    width: 100%;
}
.w-60 {
    width: 60%;
}
.w-40 {
    width: 40%;
}
.w-15 {
    width: 15%;
}
.w60{
	width:60px;
}
.text-lower {
    text-transform: lowercase !important;
}
/*****************************
29 - Article Info
*****************************/
.product__content {
    margin-top: 10px;
    margin-bottom: 35px;
}
.product__content h3 {
    display: block;
    overflow: hidden;
    color: #383838;
    font-size: 16px;
    text-decoration: none;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 20px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.building {
    color: var(--header_link_hover_color, #d0343d);
    font-weight: 400;
    font-size: 18px;
    padding-right: 8px;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
    height: 22px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    position:relative;
}
.promotion-category {
    font-weight: 400;
    font-size: 18px;
    color: #848484;
    padding-left: 10px;
    border-left: 1px solid #848484;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 20px;
    height: 22px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.promotion-title {
    font-weight: 700;
    font-size: 16px;
    color: #070605;
    height:71px;
    margin-top: 8px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}
.promotion-title a h2{
	font-size:20px!important;
	line-height:1.2!important;
	height:50px;
	margin-bottom:0;
}
.promotion-content a h7{
	font-size:16px!important;
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	 display: -webkit-box;
	line-height: 20px;
	height: 24px;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical; 
	padding-top:4px;
}
.promotion-time a h7{
	color:#999999;
	font-size:14px!important;
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	 display: -webkit-box;
	line-height: 20px;
	height: 24px;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical; 
	padding-top:4px;
}
.promotion-title a:hover {
    color: var(--header_link_hover_color, #d0343d);
}
.promotion__img {
	    width: 100%;
	    max-height: 300px;
	    transition: all 0.3s ease;
	    object-fit: cover;
	    overflow:hidden;
}
@media (max-width: 991px) {
    .promotion__img {
        width: 100%;
        height: 93vw!important;
        max-height:300px;
    }
}
@media (max-width: 768px) {
    .promotion__img {
        height: 44.5vw!important;
    }
}
@media (max-width: 576px) {
.promotion__img {
    height: 92vw!important;
}
}
.promotion-banner img {
    height: 40vw;
    object-fit: cover;
}
@media (max-width: 768px) {
    .promotion-banner img {
        height: 80vw;
        object-fit: cover;
    }
}
.more {
    color: #818181;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 400;
    line-height: 29px;
    padding-top: 30px;
}
.more a:hover {
    color: var(--header_link_hover_color, #d0343d);
}
.menu-more {
    color: #818181;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 400;
    line-height: 29px;
    padding-top: 30px;
    text-align: right;
}
.menu-more a:hover {
    color: var(--header_link_hover_color, #d0343d);
}
@media (max-width: 991px) {
    .product__content {
        margin-top: 10px;
        margin-bottom: 25px;
    }
    .building {
        font-weight: 500;
        font-size: 15px;
        padding-right: 6px;
        margin-right: 0;
        letter-spacing: 0;
    }
    .promotion-category {
        font-weight: 500;
        font-size: 15px;
        letter-spacing: 0;
    }
    .promotion-title {
        font-weight: 500;
        font-size: 16px;
        margin-top: 5px;
    }
}
@media(max-width:575px){
    .promotion-title {
        height:auto;
    }
}
@media (max-width: 768px) {
    .more {
        font-weight: 300;
        font-size: 14px;
        line-height: 16px;
    }
    .menu-more {
        font-weight: 300;
        font-size: 14px;
        line-height: 16px;
        text-align: center;
    }
}

/*****************************
42 - Background Style
*****************************/
.box-bg {
    background-image: url("../../img/box-bg.webp");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: top;
}
@media (max-width: 1199px) {
    .box-bg {
        background-image: url("../../img/box-bg.webp");
        background-position: center;
    }
}
@media (max-width: 768px) {
    .box-bg {
        background-image: url("../../img/box-bg-mobile.webp");
        background-position: center;
    }
}
.box-bg.v2 {
    background: transparent;
}
@media (max-width: 768px) {
    .box-bg.v2 {
        background-image: url("../../img/box-bg.webp");
        background-size: cover;
        background-repeat: no-repeat;
        padding-bottom: 0;
    }
}
.dm-bg {
    background-image: url("../../img/dm-bg.webp");
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: 250px;
}

/*****************************
43 - INDEX - Media
*****************************/
.media.m-t-100 {
    margin-top: 57px;
}
@media (min-width: 768px) {
    .media.m-t-100 {
        margin-top: 80px;
    }
}
@media (max-width: 991px) {
    .media.m-t-100 {
        margin-top: 100px;
    }
}
@media (min-width: 576px) {
    .blog__title {
        font-size: 30px;
    }
}
@media (min-width: 768px) {
    .blog__title {
        font-size: 32px;
    }
}
@media (max-width: 991px) {
    .blog__title {
        font-size: 36px;
    }
}

.tag-area {
    border-top: 1px solid #dddddd;
    border-bottom: 1px solid #dddddd;
    padding: 15px 0;
}
.tag-area div {
    justify-content: space-between;
    color: #383838;
    text-decoration: underline;
    font-size: 16px;
    font-weight: 400;
    width: auto;
    line-height: 52px;
    padding: 0 10px;
    padding-right: calc(var(--bs-gutter-x) / 1.5);
    padding-left: calc(var(--bs-gutter-x) / 1.5);
}
.tag-area div :hover {
    color: var(--header_link_hover_color, #d0343d);
}
@media (max-width: 991px) {
    .tag-area div {
        font-size: 15px;
        font-weight: 500;
        line-height: 24px;
    }
}
@media (max-width: 768px) {
    .tag-area div {
        font-size: 14px;
    }
}
.tag-area a.active {
    color: var(--header_link_hover_color, #d0343d);
}
.bg-banner img{
	object-fit: cover;
    height: 550px;
}
.media-block {
    border: 1px solid #eceae9;
    background: #ffffff;
    background: rgba(255, 255, 255, 0.5);
    padding: 47px 32px 100px;
    cursor: pointer;
}
.media-block span {
    color: #383838;
}
@media (max-width: 991px) {
    .media-block {
        padding: 74px 15px;
    }
}
.media-block-s {
    border: 1px solid #eceae9;
    background: #ffffff;
    background: rgba(255, 255, 255, 0.95);
    padding: 16px;
    margin-top: -18px;
    margin-left: 20px;
    position: relative;
    z-index: 1;
    width: 98%;
}
@media (max-width: 1199px) {
    .media-block-s {
        width: auto;
    }
}
@media (max-width: 743px) {
    .media-block-s {
        margin-top: -10px;
    }
}
.media-block .category {
    color: var(--header_link_hover_color, #d0343d);
    font-size: 16px;
    font-weight: 500;
    width: 100%;
    margin-bottom: 39px;
}
@media (max-width: 991px) {
    .media-block .category {
        font-size: 16px;
        font-weight: 600;
        margin-bottom: 15px;
    }
}
.media__title {
    font-size: 40px;
    font-weight: 700;
    line-height: 53px;
    width: 100%;
    margin-bottom: 18px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    color: #383838;
}
.media__des {
    color: #000000;
    font-size: 20px;
    font-weight: 400;
    line-height: 27px;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    margin-bottom: 19px;
}
.media__date {
    font-size: 16px;
    font-weight: 300;
    line-height: 18px;
    color: #818181;
}
@media (max-width: 991px) {
    .media__title {
        font-size: 24px;
        font-weight: 700;
        line-height: 35px;
        margin-bottom: 10px;
    }
    .media__des {
        font-size: 16px;
        line-height: 23px;
        margin-bottom: 10px;
    }
    .media__date {
        font-size: 12px;
        font-weight: 300;
        line-height: 13px;
    }
}
.media__title__s {
    color: #383838;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    margin-bottom: 15px;
}
.media__date__s {
    font-size: 16px;
    font-weight: 300;
    line-height: 18px;
    color: #818181;
}
@media (max-width: 991px) {
    .media__title__s {
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
        margin-bottom: 10px;
    }
    .media__date__s {
        font-size: 12px;
        font-weight: 400;
        line-height: 13px;
    }
}

/* VIDEO */
.popup-icon i {
    border: 1px solid #ffffff;
    color: #fff;
    background: rgba(255, 255, 255, 0.1);
    width: 83px;
    height: 83px;
    line-height: 83px;
    text-align: center;
    border-radius: 50%;
    font-size: 35px;
    margin-bottom: 15px;
}

.video__img {
    overflow: hidden;
}
.video__img a {
    display: block;
}
.video__img img {
    object-fit: cover;
    width: 100%;
    height: 458px;
    position: relative;
}
.video__img iframe {
    width: 100%;
    height: 458px;
}
.video-block {
    text-align: center;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    padding: 25% 26px 0;
}
.video__title {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    margin-bottom: 15px;
}
.video__date {
    font-size: 16px;
    font-weight: 400;
    line-height: 18px;
    color: #ffffff;
}
@media (max-width: 991px) {
    .video__title {
        font-size: 18px;
        font-weight: 700;
        line-height: 24px;
    }
    .video__date {
        font-size: 12px;
        font-weight: 400;
        line-height: 13px;
    }
}
.ad-info {
    background: #d7d7d7;
    color: #383838;
    line-height: 18px;
    font-size: 16px;
    font-weight: 500;
    padding: 24px 0;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
@media (max-width: 768px) {
    .ad-info {
        padding: 8px 0;
    }
}
.ad-content {
    background: #383838;
    color: #ffffff;
    padding: 40px;
}
.ad-content .category {
    font-size: 16px;
    color: #888888;
    margin-bottom: 20px;
    width: 100%;
}
@media (max-width: 991px) {
    .ad-content {
        padding: 20px;
    }
    .ad-content .category {
        margin-top: 10px;
        margin-bottom: 10px;
        font-size: 14px;
        font-weight: 500;
    }
}
.message__title {
    font-size: 16px;
    font-weight: 700;
    border-right: 1px solid #ffffff;
    margin-right: 10px;
    padding-right: 10px;
    width: fit-content;
    float: left;
}
.message__des {
    height: 20px;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    position: relative;
}
.ad__title {
    color: #ffffff;
    font-size: 32px;
    font-weight: 700;
    line-height: 43px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    margin-bottom: 20px;
    clear: both;
    position: relative;
    height: 82px;
}
.ad__des {
    color: #ffffff;
    font-size: 16px;
    font-weight: 400;
    line-height: 24px;
    display: -webkit-box;
    width: 100%;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    text-align: justify;
    position: relative;
    padding-top: 20px;
}
.ad__des::before {
    content: "";
    border-top: 2px solid #d0343d;
    width: 30px;
    position: absolute;
    left: 0;
    top: 0;
}
@media (max-width: 991px) {
    .ad__title {
        font-size: 24px;
        line-height: 32px;
        margin-bottom: 15px;
        height: auto;
    }
    .ad__des {
        font-size: 16px;
        font-weight: 400;
        line-height: 21px;
    }
}
/* Search */
.menu-container-left {
    padding-left: 0;
}
.menu-container-right {
    padding-right: 0;
}
@media (min-width: 992px) {
    .menu-container-right {
        padding-right: 65px;
    }
}
@media (min-width: 768px) {
    .menu-container-left {
        padding-left: 65px;
    }
}
.menu-slider ul {
    list-style: none;
    padding: 8px 50px;
}
.menu-slider ul li {
    display: inline-block;
    font-size: 20px;
    font-weight: 400;
}
@media (max-width: 991px) {
    .menu-slider ul {
        list-style: none;
        padding: 8px 0;
    }
}
.items-baseline {
    align-items: baseline;
}
.items-center {
    align-items: center;
}
.justify-center {
    justify-content: center;
}

.location-title {
    color: var(--header_link_hover_color, #d0343d);
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
}
.location-title.m-t-10::before, 
.location-title.m-t-10 {
    background:transparent;
    width:auto;
    height:auto;
    position: inherit;
    margin-top:10px;
}
/*針對很多加.m-t-10會衝突到title做的下方黑紅色塊產生問題*/
.revert.m-t-10,
.revert.m-t-10::before{
    background:transparent;
    width:auto;
    height:auto;
    position: inherit;
    margin-top:10px;
}
.filter-location-title {
    font-size: 16px;
    font-weight: 400;
    margin-bottom: 15px;
    margin-left: 13px;
}
.filter-Store-title {
    font-size: 40px;
    color: #858585;
}
@media(max-width:767px){
.filter-Store-title {
    font-size: 24px;
}
}
.location-list {
    display: inline;
}
.location-list li {
    border: 1px solid var(--header_link_hover_color, #d0343d);
    margin-right: 25px;
    margin-bottom: 20px;
    font-size: 15px;
    font-weight: 500;
    color: #383838;
    line-height: 20px;
    display: inline-block;
}
.location-list li a {
    display: inline-block;
    padding: 10px 25px;
}
.swiper-location-list {
    border: 1px solid var(--header_link_hover_color, #d0343d);
    margin-right: 25px;
    font-size: 15px;
    font-weight: 500;
    color: #383838;
    height: 100%;
}
.swiper-location-list a {
    display: inline-block;
    padding: 10px 25px;
}
.news-block {
    border: 1px solid #eceae9;
    background: rgba(255, 255, 255, 0.7);
    padding: 16px;
}
.news-list li {
    display: block;
    border-bottom: 1px solid #dddddd;
    padding-bottom: 10px;
}
.news-list li:last-child {
    border-bottom: 1px solid transparent;
}
.news-list li a {
    font-size: 18px;
    font-weight: 400;
    line-height: 32px;
}
.news-date {
    font-size: 16px;
    font-weight: 300;
    padding-top: 10px;
    display: block;
}
.news-date:hover {
    color: 1px solid var(--header_link_hover_color, #d0343d);
}
.news-title {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
}
.last-border {
    border-bottom: 1px solid transparent !important;
    padding-bottom: 0 !important;
}

.swiper-member-list {
    margin-left: 15px;
    font-size: 15px;
    font-weight: 400;
    color: #383838;
    line-height: 20px;
    display: inline-block;
}
.swiper-member-list a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 33px;
    font-size: 18px;
    text-align: center;
    border: 1px solid #dbdbdb;
    background: #ffffff;
    display: inline-block;
    padding: 0 15px;
}
.swiper-member-list a:hover {
    display: inline-block;
    color: #ffffff !important;
    border: 1px solid var(--header_link_hover_color, #d0343d);
    background: #d0343d;
}
.swiper-member-list a.active {
    color: #ffffff !important;
    border: 1px solid var(--header_link_hover_color, #d0343d);
    background: var(--header_link_hover_color, #d0343d);
}
@media (max-width: 991px) {
    .location {
        border-right: 0;
        display: block;
        text-align: center;
    }
}

/* DM show & hidden */
.dm__img-box {
    position: relative;
}
.dm__img-box .hide {
    display: none;
}
.dm__img-box:hover .hide {
    display: block;
}
.dm__img-box .show {
    display: block;
}
.dm__img-box:hover .show {
    display: none;
}

 .dm__img-box.v2 {
    position: relative;
}
.dm-content.v2 {
    font-size: 18px;
    font-weight: 500;
    line-height: 20px;
    color: #383838;
    text-align: center;
    min-height: 500px;
    padding:20px;
    transition: all 0.15s ease-out;
}
.dm-content.v2:hover {
    line-height: 20px;
    background: #f2f2f2;
}
.dm-post-title {
    font-size: 16px;
    font-weight: 500;
}
.dm-content.v2 .dm__img {
    margin: 20px 0 21px;
}

.dm-post-date {
    font-size: 16px;
}

.dm-content {
    font-size: 14px;
    font-weight: 500;
    line-height: 20px;
    color: #ffffff;
}
.dm-info {
    position: absolute;
    top: 38%;
    text-align: center;
    width: 100%;
    padding-bottom: 5px;
}
.info-border {
    width: 30px;
    height: 1px;
    background: #ffffff;
    display: block;
    margin: 18px auto 10px;
}
.shop {
    text-align: center;
    width: 100%;
    font-weight: 900;
    line-height: 20px;
    padding-top: 5px;
}
.brandshop {
    text-align: center;
    margin-top:20px;
    font-size:16px;
    font-weight: 350;
    word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	 display: -webkit-box;
	line-height: 20px;
	height: 22px;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical; 
}
.member__box {
    padding: 15px 15px 43px;
    border: 1px solid #eceae9;
    border-bottom: 0;
    background: rgba(255, 255, 255, 0.7);
    display: flex;
    position: relative;
}
.member-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
}
.time-liner {
    color: #ffffff;
    background: #383838;
    font-size: 14px;
    font-weight: 500;
    line-height: 28px;
    padding: 2px 17px;
    width: calc(100% - 121px);
}
.time-liner ul li {
    display: inline-block;
}
.member-item-bg {
    background: #fdfefe; /* Old browsers */
    background: -moz-linear-gradient(top, #fdfefe 36%, #f6f6f6 39%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #fdfefe 36%, #f6f6f6 39%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #fdfefe 36%, #f6f6f6 39%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fdfefe', endColorstr='#f6f6f6',GradientType=0 ); /* IE6-9 */

    position: absolute;
    right: -1px;
    bottom: 0;
    padding-bottom: 16px;
}
.member-item {
    background: #eceae9;
    font-size: 16px;
    font-weight: 500;
    color: #757373;
    padding: 4.3px 20px;
    transform: skewy(-15deg);
    min-width: 123px;
    min-height: 33px;
}
@media (max-width: 768px) {
    .member__box {
        display: block;
    }
    .member-item {
        font-size: 14px;
        padding: 4.3px 10px;
        min-width: 100px;
        transform: skewy(-18deg);
    }
    .time-liner {
        width: calc(100% - 100px);
    }
}
.member-pic img {
    width: 140px;
    height: 140px;
    object-fit: cover;
}
.member-info {
    padding: 0 0 25px 10px;
    display: table;
}
.member-block-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 28px;
    height: 55px;
    margin-bottom: 15px;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.member-des {
    font-size: 18px;
    font-weight: 500;
    line-height: 24px;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    padding-bottom: 10px;
    height: 48px;
}
@media (max-width: 768px) {
    .member-pic img {
        display: block;
        width: 100%;
        height: auto;
        text-align: center;
    }
    .member-info {
        width: 100%;
        padding: 10px 0 0;
        clear: both;
    }
    .member-block-title {
        font-size: 18px;
        font-weight: 700;
        line-height: 28px;
        height: auto;
        margin-bottom: 15px;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
    }
}
.online-block-title {
    color: #818181;
    font-size: 19px;
    font-weight: 500;
    line-height: 35px;
    padding: 25px 0 15px;
    text-align: center;
}
@media (max-width: 478px) {
    .online-block-title {
        font-size: 17px;
        font-weight: 500;
        line-height: 35px;
        padding: 0;
    }
}
@media (max-width: 413px) {
    .online-block-title {
        font-size: 24px;
    }
}

/* SHOP INDEX */
.shop-title {
    font-size: 16px;
    font-weight: 400;
    line-height: 27px;
    background-color: #ffffff;
    padding: 0 20px 0 25px;
    position: relative;
    z-index: 9;
    width: fit-content;
    margin: 0 auto 16px;
    letter-spacing: 6px;
}
.shop-title-bg {
    position: relative;
    max-width: 560px;
    margin: auto;
    margin-top:30px;
}
.shop-title-bg::after {
    content: "";
    background: #000000;
    height: 1px;
    width: 100%;
    top: 14px;
    position: absolute;
}
.shop-menu {
    background: #231e1d;
    color: #ffffff;
    text-align: center;
    border-radius: 30px;
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 30px;
}
.shop-menu ul {
    list-style: none;
}
.shop-menu ul li {
    display: inline-block;
    padding: 9px 20px;
    font-size: 16px;
    font-weight: 400;
    align-items: center;
}
.shop-menu ul li :hover {
    color: var(--header_link_hover_color, #d0343d);
}
.shop-menu ul li a,
.shop-menu ul li a:hover {
    color: #ffffff;
}
.shop-banner-info {
    padding-left: 56px;
    margin-top: -50px !important;
    display: inline-flex;
    position: relative;
    width: 99%;
}
@media (max-width: 768px) {
    .shop-banner-info {
        position: relative;
    }
    .shop-mobile-content {
        color: #857b72;
        background: #eee4d8;
        margin-top: -90px !important;
        z-index: 0;
        width: 95%;
        padding: 100px 34px 14px 34px;
    }
    .shop-mobile-content a {
        color: #857b72 !important;
    }
    .shop-menu ul li {
        padding: 7px;
        font-size: 12px;
        font-weight: 400;
    }
    .shop-banner-info {
        padding-left: 17px;
        margin-top: -130px;
    }
}
.shop-banner-title {
    display: flex;
    align-items: center;
    position: absolute;
    right: 24px;
    bottom: 8px;
}
.shop-banner-title ul {
    list-style: none;
}
.shop-banner-title ul li {
    color: #ffffff;
    font-size: 14px;
}
@media (max-width: 768px) {
    .shop-banner-mobile {
        padding-left: 34px;
        position: relative;
        z-index: 1;
    }
    .shop-banner-title {
        color: #000000;
        padding-top: 10px;
        padding-bottom: 5px;
        font-size: 16px;
        font-weight: 400;
        position: relative;
        border-bottom: 1px solid #000000;
        display: block;
        position: relative;
        right: 0;
        bottom: 0;
    }
    .shop-banner-title::after {
        position: absolute;
        content: "";
        left: 0;
        bottom: -4px;
        height: 3px;
        width: 69px;
        background: #000000;
    }
}
.shop-title-linner {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 52%, #999999 52%, #999999 52%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 52%, #999999 52%, #999999 52%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 52%, #999999 52%, #999999 52%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#999999',GradientType=0 ); /* IE6-9 */
    width: 3px;
    height: 50px;
    border-radius: 10px;
    float: left;
}
.banner-list {
    padding: 24px;
    font-size: 13px;
    line-height: 30px;
}
.banner-list.v2 {
    padding: 24px;
    font-weight: 400;
    font-size: 16px;
    line-height: 30px;
    color: #857b72;
    text-align: justify;
}
@media (max-width: 768px) {
    .banner-list {
        padding: 8px 11px 16px;
    }
    .banner-list.v2 {
        color: #585858;
        padding: 10px 0;
        font-size: 14px;
    }
}
.banner-list table {
    border: 0;
}
.banner-list table tbody > tr {
    border-bottom: 0;
}
.banner-list table tbody > tr td {
    color: #181818;
    padding: 10px 0;
    font-size: 13px;
    line-height: 15px;
}
@media (max-width: 768px) {
    .banner-list .item {
        font-size: 13px;
        font-weight: 400;
    }
}
.item-line {
    color: #9f9f9f;
}
.item-vline {
    width: 1px;
}
.item-floor {
    color: #4e4e4e;
}
.item-des {
    font-size: 14px;
    color: #4e4e4e;
    text-align: left;
    display: block;
    margin: 0px !important;
    word-break: break-word;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    line-height: 20px;
    height: 22px;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.item-des:hover {
    color: var(--header_link_hover_color, #d0343d);
}
@media (max-width: 768px) {
    .item-des {
        line-height: 20px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        white-space: normal;
        overflow: hidden;
        padding-left: 7px;
        height: 40px;
    }
}
/* banner */
.div_branch_banner_img a {
    display: block;
    height: 100%;
}
.branch_banner_info_area {
    position: relative;
    margin-top: -50px;
    padding-left: 60px;
}
.branch_banner_info_color_area {
    display: grid;
    grid-template-columns: minmax(20%, auto) 1fr;
}
.shop_banner_title_area {
    display: flex;
    justify-content: end;
    height: 100%;
    align-items: end;
}
.shop_banner_title_content {
    display: grid;
    grid-template-columns: repeat(2, auto);
    color: #fff;
    padding: 10px 10px 10px 20px;
    font-size: 14px;
}
.branch_banner_new_area {
    font-size: 13px;
    color: #000000;
}
.branch_banner_new_area.div_web {
    display: grid;
    gap: 10px;
    padding: 24px;
}
.branch_banner_new_web {
    display: grid;
    grid-template-columns: repeat(4, auto) 1fr;
    align-items: center;
}
.branch_banner_new_web .item,
.branch_banner_new_web .item-line {
    font-size: 16px;
    color: #9f9f9f;
}
.branch_banner_new_web .item {
    font-weight: 500;
}
.branch_banner_new_area.div_mobile {
    padding: 24px 30px;
    width: 100%;
}
.swiper_branch_banner_news_mobile {
    width: fit-content;
    display: table;
    max-width: 100%;
    margin: auto;
    position: relative;
    padding: 0 90px;
}
.branch_banner_new_mobile {
    word-break: break-word;
    display: block;
    margin-bottom: 6px;
}
.branch_banner_new_mobile.new_desc_area {
    display: grid;
    grid-template-columns: auto 1fr;
}
.branch_banner_new_mobile .item,
.branch_banner_new_mobile .item-line {
    font-size: 13px;
    color: #9f9f9f;
}
.branch_banner_new_mobile .item-des {
    font-size: 15px;
}
.branch_banner_new_mobile .item {
    font-weight: 400;
}
.branch_banner_news_mobile .swiper-wrapper {
    align-items: center;
}
.branch_banner_info_color_area_mobile .black-bg {
    position: absolute;
    top: 0;
    bottom: 0;
}
.branch_banner_info_color_area_mobile .gray-bg {
    margin-left: 90px;
}
@media (max-width: 576px) {
    .branch_banner_info_area {
        padding-left: 17px;
    }
}

/* MEMBER INDEX */
.member-title {
    position: relative;
    font-size: 32px;
    font-weight: 500;
    text-align: center;
    margin-bottom: 36px;
}
@media (max-width: 768px) {
    .member-title {
        font-size: 22px;
        font-weight: 500;
        line-height: 38px;
    }
    .member-des {
        font-size: 14px;
        font-weight: 400;
        margin-bottom: 36px;
        line-height: 26px;
    }
}
.member-title-border {
    background: var(--header_link_hover_color, #d0343d); /* Old browsers */
    background: -moz-linear-gradient(left, #d0343d 32%, #000000 32%, #000000 32%); /* FF3.6-15 */
    background: -webkit-linear-gradient(left, #d0343d 32%, #000000 32%, #000000 32%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to right, #d0343d 32%, #000000 32%, #000000 32%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d0343d', endColorstr='#000000',GradientType=1 ); /* IE6-9 */
    height: 7px;
    width: 100px;
    margin: auto;
    margin-top: 33px;
}
.member-title-border::after {
    content: "";
    position: absolute;
    border-bottom: 1px solid #cccccc;
    padding-bottom: 30px;
    width: 100%;
    left: 0;
    bottom: 6px;
}
@media (max-width: 768px) {
    .member-title-border {
        margin-top: 20px;
    }
}
.member-tab-content {
    max-width: 768px;
    margin: auto;
}
.tab-list ul {
    list-style: none;
}
.member-tab-list {
    margin-bottom: 50px;
}
.member-tab-list ul li {
    font-size: 16px;
    font-weight: 400;
    line-height: 25px;
    color: #000000;
    margin-bottom: 28px;
}
.member-tab-list ul li ol, .div_card_info_viproom ol {
    margin-bottom: 0;
    padding-left: 16px;
}
.member-tab-list ul li ol li, .div_card_info_viproom ol li {
    margin-bottom: 0;
    list-style-type: disc;
}
.member-tab-list ul li ol li a {
    color: var(--header_link_hover_color, #d0343d);
    text-decoration: underline;
}
@media (max-width: 768px) {
    .member-tab-list ul li {
        font-size: 14px;
        font-weight: 400;
        line-height: 21px;
        color: #000000;
        margin-bottom: 20px;
    }
}
.member-tab-list table tr td {
    vertical-align: top;
}
.member-tab-list table tr td.w_60 img{
	width:45px!important;
	height:45px!important;
}
.member-list-title {
    font-size: 18px;
    font-weight: 600;
}
.block-list {
    border: 1px solid #d9d9d9;
    background: #f5f5f5;
    padding: 16px 22px;
}
.block-list ul {
    list-style-position: outside;
    padding-left: 16px;
}
.block-list ul li {
    list-style-type: decimal;
    font-size: 14px;
    line-height: 24px;
}
.block-list ul li a {
    text-decoration: underline;
    color: var(--header_link_hover_color, #d0343d);
}

/* MEMBER Search */
.search-bg {
    background: #000000;
    padding: 50px 76px;
    color: #ffffff;
}
@media (max-width: 768px) {
    .search-bg {
        padding: 18px 6px 22px;
    }
}
.search-block {
    padding-top: 28px;
    padding-bottom: 30px;
    border-bottom: 1px solid #ffffff;
    position: relative;
}
.search-block:before {
    position: absolute;
    content: "";
    left: 0;
    bottom: -5px;
    background: #ffffff;
    height: 5px;
    width: 140px;
}
.search-block ul {
    list-style: none;
}
.search-block ul li {
    display: inline-block;
    border-right: 1px solid #ffffff;
    font-size: 16px;
    line-height: 22px;
}
@media (max-width: 768px) {
    .search-block ul li {
        font-size: 14px;
        line-height: 19px;
    }
}
.search-block ul li:last-child {
    border-right: 0;
}
.search-block ul li a {
    color: #ffffff;
    padding: 0 20px;
}
.search-block ul li a:hover {
    color: #ffffff;
}
.search-block i {
    color: #ffffff;
}
.search-title {
    text-decoration: underline;
    padding: 20px;
    width: 180px;
    padding: 0;
}
@media (max-width: 768px) {
    .search-title {
        padding-bottom: 14px;
        width: 100%;
    }
    .search-block ul li a.p-l-0 {
        padding-left: 0;
    }
}
.brand_title {
    margin-top:40px;
}
.brand_title a {
    font-size: 16px;
    color: #6c6c6c;
    font-weight: 400;
    margin-bottom: 10px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    line-height: 1.3;
}
.brand-core {
    height: 230px;
    width: 230px;
    background: url("../../img/brand-03.jpg") center center / cover no-repeat;
    margin: auto;
    max-width: 100%;
}
@media (max-width: 768px) {
    .brand-core {
        height: 130px;
        width: 130px;
        max-width: 100%;
    }
}
.brand-name {
    font-size: 20px;
    line-height: 24px;
    color: #000000;
    margin-top: 20px;
    font-weight: 300;
}
@media (max-width: 768px) {
    .brand-name {
        font-size: 16px;
        line-height: 24px;
        color: #000000;
        margin-top: 20px;
        font-weight: 300;
    }
}
.brand-location {
    font-size: 16px;
    font-weight: 700;
    padding: 24px 0 28px;
    border-bottom: 1px solid #000000;
    position: relative;
}
.brand-location.nb {
    color: var(--header_link_hover_color, #d0343d);
    font-size: 16px;
    font-weight: 700;
    padding: 24px 0 28px;
    border-bottom: 0;
}
.brand-location ul {
    list-style: none;
}
.brand-location ul li {
    line-height: 30px;
    font-size: 16px;
    font-weight: 700;
    color: var(--header_link_hover_color, #d0343d);
}
.brand-location::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    background: #000000;
    height: 7px;
    width: 70px;
}
.brand-location.nb::after {
    display: none;
}
.brand-more {
    font-size: 16px;
    font-weight: 500;
    color: #a0a1a3;
    text-align: right;
    margin-top: 13px;
}
@media (max-width: 768px) {
    .brand-more {
        font-size: 14px;
        font-weight: 500;
    }
}

/* MEMBER brand */
.brand-title {
    background: #000000;
    color: #ffffff;
    font-size: 14px;
    font-weight: 400;
    padding: 11px 10px 11px 30px;
    position: relative;
    width: fit-content;
}
.brand-title:before {
    content: "";
    position: absolute;
    top: 22px;
    left: 0;
    background: #ffffff;
    width: 20px;
    height: 1px;
}
.brand-info {
    border-bottom: 1px solid #000000;
    position: relative;
}
.brand-phone {
    padding: 9px 0 13px;
}
.brand-phone::after {
    content: "";
    position: absolute;
    bottom: -4px;
    left: 0;
    background: #000000;
    height: 7px;
    width: 100px;
}
.brand-phone ul {
    list-style: none;
}
.brand-phone ul li {
    font-size: 18px;
    font-weight: 400;
    line-height: 24px;
}
.brand-booking {
    padding-bottom: 16px;
    text-align: right;
}
.brand-booking a {
    text-decoration: underline;
}
.brand-category {
    margin-top: 30px;
    text-align: center;
}
.brand-category ul {
    list-style: none;
}
.brand-category ul li {
    border: 1px solid #000000;
    color: #000000;
    border-radius: 30px;
    font-size: 18px;
    font-weight: 400;
    padding: 12px 60px;
    display: inline-block;
}
.brand-category ul li.active {
    border: 1px solid var(--header_link_hover_color, #d0343d);
    color: var(--header_link_hover_color, #d0343d);
}
@media (max-width: 786px) {
    .brand-category ul li {
        border-radius: 30px;
        font-size: 14px;
        padding: 8px 30px;
    }
}
.no-brand-stats{
	min-height:50px;
}

/* STORE INDEX */
.hide {
    display: none;
}
.text-pre-wrap {
    white-space: pre-wrap;
}
.about-w {
    margin-top: 52px;
    position: relative;
}
.about-m {
    position: relative;
}
.heading-hero {
    font-family: "League Spartan";
    margin-bottom: 50px;
    font-size: 60px;
    font-weight: 400;
    line-height: 60px;
}
.heading-hero span {
    margin-bottom: 50px;
    text-align: center;
    font-size: 28px;
    line-height: 38px;
    font-weight: 400;
}
@media (max-width: 768px) {
    .heading-hero {
        margin-bottom: 0;
        font-size: 40px;
        line-height: 100px;
    }
    .heading-hero span {
        margin-bottom: 50px;
        text-align: center;
        font-size: 18px;
        line-height: 24px;
        font-weight: 400;
    }
}
.about-inner {
    padding-left: 50px;
}
.about-inner.top {
    background: #ffffff; /* Old browsers */
    background: -moz-linear-gradient(top, #ffffff 86%, #d0343d 86%, #d0343d 86%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top, #ffffff 86%, #d0343d 86%, #d0343d 86%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, #ffffff 86%, #d0343d 86%, #d0343d 86%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#D0343D',GradientType=0 ); /* IE6-9 */
    color: #828282;
    font-size: 14px;
    font-weight: 400;
    line-height: 55px;
    padding-bottom: 50px;
}
@media (max-width: 991px) {
    .about-inner.top {
        padding-top: 50px;
        padding-bottom: 25px;
    }
}
.about-inner.top .row > [class*="col-"] {
    padding-left: 20px;
    padding-top: 50px;
}
.about-inner.top .row > [class*="col-"] p {
    padding: 0 20px;
    line-height: 200%;
}
.about-inner.bottom {
    background: var(--header_link_hover_color, #d0343d);
    color: #fff;
    margin-top: -1px;
    text-align: justify;
    padding-bottom: 50px;
    padding-right: 20px;
    position: relative;
}
@media (max-width: 991px) {
    .about-inner.bottom {
        padding-bottom: 25px;
        padding-right: 0;
        position: relative;
        z-index: 1;
    }
}
.about-inner.bottom .info-col {
    padding-top: 30px;
    padding-left: 50px;
}
.store-table {
    border: 0;
    color: #ffffff;
}
.store-table i {
    font-size: 40px;
}
.about-inner.bottom .info-col .kv-hero .store-table.recruit > tbody > tr > td,
.about-inner.bottom .info-col .store-table.contact > tbody > tr > td,
.kv-hero .about-inner.bottom .info-col .store-table.recruit > tbody > tr > td {
    padding: 40px 20px;
    color: #ffffff;
}
.about-inner.bottom .info-col .kv-hero .store-table.recruit > tbody > tr:first-child td,
.about-inner.bottom .info-col .store-table.contact > tbody > tr:first-child td,
.kv-hero .about-inner.bottom .info-col .store-table.recruit > tbody > tr:first-child td {
    padding: 40px 20px;
    border-bottom: 1px solid #ffffff;
    vertical-align: top;
    width: 50%;
}
.about-inner.bottom .info-col .kv-hero .store-table.recruit > tbody > tr:first-child td:first-child,
.about-inner.bottom .info-col .store-table.contact > tbody > tr:first-child td:first-child {
    border-right: 1px solid #ffffff;
}
.about-inner.bottom .info-col .kv-hero .store-table.recruit > tbody > tr:last-child td:last-child,
.about-inner.bottom .info-col .store-table.contact > tbody > tr:last-child td:last-child {
    border-left: 1px solid #ffffff;
}
.store-table.v2 > tbody > tr > td,
.store-table.sub > tbody > tr > td {
    padding: 5px;
    text-align: left;
    border: 1px solid transparent !important;
    color: #ffffff;
}
.about-inner.bottom .info-col .store-table.time td.icons {
    width: 100px;
}
.about-inner.bottom .info-col .store-table.time th.depart {
    width: 60px;
}
.about-inner.bottom .info-col .store-table.time th.depart span {
    display: block;
    position: relative;
}
.about-w .store-kv {
    position: absolute;
    width: 55%;
    left: 0;
    height: 100%;
    padding-left: 100px;
    top: -52px;
    color: #fff;
}
.store-kv .inner {
    max-width: 98%;
    display: inline-block;
    vertical-align: middle;
    position: relative;
}
@media (min-width: 1400px) {
    .store-kv .inner {
        max-width: 85%;
    }
}
@media (max-width: 991px) {
    .about-m .store-kv {
        width: 100%;
        text-align: right;
    }
    .store-kv .inner {
        width: 85%;
        text-align: right;
        display: inline-block;
        vertical-align: middle;
        position: relative;
    }
    .about-inner {
        padding: 0;
    }
}
.store-kv .inner:after {
    content: "";
    width: 400px;
    height: 400px;
    border: 2px solid var(--header_link_hover_color, #d0343d);
    left: -56px;
    top: 54%;
    margin-top: -200px;
    position: absolute;
    z-index: 1;
}
@media (max-width: 991px) {
    .store-kv .inner:after {
        content: "";
        width: 100%;
        height: 600px;
        border: 2px solid var(--header_link_hover_color, #d0343d);
        left: -35px;
        top: 50%;
        margin-top: -200px;
        position: absolute;
        z-index: 1;
    }
}
@media (max-width: 441px) {
    .store-kv .inner:after {
        left: -25px;
        top: 50%;
        margin-top: -150px;
        position: absolute;
        z-index: 1;
    }
}
.store-kv img {
    width: 100%;
    display: inline-block;
    z-index: 2;
    position: relative;
}
.about-inner.bottom .name {
    font-family: "League Spartan";
    position: absolute;
    left: 101px;
    font-size: 23px;
    z-index: 2;
    letter-spacing: 5px;
    margin-left: -53px;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
    width: 400px;
    text-align: end;
}
@media (max-width: 991px) {
    .inner .name {
        font-family: "League Spartan";
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: 0 50%;
        -moz-transform-origin: 0 50%;
        -ms-transform-origin: 0 50%;
        -o-transform-origin: 0 50%;
        transform-origin: 0 50%;
        position: absolute;
        bottom: 140px;
        left: -5px;
        font-size: 22px;
        z-index: 2;
        letter-spacing: 5px;
        margin-left: -53px;
        color: var(--header_link_hover_color, #d0343d);
    }
}
@media (max-width: 768px) {
    .inner .name {
        position: absolute;
        left: -5px;
        font-size: 15px;
    }
}
@media (max-width: 441px) {
    .inner .name {
        position: absolute;
        bottom: 25px;
        left: 17px;
        font-size: 15px;
        z-index: 2;
        letter-spacing: 5px;
        margin-left: -53px;
        text-align: right;
        color: var(--header_link_hover_color, #d0343d);
    }
}
.store-kv:before {
    content: "";
    vertical-align: middle;
    display: inline-block;
}
.access {
    padding: 50px 0;
}
@media (min-width: 1279px) {
    .store-kv .name {
        margin-bottom: -108px;
    }
}
.access-tab {
    font-size: 45px;
    text-align: center;
    position: relative;
    height: 68px;
    margin-bottom: 50px;
}
.access-tab:before {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px;
    background-color: #eee;
    left: 0;
    top: 50%;
    display: inline-block;
    z-index: 0;
}
.access-tab > span {
    cursor: pointer;
    background-color: #eee;
    width: 68px;
    height: 68px;
    display: inline-block;
    text-align: center;
    -webkit-border-radius: 34px;
    -moz-border-radius: 34px;
    border-radius: 34px;
    position: relative;
    z-index: 1;
    -webkit-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    transition: all 0.2s ease;
}
.access-tab > span:before {
    content: "";
    position: absolute;
    width: 68px;
    height: 68px;
    left: 0;
    top: 0;
    display: inline-block;
    -webkit-border-radius: 34px;
    -moz-border-radius: 34px;
    border-radius: 34px;
    border: 1px solid #eee;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    transition: all 0.4s ease;
}
.access-tab > span i:before {
    margin-top: 10px;
}
.access-tab > span i {
    font-size: 40px;
}
.access-tab > span:first-child {
    position: absolute;
    left: 0;
}
.access-tab > span:last-child {
    position: absolute;
    right: 0;
}
.access-tab > span.active,
.access-tab > span:hover {
    background: var(--header_link_hover_color, #d0343d);
    color: #fff;
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.access-tab > span.active:before,
.access-tab > span:hover:before {
    border: 1px solid var(--header_link_hover_color, #d0343d);
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -ms-transform: scale(1.1);
    -o-transform: scale(1.1);
    transform: scale(1.1);
}
.access-tab-content {
    margin-bottom: 40px;
}
.access-tab-content .active {
    display: block;
}
.access-map-wrap {
    position: relative;
    padding: 0 20px 20px 0;
}
.access-map-wrap:after {
    width: 80%;
    height: 2px;
}
.access-map-wrap:after,
.access-map-wrap:before {
    content: "";
    position: absolute;
    background: var(--header_link_hover_color, #d0343d);
    bottom: 0;
    right: 0;
}
.access-map-wrap:before {
    width: 2px;
    height: 80%;
}
.store-info-list {
    margin-top: 10px;
}
.store-info-list ul {
    list-style: none;
}
.store-info-list ul li {
    font-size: 12px;
    display: table-cell;
    color: #ffffff;
    border-right: 1px solid #ffffff;
    padding: 0 15px 0 10px;
    text-align: center;
    width: 26%;
    vertical-align: middle;
}
.store-info-list ul li:first-child {
    padding-left: 0;
}
.store-info-list ul li:last-child {
    padding-right: 0;
}
.store-info-list ul li i {
    display: block;
    font-size: 20px;
    padding: 10px 0;
}
.store-info-list ul li:last-child {
    border: 0;
}
.branch-link .inner {
    margin-top: 30px;
    background-color: #f2f2f2;
    padding: 30px;
}
.branch-link .inner .store-table td.area {
    width: 40px;
    vertical-align: top;
    padding-right: 40px;
    border-right: 1px rgba(99, 99, 99, 0.1) solid;
}
.branch-link .inner .store-table td.branch {
    padding-left: 40px;
    width: 100%;
}
.branch-link .inner .area-name {
    color: #858585;
    font-size: 16px;
    margin: 0;
    font-weight: 100;
    position: relative;
}
.branch-link .inner .area-name .en {
    font-size: 11px;
    left: 0;
    margin-left: 3px;
    top: 0;
    margin-top: 18px;
    width: 55px;
    height: 24px;
    position: absolute;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.branch-link .inner .row {
    margin: 0 -10px 20px;
}
.branch-link .inner [class*="col-"] {
    padding: 8px 10px;
    font-size: 14px;
}
.branch-link .inner [class*="col-"] a {
    display: block;
    position: relative;
    color: #858585;
    -webkit-transform-origin: 0 50%;
    -moz-transform-origin: 0 50%;
    -ms-transform-origin: 0 50%;
    -o-transform-origin: 0 50%;
    transform-origin: 0 50%;
    -webkit-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    transition: all 0.3s ease;
}
.branch-link .inner [class*="col-"] a:hover {
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -ms-transform: scale(1.2);
    -o-transform: scale(1.2);
    transform: scale(1.2);
}
.branch-link .inner [class*="col-"] a.active,
.branch-link .inner [class*="col-"] a:hover {
    color: #d0343d;
}
@media (max-width: 768px) {
    .branch-link .inner .area-name {
        color: #858585;
        display: block;
        line-height: 19px;
        border-bottom: 1px solid #cccccc;
        margin-bottom: 11px;
        font-size: 18px;
        font-weight: 500;
    }
    .branch-link .inner .area-name .en {
        color: #858585;
        position: relative;
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    .branch-link .inner .row {
        margin: 0 0 20px;
    }
    .branch-link .inner [class*="col-"] {
        padding: 12px 0;
        font-size: 16px;
        font-weight: 500;
    }
    .branch-link .inner [class*="col-"] a:hover {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -ms-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
    }
}

.story {
    padding: 10px 0 60px;
    background: url(../../img/story-bg.webp) 50% 50% no-repeat;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    color: #ffffff;
    text-align: center;
}
.story-img {
    width: 100px;
    height: 100px;
    position: relative;
    margin: auto;
}
.story-img.v2 {
    width: 100px;
    height: 100px;
    position: relative;
    margin: auto;
}
.story-img.v2:before,
.story-img.v2:after {
    display:none;
}
.story-img img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    position: relative;
    z-index: 2;
}
.story-img:before {
    content: "";
    position: absolute;
    background: #ffffff;
    top: -8px;
    right: -8px;
    width: 80px;
    height: 1px;
    opacity: 0.4;
}
.story-img:after {
    content: "";
    position: absolute;
    background: #ffffff;
    top: -7px;
    right: -8px;
    width: 1px;
    height: 100px;
    opacity: 0.4;
}
.heading-underline {
    margin: 30px 0 70px;
    padding: 20px;
    position: relative;
    color: #ffffff;
}
.heading-underline:after {
    content: "";
    width: 70px;
    background: #ffffff;
    height: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    margin-left: -35px;
}
.story-line {
    height: 1px;
    background-color: #fff;
    position: relative;
    margin-bottom: 20px;
}
.story-line:before {
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -6px;
    margin-top: -6px;
    background-color: #fff;
    -webkit-border-radius: 12px;
    -moz-border-radius: 12px;
    border-radius: 12px;
}
.year {
    color: #ffffff;
    padding: 10px 0;
    font-size: 16px;
}
.story-title {
    color: #ffffff;
    padding: 20px 0;
    font-size: 20px;
}
.story-des {
    color: #ffffff;
    max-width: 700px;
    margin: auto;
    font-size: 14px;
}
@media (max-width: 768px) {
    .story-des {
        width: 100%;
        max-width: 100%;
    }
}

/* Side Vertical Menu */
.hero-bg {
    background: #f7f7f7;
    padding: 25px 0;
    width: 100%;
}
.menu-right-fixed {
    position: fixed;
    right: 0;
    top: 80px;
    z-index: 9;
}
.menu-left-fixed {
    position: fixed;
    z-index: 999;
    left: 0;
    top: 80px;
    z-index: 9;
}
.hero-menu-right {
    font-family: "League Spartan";
    position: absolute;
    right: 0;
    background: var(--header_link_hover_color, #d0343d);
    color: #ffffff;
    width: 65px;
    height: 673px;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 99;
    padding-top: 80px;
}
.hero-menu-left {
    font-family: "League Spartan";
    position: fixed;
    left: 0;
    background: var(--header_link_hover_color, #d0343d);
    color: #ffffff;
    width: 65px;
    height: 673px;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 99;
    padding-top: 80px;
}
.hero-menu-right.height-s {
    position: absolute;
    right: 0;
    background: var(--header_link_hover_color, #d0343d);
    color: #ffffff;
    width: 65px;
    height: 416px;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 99;
    padding-top: 80px;
    min-height: 500px;
}
.hero-menu-left.height-s {
    position: absolute;
    left: 0;
    background: var(--header_link_hover_color, #d0343d);
    color: #ffffff;
    width: 65px;
    text-align: center;
    font-size: 20px;
    font-weight: 300;
    display: flex;
    align-items: center;
    cursor: pointer;
    z-index: 99;
    padding-top: 80px;
}
.hero-menu-text {
    background: rgba(255, 255, 255, 0.5);
    position: absolute;
    right: 0;
    z-index: 99;
    top: 500px;
    height: 300px;
    width: 65px;
    text-align: center;
    height: 100vw;
}
.hero-menu-text span {
    font-family: "League Spartan";
    color: var(--header_link_hover_color, #d0343d);
    writing-mode: vertical-rl;
    font-size: 28px;
    font-weight: 300;
    padding-top: 30px;
}
.hero-menu-right div,
.hero-menu-left div {
    display: grid;
    margin: auto;
    z-index: 99;
}
.hero-menu-right i,
.hero-menu-left i {
    font-size: 30px;
    font-weight: 500;
    line-height: 0;
}

/* Element */
.block-content {
    padding-top: 64px;
}
.block-content:empty {
    display:none;
}
.block-content.large {
    padding-top: 124px;
}
.block-content-first {
    padding-top: 46px;
}
.block-content-first-lang {
    padding-top: 30px;
    margin-bottom: 0px;
}
.block-content-tb {
    padding-top: 64px;
    padding-bottom: 64px;
}
@media (max-width: 991px) {
    .block-content.large {
        padding-top: 47px;
    }
    .block-content-first {
        padding-top: 20px;
    }
    .block-content-first-lang {
        padding-top: 20px;
    }
}
@media (max-width: 767px) {
.block-content-first {
        padding-top: 0;
    }
.block-content.mobile-pt0 {
        padding-top: 0;
    }
.block-content-tb {
        padding-top: 40px;
        padding-bottom: 40px;
    }
}
.tab-menu {
    border-bottom: 1px solid #000000;
    height: 35px;
}
.tab-menu li {
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    margin-bottom: 12px;
}
@media (max-width: 768px) {
    .tab-menu li {
        font-size: 16px;
        margin-bottom: 7px;
    }
}
.tab-menu li a {
    padding: 0 26px;
    text-decoration: none;
    border-right: 1px solid #000000;
}
.tab-menu li a.active {
    color: #383838;
    position: relative;
}
.tab-menu li a.active:after {
    position: absolute;
    content: "";
    bottom: -16px;
    left: 0;
    background: #000000;
    height: 5px;
    width: 100%;
}
@media (max-width: 768px) {
    .tab-menu li a.active {
        padding: 0 26px 5px;
    }
}
.tab-menu-short {
    border-bottom: 1px solid #cccccc;
    float: right;
}
.tab-menu-short ul {
    list-style: none;
}
.tab-menu-short ul li {
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
}
.tab-menu-short ul li a {
    border-right: 1px solid #000000;
    padding: 0 26px;
}
.tab-menu-short ul li.active {
    border-bottom: 4px solid #000000;
    padding-bottom: 12px;
}
@media (max-width: 768px) {
    .tab-menu-short ul li a {
        padding: 0 10px;
    }
    .tab-menu-short {
        justify-content: center;
        width: fit-content;
        margin: 20px auto 0;
        float: none;
    }
}
.tab-menu-short ul li,
.tab-menu-short ul li.active {
    font-size: 14px;
    padding-bottom: 6px;
}

.tab-sec-menu {
    margin-top: 20px;
}
@media (max-width: 768px) {
    .tab-sec-menu {
        margin-top: 12px;
    }
}
.tab-sec-menu ul {
    list-style: none;
}
.tab-sec-menu ul li {
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    padding: 0 19px;
    border: 0;
    border-left: 1px solid #000000;
}
.tab-sec-menu ul li.active a {
    color: var(--header_link_hover_color, #d0343d);
}
@media (max-width: 768px) {
    .tab-sec-menu ul li {
        font-size: 14px;
        padding: 0 11px;
    }
}
.tab-sec-menu ul li:last-child {
    border-right: 1px solid #000000;
}
.tab-sec-menu ul li.active {
    font-size: 16px;
    font-weight: 400;
    display: inline-block;
    color: var(--header_link_hover_color, #d0343d);
}
.owl-theme .owl-dots .owl-dot span {
    width: 10px !important;
    height: 5px !important;
    margin: 5px 10px;
    background: #d9d9d9 !important;
    border-radius: 0 !important;
}
.owl-theme .owl-dots .owl-dot.active span,
.owl-theme .owl-dots .owl-dot:hover span {
    width: 15px !important;
    height: 5px !important;
    background: var(--header_link_hover_color, #d0343d) !important;
}
.owl-theme .owl-nav.disabled + .owl-dots {
    text-align: right;
}

/* Scrolltop */
.material-scrolltop::before {
    content: "\e925";
    font-family: "icomoon" !important;
    color: #ffffff;
}
/*.material-scrolltop.reveal.ns*/
.material-scrolltop.reveal.ns {
    bottom: 10px;
    background: black !important;
    border-radius: 0px;
    border: none;
}
@media (max-width: 991px) {
    .material-scrolltop.reveal.ns {
        bottom: 10px !important;
        background: black !important;
        border-radius: 0px;
        border: none;
    }
}

/*Calendar_picker*/
.ui-widget.ui-widget-content {
    border: 0;
    width: 100%;
}
.ui-widget-header {
    background: #ffffff;
    border: 0;
    font-weight: 600;
    font-size: 32px;
}
.ui-state-default,
.ui-widget-content .ui-state-default,
.ui-widget-header .ui-state-default,
.ui-button {
    border: 0;
    background: transparent;
    font-weight: 400;
    color: #000000;
    font-size: 18px;
    line-height: 40px;
    text-align: center;
    width: 40px;
    margin: auto;
}
.ui-state-active,
.ui-widget-content .ui-state-active {
    color: #ffffff;
    background: #d0343d;
    border-radius: 30px;
    padding: 0;
    width: 40px;
    margin: auto;
}
.ui-datepicker table {
    border-top: 1px solid #cccccc;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    box-shadow: 0px 3px 4px rgb(0 0 0 / 20%);
    margin-bottom: 35px;
}
.o-f-y-h {
    overflow-y: hidden;
}
/*Modal Content*/
@media (max-width: 576px) {
    .modal-content {
        width: 95%;
        margin: auto;
    }
}
.modal-search-title {
    color: #858585;
    font-weight: 400;
    font-size: 18px;
    text-decoration: underline;
    margin: 31px 0 23px;
    padding-left: 15px;
}
.modal-list a {
    font-weight: 400;
    font-size: 18px;
    color: #000000;
    float: left;
    border-right: 1px solid #000000;
    padding: 0 15px;
    margin-bottom: 20px;
}
.modal-list a:hover {
    color: #d0343d;
}
.modal.show .modal-dialog {
    transform: translate(0, 50px);
}

/*Select Style*/
.header-select,
.header-select select,
.header-select i {
    color: #666666;
}
.select-box {
    position: relative;
    display: block;
    font-size: 16px;
    color: #383838;
    width: 100%;
}

.select-box__current {
    position: relative;
    border: 1px solid #cccccc;
    color: #383838;
    padding: 11px 15px;
    box-shadow: 0 2px 2px 2px rgb(0 0 0 / 3%);
    background: url(../../img/arrow-down.webp) no-repeat scroll 95% center #ffffff;
    background-size: 15px 15px;
    cursor: pointer;
    outline: none;
}
.select-box__current:focus + .select-box__list {
    opacity: 1;
    -webkit-animation-name: none;
    animation-name: none;
}
.select-box__current:focus + .select-box__list .select-box__option {
    cursor: pointer;
}
.select-box__value {
    display: flex;
}
.select-box__input {
    display: none;
}
.select-box__input:checked + .select-box__input-text {
    display: block;
}
.select-box__input-text {
    display: none;
    margin: 0;
    padding-right: 15px;
}
.select-box__list {
    z-index: 2;
    width: 100%;
    border: 1px solid #cccccc;
    border-top: 0;
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
    position: absolute;
    text-align: left;
    padding: 10px 0 15px;
    list-style: none;
    color: #383838;
    background: #f3f3f3;
    opacity: 0;
    -webkit-animation-name: HideList;
    animation-name: HideList;
    -webkit-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-delay: 0.5s;
    animation-delay: 0.5s;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
    box-shadow: 0 15px 30px -10px rgba(0, 0, 0, 0.1);
}
.select-box__option {
    width: 100%;
    font-size: 16px;
    text-align: left;
    padding: 1px 15px;
}
.select-box__option:hover,
.select-box__option:focus {
    color: #ffffff;
    background: #4c95f5;
}

@-webkit-keyframes HideList {
    from {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    to {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
}

@keyframes HideList {
    from {
        -webkit-transform: scaleY(1);
        transform: scaleY(1);
    }
    to {
        -webkit-transform: scaleY(0);
        transform: scaleY(0);
    }
}

/* Plug.min.css 針對skm online四個並列商品箭頭無法對齊*/
.max-height460{
	max-height:460px;
}
@media(max-width:768px){
.max-height460{
	max-height:475px;
}
}
@media(max-width:576px){
.max-height460{
	max-height:100%;
}
}
@media(max-width:991px){
	.max-height460 .hero-slider__arrow{
	top:40%;
} 
}

/* Other */
.index-banner.hero-slider__arrow{
	background:transparent;
	box-shadow:none;
    border: 0;
    width:60px;
    height:60px!important;
    
}
.index-banner.hero-slider__arrow i{
	color:#999999;
	font-size:40px;
}
.index-banner--left{
	left:-6px;
}
.index-banner--right{
	right:0;
}
.index-banner.hero-slider__arrow{
	top:46%;
}
.large-arrow{
	width:32px;
	height:40px;
}
@media(max-width:576px){
.m-p-0{
	padding:0;
}	
}

@media (min-width: 1199px) {
    .md-p0 {
        padding-right: 0;
    }
}
.date-color {
    color: #757373;
}
.date-color:hover {
    color: 1px solid var(--header_link_hover_color, #d0343d);
}
.side-select {
    float: right;
    width: 170px;
}
@media (max-width: 991px) {
    .side-select {
        float: none;
        margin: auto;
    }
}
.letter-s3 {
    letter-spacing: 3px;
}
.cursor-opinter {
    cursor: pointer;
}
.b-0 {
    border: 0 !important;
}
.b-r-0 {
    border-right: 0 !important;
}
.text-justify {
    text-align: justify;
}
.vertical-baseline {
    vertical-align: baseline;
}
.vertical-bottom {
    vertical-align: bottom;
}
.vertical-top {
    vertical-align: text-top;
}
@media(max-width:481px){
.brand_large.w260{
	width:260px;
	height:260px;
	object-fit:cover;
	margin:10px auto;
}	
}

/* Width & Height */
.w_1 {
    width: 1px;
}
.w_15 {
    width: 15px;
}
.w_20 {
    width: 20px;
}
.w_40 {
    width: 40px;
}
.w_50 {
    width: 50px;
}
.w_60 {
    width: 60px;
}

/* Font-Size */
.font14 {
    font-size: 14px;
}
.font16 {
    font-size: 16px;
}
.font20 {
    font-size: 20px;
}
.font30 {
    font-size: 30px;
}
.font40 {
    font-size: 40px;
}
.font45 {
    font-size: 45px;
}

/*===== Grid Layout =====*/
.grid-nowrap-select-1 {
    grid-template-columns: repeat(1, minmax(calc(50% - 10px), 1fr) auto);
    display: grid;
    gap: 10px 10px;
}
.grid-container {
    display: grid;
    row-gap: 40px !important;
}
.grid-column-all {
    grid-column: 1/-1;
}
.grid-column-all-1 {
    grid-column: 2/-1;
}
.grid-product-1,
.grid-nowrap-1 {
    display: grid;
    grid-template-columns: repeat(1, 1fr auto);
    grid-column-gap: 5px;
}
.grid-product-2 {
    display: grid;
    grid-template-columns: repeat(1, 1fr auto auto);
    grid-column-gap: 5px;
}
.grid-xxs-1,
.grid-xxs-2,
.grid-xxs-3,
.grid-xxs-4,
.grid-xs-1,
.grid-xs-2,
.grid-xs-3,
.grid-xs-4,
.grid-sm-1,
.grid-sm-2,
.grid-sm-3,
.grid-sm-4,
.grid-md-1,
.grid-md-2,
.grid-md-3,
.grid-md-4,
.grid-md-5,
.grid-lg-1,
.grid-lg-2,
.grid-lg-3,
.grid-lg-4,
.grid-lg-5,
.grid-xl-1,
.grid-xl-2,
.grid-xl-3,
.grid-xl-4,
.grid-xl-5,
.grid-xl-6 {
    display: grid;
    grid-gap: 10px 25px;
}
@media (max-width: 575px) {
    .grid-xxs-1,
    .grid-xxs-2,
    .grid-xxs-3,
    .grid-xxs-4,
    .grid-xs-1,
    .grid-xs-2,
    .grid-xs-3,
    .grid-xs-4,
    .grid-sm-1,
    .grid-sm-2,
    .grid-sm-3,
    .grid-sm-4,
    .grid-md-1,
    .grid-md-2,
    .grid-md-3,
    .grid-md-4,
    .grid-md-5,
    .grid-lg-1,
    .grid-lg-2,
    .grid-lg-3,
    .grid-lg-4,
    .grid-lg-5,
    .grid-xl-1,
    .grid-xl-2,
    .grid-xl-3,
    .grid-xl-4,
    .grid-xl-5,
    .grid-xl-6 {
        display: grid;
        grid-gap: 10px 25px;
    }
}
@media (max-width: 768px) {
    .grid-xxs-1,
    .grid-xxs-2,
    .grid-xxs-3,
    .grid-xxs-4,
    .grid-xs-1,
    .grid-xs-2,
    .grid-xs-3,
    .grid-xs-4,
    .grid-sm-1,
    .grid-sm-2,
    .grid-sm-3,
    .grid-sm-4,
    .grid-md-1,
    .grid-md-2,
    .grid-md-3,
    .grid-md-4,
    .grid-md-5,
    .grid-lg-1,
    .grid-lg-2,
    .grid-lg-3,
    .grid-lg-4,
    .grid-lg-5,
    .grid-xl-1,
    .grid-xl-2,
    .grid-xl-3,
    .grid-xl-4,
    .grid-xl-5,
    .grid-xl-6 {
        display: grid;
        grid-gap: 10px 25px;
    }
}
@media (max-width: 991px) {
    .grid-xxs-1,
    .grid-xxs-2,
    .grid-xxs-3,
    .grid-xxs-4,
    .grid-xs-1,
    .grid-xs-2,
    .grid-xs-3,
    .grid-xs-4,
    .grid-sm-1,
    .grid-sm-2,
    .grid-sm-3,
    .grid-sm-4,
    .grid-md-1,
    .grid-md-2,
    .grid-md-3,
    .grid-md-4,
    .grid-md-5,
    .grid-lg-1,
    .grid-lg-2,
    .grid-lg-3,
    .grid-lg-4,
    .grid-lg-5,
    .grid-xl-1,
    .grid-xl-2,
    .grid-xl-3,
    .grid-xl-4,
    .grid-xl-5,
    .grid-xl-6 {
        display: grid;
        grid-gap: 10px 25px;
    }
}
.grid-xxs-1-fit,
.grid-xxs-2-fit,
.grid-xxs-3-fit,
.grid-xs-1-fit,
.grid-xs-2-fit,
.grid-xs-3-fit,
.grid-sm-1-fit,
.grid-sm-2-fit,
.grid-sm-3-fit,
.grid-md-1-fit,
.grid-md-2-fit,
.grid-md-3-fit,
.grid-lg-1-fit,
.grid-lg-2-fit,
.grid-lg-3-fit,
.grid-xl-1-fit,
.grid-xl-2-fit,
.grid-xl-3-fit {
    display: grid;
}

.grid-xxs-1 {
    grid-template-columns: repeat(1, 1fr);
}
.grid-xxs-2 {
    grid-template-columns: repeat(2, 1fr);
}
.grid-xxs-3 {
    grid-template-columns: repeat(3, 1fr);
}
.grid-xxs-4 {
    grid-template-columns: repeat(4, 1fr);
}
.grid-xxs-1-fit {
    grid-template-columns: repeat(1, auto 1fr);
}
.grid-xxs-2-fit {
    grid-template-columns: repeat(2, auto 1fr);
}
.grid-xxs-3-fit {
    grid-template-columns: repeat(3, auto 1fr);
}
@media screen and (min-width: 320px) and (max-width: 392px) {
    .grid-area .grid-xxs-2 {
        grid-template-columns: repeat(auto-fit, minmax(127px, 1fr)) !important;
    }
}
@media (min-width: 576px) {
    .grid-xs-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-xs-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-xs-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-xs-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-xs-1-fit {
        grid-template-columns: repeat(1, auto 1fr);
    }
    .grid-xs-2-fit {
        grid-template-columns: repeat(2, auto 1fr);
    }
    .grid-xs-3-fit {
        grid-template-columns: repeat(3, auto 1fr);
    }
}
@media (min-width: 768px) {
    .grid-sm-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-sm-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-sm-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-sm-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-sm-1-fit {
        grid-template-columns: repeat(1, auto 1fr);
    }
    .grid-sm-2-fit {
        grid-template-columns: repeat(2, auto 1fr);
    }
    .grid-sm-3-fit {
        grid-template-columns: repeat(3, auto 1fr);
    }
}
@media (min-width: 992px) {
    .grid-md-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-md-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-md-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-md-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-md-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .grid-md-1-fit {
        grid-template-columns: repeat(1, auto 1fr);
    }
    .grid-md-2-fit {
        grid-template-columns: repeat(2, auto 1fr);
    }
    .grid-md-3-fit {
        grid-template-columns: repeat(3, auto 1fr);
    }
}
@media (min-width: 1200px) {
    .grid-lg-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-lg-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-lg-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-lg-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-lg-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .grid-lg-1-fit {
        grid-template-columns: repeat(1, auto 1fr);
    }
    .grid-lg-2-fit {
        grid-template-columns: repeat(2, auto 1fr);
    }
    .grid-lg-3-fit {
        grid-template-columns: repeat(3, auto 1fr);
    }
}
@media (min-width: 1480px) {
    .grid-xl-1 {
        grid-template-columns: repeat(1, 1fr);
    }
    .grid-xl-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-xl-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    .grid-xl-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    .grid-xl-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    .grid-xl-6 {
        grid-template-columns: repeat(6, 1fr);
    }
    .grid-xl-1-fit {
        grid-template-columns: repeat(1, auto 1fr);
    }
    .grid-xl-2-fit {
        grid-template-columns: repeat(2, auto 1fr);
    }
    .grid-xl-3-fit {
        grid-template-columns: repeat(3, auto 1fr);
    }
}
.align-items-end{
	align-items: end;
}

/* * ==========================================
* 頁面合併的css
* ========================================== */
/*****************************
Sale TAG
*****************************/
.tag_area {
    position: absolute;
    top: 0;
    left: 0;
/*     width: 40px; */
    z-index: 1;
}
.tag_area img {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 40px;
    height: auto;
}
.tag_area01 {
    position: absolute;
    top: 0;
    right: 0;
    width: 40px;
    z-index: 1;
}
.tag_area01 img {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 40px;
    height: auto;
}
.tag_area_r {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 40px;
    z-index: 8;
}
@media (max-width: 768px) {
    .tag_area01 {
        right: 15px;
    }
}
@media (max-width: 480px) {
    .tag_area img {
        width: 30px;
        height: auto;
    }
    .tag_area01 img {
        width: 30px;
        height: auto;
    }
    .tag_area_r img {
        width: 30px;
        height: auto;
    }
}
/****************************頁面連結按鈕*****************************************/
.inner_link_parent {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
.inner_link_element_50 {
    flex: 1 1 50%;
    padding: 2px;
    margin-bottom: 5px;
}
.inner_link_element_33 {
    flex: 1 1 33%;
    padding: 2px;
    margin-bottom: 5px;
}
.inner_link_element_16 {
    flex: 1 1 16%;
    padding: 2px;
    margin-bottom: 5px;
}
.inner_link_element_25 {
    flex: 1 1 25%;
    padding: 2px;
    margin-bottom: 5px;
}
.inner_link_element_20 {
    flex: 1 1 20%;
    padding: 2px;
    margin-bottom: 5px;
}

/* * ==========================================
* 滑動選單 Mobile / 來源:與之前頁面合併的css
* ========================================== */
.find_nav {
    width: 100%;
    top: -10px;
    z-index: 99;
    display: -moz-box;
    display: -webkit-box;
    display: box;
    position: absoulte;
}
.find_nav_left {
    height: 35px;
    position: relative;
    -moz-box-flex: 1;
    -webkit-box-flex: 1;
    box-flex: 1;
    overflow: hidden;
}
@media (max-width: 768px) {
    .find_nav_left {
        overflow: hidden;
    }
}
.shadow_bar {
    box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
.find_nav_list {
    position: absolute;
    left: 0;
}
.find_nav_list ul {
    position: relative;
    white-space: nowrap;
    font-size: 0;
}
.find_nav_list ul li {
    font-weight: 400;
    display: inline-flex;
    padding: 0 13px;
    text-decoration: underline;
}
.find_nav_list ul li a {
    display: block;
    width: 100%;
    font-size: 16px;
    text-align: center;
    color: #000000;
}
.find_nav_list ul li a:hover {
    color: #000000;
}

/*find_nav  style v2*/
.menu-slider-block .find_nav_list ul li {
    font-weight: 400;
    display: inline-flex;
    padding: 0;
    text-decoration: none;
}
.menu-slider-block .find_nav_list ul li a {
    display: block;
    width: 100%;
    height: 100%;
    line-height: 33px;
    font-size: 18px;
    text-align: center;
}
.menu-slider-block .find_nav_list ul li a:hover {
    color: #ffffff;
}
.sideline {
    display: block;
    position: absolute;
    border: 0;
    height: 2px;
    background-color: var(--header_main_bg_color);
    top: 43px;
    pointer-events: none;
}
.info_area {
    padding: 20px;
    background: #f9f9f9;
    font-size: 0.9rem;
    clear: both;
}
.info_area ul li {
    line-height: 2.5;
}
.border_area {
    border: 1px solid #dddddd;
    padding: 20px;
    background: #f6f6f6;
}
.p_relative {
    position: relative;
}
.p_absolute {
    position: absolute;
}
.white_bg {
    background: #ffffff !important;
}
.gray_bg {
    background: #f7f7f7 !important;
}
.live {
    font-size: 15px;
}
.page_article_tag {
    border-radius: 20px;
    padding: 4px 10px;
    margin-right: 13px;
}
.main_color_bg{
	background-color: var(--header_link_hover_color, #d0343d);
	color:#fff !important;
}

.article_lh_ftw {
    line-height: 1.3;
    font-weight: normal;
}

.article_lh_ftw.gray {
    color: #999999 !important;
    font-size: 14px;
}
@media (max-width: 768px) {
    .article_lh_ftw {
        font-size: 24px;
    }
    .article_lh_ftw.gray {
        font-size: 14px;
    }
}
.title_border_area {
    position: relative;
    text-align: center;
}
.title_border_dark {
    border-top: 1px solid #000000;
}
.border_pattern {
    width: 100px;
    height: 6px;
    margin: -1px auto 0;
    display: flex;
}
.border_red {
    width: 30%;
    height: 5.5px;
    background: #ca2d26;
}
.border_black {
    width: 70%;
    height: 5.5px;
    background: #000000;
}
.red_li ul {
    font-family: Serif;
    list-style-image: var(--page_img_ul_li);
    color: #000000;
    list-style-position: outside;
    line-height: 1.8;
}
.red_li ul li {
    font-size: 18px;
    line-height: 1.5;
    padding-left: 3px;
    font-weight: 700;
    text-decoration: underline;
}
.red_li ul li::marker {
    font-size: 22px;
}
.udl_none {
    text-decoration: none !important;
}
.ft_size_1 {
    font-size: 1rem !important;
}
.li_square {
    list-style: square;
}
.button_i_circle {
    width: 25px;
    height: 25px;
    border-radius: 25px;
    background: #fff;
    color: #777;
    text-align: center;
    padding-left: 2px;
}
.button_i_circle > i {
    font-size: 15px;
}
#div_sub_mh_area {
    margin-top: -44px;
}
#div_sub_mh_area > task-details layer {
    padding: 0px 35px 10px;
    border-bottom: 4px solid;
}
.z-index-10 {
    z-index: 10;
}
@media (max-width: 576px) {
    #btn_search_filter_Store {
        margin-top: 5px;
    }
}
.select2-selection__placeholder {
    color: #000 !important;
}
.ft_color_main {
    color: var(--header_main_bg_color) !important;
}

.c_subscribe {
    color: #000000;
    background-color: #c84e49;
    text-align: center;
}
.a_subscribe {
    background-color: #13243e;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
}
.input_subscribe {
    height: 40px;
    margin-bottom: 10px;
}
.input_subscribe::placeholder {
    color: black;
    text-align: center;
}
.color_black {
    color: #000;
}
.width_90p {
    width: 90% !important;
}
.width_80p {
    width: 80% !important;
}
.width_50p {
    width: 50% !important;
}
.width_max_215 {
    max-width: 215px !important;
}
@media (max-width: 1550px) {
    .width_max_215 {
        max-width: 170px !important;
    }
}
@media (max-width: 991px) {
    .width_max_215 {
        max-width: 150px !important;
    }
}
@media (max-width: 576px) {
    .width_max_215 {
        max-width: 120px !important;
    }
}
@media (max-width: 480px) {
    .width_max_215 {
        max-width: 87px !important;
    }
}
@media (max-width: 375px) {
    .width_max_215 {
        max-width: 80px !important;
    }
}
.page_category_2_br {
    height: 25px;
    margin-top: 5px;
    border: 1px solid #979797;
    margin-left: 10px;
}
.img_product_outline {
    width: 100%;
    position: absolute;
    top: 0px;
    left: 0px;
}
.label_round {
    text-align: center;
    border-radius: 500%;
    padding: 10px;
    width: fit-content;
    margin-bottom: 5px;
}
.label_square {
    text-align: center;
    padding: 5px 10px;
    width: fit-content;
    margin-bottom: 5px;
}
.page_btn {
    padding: 10px 20px;
}

.page_title {
    font-size: 1rem;
    color: #ffffff;
    text-align: center;
    padding: 70px 0px 10px;
    line-height: 30px;
}
@media (max-width: 991px) {
    .page_title {
        padding: 75px 0 10px 0px;
    }
}
.vogue-font{
    font-family: vogue avant garde font !important;
}
.serif-font {
    font-family: "Noto Serif TC", serif;
}
.noto-sans-font {
    font-family: "Noto Sans TC", "arial";
}
.font_r08{
	font-size:0.8rem !important;
	line-height:1.5!important;
}
.font_12{
	font-size:12.5px !important;
	line-height:1.5!important;
}
.font_13{
	font-size:13px !important;
	line-height:1.5!important;
}
.font_14{
	font-size:14px !important;
	line-height:1.5;
}
.font_15{
	font-size:15.5px !important;
	line-height:1.5;
}
.font_16{
	font-size:16px !important;
	line-height:1.5!important;
}
.font_17{
	font-size:17px !important;
	line-height:1.5!important;
}
.font_18 {
    font-size: 18px !important;
    line-height: 1.5 !important;
}
.font_20 {
    font-size: 20px !important;
    line-height: 1.5 !important;
}
.font_22 {
    font-size: 22px !important;
    line-height: 1.5;
}

table tbody > tr td {
    padding: 10px;
}
.d_none {
    display: none;
}
.swiper_area_board {
    border: 1px solid transparent;
    border-radius: 30px;
    position: relative;
    background-color: #000;
    background-clip: padding-box;
    width: fit-content;
    max-width: 100%;
    margin: auto;
    box-sizing: border-box;
    margin-bottom: 30px;
    display: table;
}
@media (max-width: 636px) {
    .swiper_area_board {
        border: 0;
        border-radius: 0;
        width: 100%;
        margin-bottom: 0;
    }
	.font_14{
		font-size:12px !important;
		line-height:1.5;
	}
	.font_15{
		font-size:13px !important;
		line-height:1.5;
	}
    .font_22 {
	    font-size: 18px !important;
	    line-height: 1.5;
	}
}
.swiper_area_board:before {
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(to right, #fff 0%, #fff 40px, #000, #fff calc(100% - 40px), #fff);
}
.swiper_area_header {
    width: fit-content;
    display: table;
    max-width: 100%;
    margin: auto;
    position: relative;
    padding: 0 90px;
}
.swiper_area_header a:not(.dropdown__link) {
    color: #fff;
    text-transform: uppercase;
    font-weight: 400;
}
.swiper_area_header a:hover {
    color: var(--header_link_hover_color, #d0343d) !important;
}
.swiper_area_header .swiper-slide {
    padding: 5px 12px;
    font-size: 14px;
}
.swiper_area_header .swiper-slide:first-child {
    padding-left: 0;
}
@media (max-width: 991px) {
    .swiper_area_header {
        padding: 0 20px;
    }
}
.contact_phone {
    font-size: 30px;
    transform: rotateY(180deg);
    border: 1px solid;
    padding: 10px;
    border-radius: 50px;
}
.search_page_input_outer {
    color: #000000;
    font-size: 1rem;
    border-bottom: 1px solid #000;
}
.search_page_input {
    width: 90%;
    height: 44px;
    padding: 10px 10px 10px 10px;
    outline: none;
    border: none;
    background: transparent;
    color: #000000;
    text-align: center;
}
@media (max-width: 768px) {
    .search_page_input_outer {
        position: relative;
    }
    .search_page_input {
        position: absolute;
        top: 5px;
        left: -10px;
    }
}
.page_pmanual_fbtn {
    text-align: center;
    width: 100%;
    padding: 10px 30px;
    display: block;
}
/*...::: 文章系列的css :::...*/
.btn_expand_page {
    text-align: center;
    padding: 10px 30px;
    width: fit-content;
    border:2px solid;
}
.title {
    display: block;
    line-height: 1.5;
    font-weight: 400;
}

.title--medium {
    font-size: 18px !important;
}
.title--medium2 {
    font-size: 22px;
}
@media (min-width: 768px) {
    .title--medium {
        font-size: 22px;
    }
    .title--medium2 {
        font-size: 26px;
    }
}
@media (min-width: 992px) {
    .title--medium {
        font-size: 28px;
    }
    .title--medium2 {
        font-size: 32px;
    }
}
@media (min-width: 1566px) {
    .title--medium {
        font-size: 30px;
    }
    .title--medium2 {
        font-size: 34px;
    }
}
.title--normal {
    font-size: 18px;
}
@media (min-width: 768px) {
    .title--normal {
        font-size: 22px;
    }
}
@media (min-width: 992px) {
    .title--normal {
        font-size: 28px;
    }
}
@media (min-width: 1566px) {
    .title--normal {
        font-size: 32px;
    }
}
.title--small {
    font-size: 13px;
}
@media (min-width: 576px) {
    .title--small {
        font-size: 13px;
    }
}
@media (min-width: 768px) {
    .title--small {
        font-size: 17px;
    }
}
@media (min-width: 992px) {
    .title--small {
        font-size: 17px;
    }
}
@media (min-width: 1200px) {
    .title--small {
        font-size: 11px;
    }
}
@media (min-width: 1566px) {
    .title--small {
        font-size: 18px;
    }
}
.title--product {
    font-size: 28px;
}
@media (min-width: 768px) {
    .title--product {
        font-size: 28px;
    }
}
@media (min-width: 992px) {
    .title--product {
        font-size: 32px;
    }
}
@media (min-width: 1200px) {
    .title--product {
        font-size: 36px;
    }
}
.title--white {
    color: #fff;
}
.filter--gray {
    background: #eee;
}

/* ======= PRELOADER ========== */
.preloaderjs .spinner {
    display: none !important;
}

.preloaderjs#page-preloader {
    background: rgba(46, 46, 46, 0.99) !important;
}

#page-preloader {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #2e2e2e;
    z-index: 100500000000;
}

#page-preloader .spinner {
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: 100px;
    height: 100px;
    margin-top: -50px;
    margin-left: -50px;
    border: 3px solid transparent;
    border-top-color: #e7e4d7;
    border-radius: 50%;
    z-index: 1001;
    -webkit-animation: spin 2.5s infinite linear;
    animation: spin 2.5s infinite linear;
}

#page-preloader .spinner:before,
#page-preloader .spinner:after {
    position: absolute;
    border-radius: 50%;
    content: "";
}

#page-preloader .spinner:before {
    top: 5px;
    right: 5px;
    bottom: 5px;
    left: 5px;
    border: 3px solid transparent;
    border-top-color: var(--header_sub_bg_color);
    -webkit-animation: spin 2s infinite linear;
    animation: spin 2s infinite linear;
}

#page-preloader .spinner:after {
    top: 15px;
    right: 15px;
    bottom: 15px;
    left: 15px;
    border: 3px solid transparent;
    border-top-color: var(--header_main_bg_color);
    -webkit-animation: spin 1s infinite linear;
    animation: spin 1s infinite linear;
}
.about_us-slider__arrow {
    width: 30px;
    height: 30px;
    border-radius: 5px;
    color: #dbdbdb;
    font-weight: bold;
    position: absolute;
    top: 30%;
    transform: translateY(-50%);
    z-index: 99;
}
.about_us-slider__arrow.about_us-slider__arrow--left {
    left: 50px;
}
.about_us-slider__arrow.about_us-slider__arrow--right {
    right: 50px;
}
.d_initial{
	display: flex !important;
}
.width_fc{
 	width:fit-content;
}
@media (max-width: 767px) {
   .d_initial {
        display: none !important;
    }
}
.d_initial_mobile{
	 display: none !important;
}
@media (max-width: 767px) {
   .d_initial_mobile {
        display: flex !important;
    }
}
.h1_img, .h1_img_v2{
	width:55%;
	height:auto;
}
.h2_img{
	width:50%;
	height:auto;
}
.h3_img{
	width:40%;
	height:auto;
}
@media (max-width: 768px) {
   .h1_img, .h1_img_v2{
		width:40%;
		height:auto;
	}	
}
@media (max-width: 460px) {
    .h1_img, .h1_img_v2{
		width:50%;
		height:auto;
	}
	.h2_img{
		width:70%;
		height:auto;
	}
	.h3_img{
		width:60%;
		height:auto;
	}
}
.font_weight_300{
	font-weight:300 !important;
}
.menu_media_title{
	color: #383838;
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    display: -webkit-box;
    height:64px;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
    overflow: hidden;
    margin-bottom: 15px;
}
.menu_media_empty .media__date{
	font-size: 20px;
    text-decoration: underline;
}
.menu_media_empty{
	height: 654px;
    border: 1px solid #eceae9;
    background: #ffffff;
    background: rgba(255, 255, 255, 0.5);
    padding: 280px 32px 100px;
    cursor: pointer;
}
@media (max-width: 991px) {
    .menu_media_title {
        font-size: 18px;
        font-weight: 700;
/*         line-height: 24px; */
        margin-bottom: 10px;
    }    
}
.color_light_gray{
	font-size: 14px;
    color: #a09a9aee;
}
.h_60{
	height:60px !important;
}
.skey_auto_box{
	background: #f4f4f4;
    border-radius: 8px;
    box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.09);
    padding:15px 0px;
    -webkit-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.09);
    -moz-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.09);
    -ms-box-shadow: 0px 6px 6px rgba(0, 0, 0, 0.09);

}
.circle_img {
    height: 50px;
    width: 50px;
    object-fit: cover;
    border-radius: 25px;
}
.div_group_img_input_area{
	display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 20px;
}
.div_group_img_area{
	width: 100px;
    height: 100px;
    border: 1px #cdcdcd solid;
    border-radius: 50px;
    justify-self: end;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}
.div_group_img_area img{
	width: 100px;
    height: 100px;
    border-radius: 50px;
    object-fit: cover;
    background: #fff;
}
.div_group_img_area .div_edit{
	position: absolute;
    bottom: 0px;
    color: #FFF;
    width: 100%;
    text-align: center;
    background: rgba(0, 0, 0, 0.5);
}
.div_group_img_input_line{
	border-left: dotted 1.5px #cdcdcd;
  	height: 100%;
}
#modalViewMember .div_group_img_input_area{
	display: grid;
    grid-template-columns: auto auto 1fr;
    align-items: center;
    gap: 20px;
}
#modalViewMember .div_group_img_area, #modalViewMember .div_group_img_area img{
	width: 70px;
    height: 70px;
    border-radius: 35px;
    cursor: unset;
}
.li_cqr_category_ft{
	font-size:0.95rem;
	padding:2px 0px;
}
.div_slider_wtb_border{
	margin-top: 10px;
    padding: 0px 5px;
    border-bottom: 1px solid #cdcdcd;
}
.img_max_260{
    width: 100%;
    max-width: 100%;
    object-fit: contain !important;
    height:260px;
}
.cursor-pointer {
    cursor: pointer;
}
.img_100_cover {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.invisible {
    visibility: hidden;
}
.ft_family_noto{
	font-family: 'Noto Sans TC';
}

.page__img-block {
	background: #fafaf5;
	margin:10px 0px;
    position: relative;
    width: 100%;
    padding-top: 100%;
    overflow: hidden;
}
.page__img{
	position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    margin-bottom:16px;
}

/* **************** 文章列表 ******************** */
.div_page_list_filter_2{
	display: grid;
    grid-template-columns:1fr;
    gap: 2px;
    align-items: center;
    overflow:hidden;
    margin-bottom: 1px;
}
.div_page_list_filter_1a1f{
	display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center; 
}
.div_page_list_filter_1a1f .div_month_2{
	padding:10px 0px;
}
@media(max-width:504px){
	.div_page_list_filter_1a1f{grid-template-columns:1fr;}
	.div_page_list_filter_1a1f .div_month_2{padding:7px 0px;}
}

.div_page_list_title{	
	margin-bottom:0px;
    letter-spacing: 1.5px;
    font-size: 17px;
    word-break: break-word;
    height: 42px;
    text-overflow: ellipsis;
    overflow: hidden;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
}
.div_month_all,
.div_month_all:hover{
	white-space: nowrap;
    padding: 0px 15px;
    color: #fff!important;
}
.div_month_2{
	display: grid;
    grid-template-columns: auto 1fr;
    gap: 10px;
    align-items: baseline;
}
.div_month_2 select{
	border:none;
	background:transparent;
	width:98%;
	font-weight:300;
	z-index:2;
}
.div_page_bl_2{
	display: grid;
    grid-template-columns: 45% 1fr;
    gap: 0px 10px;
    align-items: center;
}
.div_page_btn_2{
	display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    align-items: center;
}
.page_grid{
	width:100%;
	display:grid;
	grid-template-columns: 1fr 1fr;
	gap:16px;
    align-items: center;
}
.div_filter_month_all{
	position:absolute;
	z-index:2;
}
.course_calendar_button{
	border-color:var(--header_sub_bg_color);
	color:var(--header_sub_bg_color);
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 18px!important;
/* 	height: 30px; */
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;	
}
.course_regist_button{
	border-color:var(--header_sub_bg_color);
	color:var(--header_sub_bg_color);	
	word-break: break-word;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	line-height: 18px!important;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
@media(max-width:991px){
	.div_page_list_filter_2{grid-template-columns: 1fr;}	
	.page_grid{grid-template-columns: 1fr; border-bottom: 1px solid #ccc;}
	.page_grid:last-child{border-bottom:0;}
	.div_page_bl_2{ border-bottom: 1px solid #ccc; padding-bottom: 16px;}
	.div_page_bl_2:last-child{border-bottom:0;}
}
@media(max-width:768px){
	.div_page_bl_2{grid-template-columns: 1fr 1fr;}	
}
@media(max-width:580px){
	.div_month_2 select{width:max-content;}
}
@media(max-width:575px){
	.div_filter_month_all{font-size:14px;}
	.div_month_all{padding:0 16px;}
	.div_page_list_filter_1a1f .tab-menu-swiper01 .swiper-slide a{padding:0 16px;}
	.div_month_2{ gap: 4px; grid-template-columns: auto 1fr;}
	.div_page_list_filter_1a1f.month{grid-template-columns:auto 1fr;}
	.div_page_bl_2 .font_13{font-size:12px!important;}
}
.div_page_list_filter_1a1f.w505{
	width:505px;
}
@media(max-width:544px){
	.div_page_list_filter_1a1f.w505{width:100%;}
	.div_month_2 select {width: 100%;}
}
.div_page_list_filter_1a1f select{
	-moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    color:#000000;
   }
.grid-column1{
	grid-column: 1 / -1;
}
.div_month_2{
	margin-top:1px;
}
.position-arrow{
	position:absolute;
	right:12px;
}
.nowrap{
    white-space:nowrap;
}
.ui-datepicker .ui-datepicker-title{
	margin: 0 1em;
}
#div_media_kv .arrow_bg,#div_media_kv_mobile .arrow_bg {
    box-shadow: unset !important;
}

#div_media_kv .hero-slider__arrow--right {
    right: 20px;
}
#div_media_kv .hero-slider__arrow--left {
    left: 20px;
}
.v4_orig_sidemenu {
    display: none !important;
}
/* 針對 Windows 的調整 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .sub-title {
    letter-spacing: -0.05em;
  }
}

.swiper-dot-bottom-center {
    top: 0;
    position: relative !important;
    margin-right: auto;
    margin-left: auto;
}
section.separate_swiper_navigation .swiper-pagination {
    position: static;
    right: 0;
    display:flex;
    justify-content:center;
    margin-top:16px;
}
.gray-bg.month .swiper-slide{
	margin-bottom:0!important;
}
@media(max-width:768px){
.gray-bg.month .swiper-slide a{
	line-height:1.7;
}
}
@media(max-width:575px){
.gray-bg.month .swiper-slide a{
	line-height:1.6;
}

}

/* 受外在css影響，所做的css */
.section-content .p-t-20 {
    box-shadow:none;
}

#menu_must .product-pic {
    background: #fff;
}
#menu_brand .product-pic {
    background: #fff;
}
#menu_hot .product-pic {
    background: #fff;
}
#menu_new .product-pic {
    background: #fff;
}
.product-pic img {
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    object-fit: contain !important;
    object-position: center;
}