/* 全局設置 */
*,
*::before,
*::after {
    box-sizing: border-box;
}
/* 布局 */
.dp-flex {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: center;
    width: 100%;
}

.dp-flex1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    width: 25%;
    flex-direction: column;
}

.c-23,
.c-1, .c-2, .c-3,
.c-4, .c-5, .c-6,
.c-7, .c-8, .c-9,
.c-10, .c-11, .c-12 {
    display: flex;
    margin: auto;
    /* box-sizing: border-box; */
}
.c-1 {
    flex: 0 0 8.33%;
}
.c-2 {
    flex: 0 0 16.66%;
}
.c-23 {
    flex: 0 0 23.5%;
}
.c-20 {
    flex: 0 0 20%;
}
.c-3 {
    flex: 0 0 25%;
}
.c-4 {
    flex: 0 0 33.33%;
}
.c-5 {
    flex: 0 0 41.66%;
}
.c-6 {
    flex: 0 0 50%;
}
.c-7 {
    flex: 0 0 58.33%;
}
.c-8 {
    flex: 0 0 66.66%;
}
.c-9 {
    flex: 0 0 75%;
}
.c-10 {
    flex: 0 0 83.33%;
}
.c-11 {
    flex: 0 0 91.66%;
}
.c-12 {
    flex: 0 0 100%;
}

/* 頁籤 */
.tab-block {
    /* margin-top: 2%; */
    position: relative;
}
.tab-control {
    position: absolute;
    opacity: 0;
}
.tab-group label, .tab-group a.tabs {
    position: relative;
    display: inline-block;
    /* padding: 1.5em 1em; */
    cursor: pointer;
    padding: 0;
    display: flex;
}
/* 商品 */
.c-3.item,
.c-4.item {
    padding: 1%;
    margin: auto;
}





/* width */
.tab-group::-webkit-scrollbar {
    width: -1px;
}
/* Track */
.tab-group::-webkit-scrollbar-track {
    background: #f1f1f1;
}
/* Handle */
.tab-group::-webkit-scrollbar-thumb {
    background: #888;
}
/* Handle on hover */
.tab-group::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* .content-group {
    padding: 1em;
     border-radius: 15px; 
} */

.tab-content {
    display: none;
    max-width: 100%;
    width: 100%;
    height: fit-content;
}
#tab1:checked ~ .container .content1,
#tab2:checked ~ .container .content2,
#tab3:checked ~ .container .content3,
#tab4:checked ~ .container .content4,
#tab5:checked ~ .container .content5,
#tab6:checked ~ .container .content6,
#tab7:checked ~ .container .content7,
#tab8:checked ~ .container .content8,
#tab9:checked ~ .container .content9,
#tab10:checked ~ .container .content10,
#tab11:checked ~ .container .content11,
#tab12:checked ~ .container .content12,
#tab13:checked ~ .container .content13,
#tab14:checked ~ .container .content14,
#tab15:checked ~ .container .content15,
#tab16:checked ~ .container .content16,
#tab17:checked ~ .container .content17,
#tab18:checked ~ .container .content18,
#tab19:checked ~ .container .content19,
#tab20:checked ~ .container .content20  {
    display: flex;
    flex-wrap: wrap;
    overflow: hidden;
}
.tab-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: center;
}
.tab-group label, .tab-group a.tabs {
    color: #000;
    font-weight: 600;
    transition: .3s;
    /* max-width: 10em; */
    /* max-width: 100%;
    width: 100%; */
    margin: auto;
    /* scale: .9; */
}
.tab-group label {
    font-size: 1rem;
    line-height: 1.1;
    background: url(../images/nav-btn1.png) 0 / 100% no-repeat;
    color: #000;
    text-align: left;
    white-space: nowrap;
    display: none;
}
.tabs {
    background: url(../images/nav-btn2.png) 0 / 100% no-repeat;
    color: #000;
}

/* sample版頁籤 */
.sample-main-tab {
    width: 14%; 
    background: #ffffffcc;
    overflow: hidden; 
    /* margin: auto; */
    box-shadow: 0 4px 16px #00000060;
}
.sample-main-tab .tab-group {
    flex-flow: column;
    flex-wrap: wrap;
    overflow-x: auto;
    height: fit-content;
}
.main-group {
    /* max-width: 86%; */
    width: 100%;
    margin: auto;
    align-items: flex-start;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
}
#sample-menu {
    position: sticky;
    z-index: 3;
    top: 0;
    left: 0;
    height: fit-content;
    background: #ccc;    
    box-shadow: 0 0 4px 0 black;
}
#sample-menu-content {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    height: 100%;
    margin: 0;
    width: 24%;
    height: 100vh;
    display: none;
}
#sample-menu-content.container {
    padding-top: 4em;
}
#sample-menu-content.active {
    display: flex;
    overflow-x: auto;
    width: 100vw;
    height: 100vw;
}



/* swiper */
/* :root{
    --primary-green:#62DB54;
    var(--primary-green)
} */
.swiper-pagination-bullet {
    background: #000 !important;
    opacity: 1 !important;
    transition: 0.5s;
}
.swiper-pagination-bullet-active {
    padding: 0 8px;
    border-radius: 6px;
    transition: 0.5s;
}


/* sample版swiper */
.main-group .swiper-container {
    /* max-width: 1400px; */
    width: 100%;
    max-width: 100vw;
}
.block-tt {
    width: auto;
    max-width: 100%;
}
.block-text {
    width: auto;
    max-width: 100%;
    width: 70%;
    margin: 0 auto;
    }
/* .tab-content > .block-tt {
    margin-left: 3em;
} */
.main-group .block-tt {
    background: #ccc;
    padding: 4px 8px;
    font-weight: 600;
    color: #000;
    font-size: 1rem;
    text-align: left;
    align-self: unset;
    margin: 1em auto 1em 0;
}
.main-group .swiper-pagination-bullet {
    background: none !important;
}
.main-group .swiper-container.swiper1>.swiper-pagination-bullets .swiper-pagination-bullet {
    margin: 0 4px;
    width: 8%;
    background: #888 !important;
    border-radius: 0;
    height: auto;
    color: #fff;
}
.main-group .swiper-container.swiper1>.swiper-pagination-bullets .swiper-pagination-bullet-active {
    background: #000 !important;
}
.main-group .swiper-slide {
    background: #ddd;
}

/* swiper2 */
/* .main-group .swiper-container.swiper2>.swiper-pagination-bullets .swiper-pagination-bullet {
    border-radius: 5em;
    padding: 6px;
    width: unset;
} */
#CONTENT-1-bg1 .container:not(:last-child) {
    max-width: 1200px !important;
    margin: auto;
    overflow: hidden;
    padding: 1%;
    margin-bottom: 2%;
}
#CONTENT-1-bg1 .main-group .container {
    padding: 0;
    /* max-width: 1200px !important; */
    max-width: 1200px;
    width: 100%;
}

/* .content5,
.content6,
.content7,
.content8,
.content9 {
    filter: grayscale(1);
} */


.c-hover a {
    transition: all .2s ease-out;
}


.c-hover a:hover {
    transform: translateY(-4px);
}

/* 卡片 */
#CONTENT-1-bg1 .main-group .container .card6 {
    justify-content: space-around;
    align-items: center;
    background: #00000050;
    border-radius: 8px;
    padding: 0 1%;
}
.card6 .cards {
    filter: grayscale(1);
    font-size: 1rem;
    line-height: 1.4rem;
    color: #505050;
    margin: 3% 0 1%;
    font-weight: 600;
}
.card6 .cards-border {
    position: relative;
    border: 4px solid #9b01ef;
    border-radius: 8px;
    background: #ffffff;
    margin: 0 2%;
}
.card6 .cards .cards-t {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #9b01ef;
    color: #fff;
    border-radius: 20px;
    font-size: 1.5rem;
    line-height: 34px;
    max-width: 15em;
    width: max-content;
    padding: 4px 16px;
}
.card6 .cards .cards-c {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    text-align: left;
    padding: 4% 2% 3%;
    margin-bottom: -0.5em;
    flex-direction: row;
}
.card6 .cards .cards_cs {
    width: 100%;
    margin: 0 2%;
    text-align: center;
}
.card6 .cards .cards_btn {
    background: linear-gradient(to right, #9b01ef 70%, #9b01ef 100%);
    color: #fff !important;
    border: 1px solid #9b01ef;
    line-height: 32px;
    width: fit-content;
    padding: 4px 8px;
    display: flex;
    align-items: center;
    margin: 0 0 0 auto;
    border-radius: 8px 0 0 0;
    position: absolute;
    bottom: -1px;
    right: 0;
}
.card6 .cards .cards_btn i {
    margin-left: 4px;
}

.card7 a.cards {
    display: flex;
    flex-wrap: wrap;
    display: inline-block;
    padding: 8px;
    border-radius: 10px;
}
.card7 a.cards .cards_b {
    background-color: white;
    padding: 5px;
    border-color: #ddd;
    border-width: 1px;
    border-style: solid;
    border-radius: 10px;
    transition: ease 0.3s;
    overflow: hidden;
}
.card7 a.cards .cards_img {
    border-radius: 10px 10px 0 0;
    /* object-fit: contain; */
    /* position: absolute; */
    height: 100%;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
}
.card7 .cards_info {
    padding: 4px 4px 0;
    margin: auto;
}
.card7 .cards_info_t {
    margin: 0 0 5px 0;
    /* margin: 5px; */
    font-size: 1rem;
    line-height: 1.2rem;
    color: #000000;
    text-align: left;
    height: 44px;
    overflow: hidden;
}
.card7 .cards_info_m {
    height: 40px;
    border-color: #505050;
    margin: 0 auto;
    text-align: center;
    border-top-style: dashed;
    border-width: 1px;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
}
.card7 .ori {
    float: left;
    font-size: 0.9rem;
    line-height: 0.9rem;
    color: #505050;
    text-decoration: line-through;
}
.card7 .sp {
    font-size: 1.4rem;
    line-height: 1.4rem;
    color: #df0037;
    font-weight: bold;
    font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
}
.card7 .sp::before {
    content: '促銷價$';
    font-size: 0.9rem;
    margin-left: 4px;
}
.card7 .buy {
    width: 60px;
    font-size: 1.2rem;
    line-height: 1.6rem;
    background-color: #df0037;
    font-weight: bold;
    color: white;
    border-radius: 20px;
    margin: auto 0 auto auto;
}

.card-s1,
.card-s2,
.card-s3,
.card-s4,
.card-s5,
.card-s6,
.card-s7,
.card-s8 {
    align-items: center;
    justify-content: center;
}
.card-s1 .shop,
.card-s2 .shop,
.card-s3 .shop,
.card-s4 .shop,
.card-s5 .shop,
.card-s6 .shop,
.card-s7 .shop,
.card-s8 .shop {
    padding: 1%;
    margin: 0;
}

.card-s5 .shop img {
    border-radius: 2em;
}

.card-s7 .shop img {
    border-radius: 1em;
    border: 2px solid #000;
}

.card-cv1,
.card-cv2 {
    align-items: center;
    justify-content: center;
}

.card-cv1 .cover,
.card-cv2 .cover {
    padding: .5%;
}

.card-ip1,
.card-ip2,
.card-ip3,
.card-ip4 {
    align-items: center;
    justify-content: center;
}

.card-ip1 .ip,
.card-ip2 .ip,
.card-ip3 .ip,
.card-ip4 .ip {
    padding: .8% .5%;
}

/* 分類1 */
.card-cate1 .cate {
    width: 24%;
    margin: auto;
    background: rgb(227,227,227);
    background: linear-gradient(180deg, #fff 0%, #ddd 100%);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: row;
}
.card-cate1 .cate_b {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
    padding: 1em;
}
.card-cate1 .cate_b::after {
	content: "\f0da";
	font-weight: 900;
	font-family: "Font Awesome 5 Free";
	font-size: 1.6rem;
    color: #000;
}
.card-cate1 .cate_info_t {
    height: unset;
    margin: 0;
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.8rem;
    color: #000;
}
.card-cate1 .cate_info {
    padding: 0;
}
.card-cate1 .cate_img {
    max-width: 50%;
}
.card-cate4 {
    /* 可移除樣式 */
    filter: invert(1);
}
.card-cate5 .cate {
    margin: 0;
}
#CONTENT-1-bg1 .main-group .container.card-cate6 {
    width: 100%;
    padding: 0 15%;
}
.card-cate6 .cate {
    margin: 2% auto;
}


@media (min-width: 1200px) {
    body .container {
        max-width: 1200px !important;
        margin: auto;
    }
}
/* menu改版 */
@media (min-width: 737px) {
    body #menu .menu-imgLink img, body #menu-left .menu-imgLink img {
        width: 130px !important;
        margin: 0;
    }
}
/* 共用 */
.dp-block {
    display: block;
}
.dp-none {
    display: none;
}
.dp-mb-block {
    display: none;
}
.dp-mb-flex {
    display: none;
}
.dp-mb-none {
    display: block !important;
}
.font-s {
    font-size: .8rem;
}




/* pc右側menu241128 */
@media (min-width: 737px) {
    body #menu ul li a {
        border-radius: unset;
        margin-top: unset;
    }
    body #menu ul li:first-child a {
        border-radius: 10px 10px 0 0;
    }
    body #menu ul li:last-child a {
        border-radius: 0 0 10px 10px;
    }
    body #menu ul li:not(.menu-title) a.active, #menu ul li:not(.menu-title) a:hover,
    body #menu-left ul li a.active,
    body #menu-left ul li a:hover {
        background-color: #ffc114;
        color: #000;
    }
    body #menu-left ul li a {
        margin-top: 0;
        border-radius: 0;
    }
    body #menu-left .menu-content {
        border-radius: 10px;
        overflow: hidden;
    }
    body #menu-left .summary-expansion-name {
        border-radius: 10px 10px 0 0;
    }
    body #menu ul, body #menu ul li, body #menu-left ul, body #menu-left ul li {
        margin: -1px 0;
    }
    body .menu-content ul li:nth-child(10) {
        border-radius: 0 0 10px 10px;
    }
}
/* logo bar */
.logo-bar {
    /* background: #d4d4d4; */
    /* background: #000; */
    background: #fff;
    padding: 4px 0 2px;
    text-align: center;
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    position: relative;
    z-index: 1;
}
.logo-bar a {
    display: inline;
}
.logo-bar a img {
    max-width: 10%;
    width: 100%;
    display: block;
    margin: auto;
}
/* search bar */
body .search-box {
    bottom: -36px;
    transition: all .1s ease;
}
body .search-bar {
    box-shadow: 0px 8px 6px #2626263b, 0 -1px 4px 0 #2626261f;
}




.coupon-block {
    align-items: center;
    justify-content: center;
    padding: 0 0.2em;
    margin-bottom: 2em;
}

.week-event {
    background: #e1d9cf;
    padding: 2em;
}
.week-event .dp-flex {
    max-width: 100%;
    margin: auto;
}
.week-event .btn-more {
    position: absolute;
    right: 2vw;
    top: 2vw;
    max-width: 15vw;
}

.gift-content {
    background: #0393C8;
    padding: 0.8em;
    /* margin-bottom: 4em; */
    margin: -8em 0 4em 0;
    clip-path: polygon(0 20px,20px 0,calc(100% - 20px) 0,100% 20px,100% calc(100% - 20px),calc(100% - 20px) 100%,20px 100%,0 calc(100% - 20px));
}
.gift-event {
    background: #80ddff;
    padding: 4em 2em 2em;
    /* margin-bottom: 4em; */
    /* margin: -8em 0 4em 0; */
    clip-path: polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px));
}
.gift-tt {
    /* margin: 2em auto -6em; */
    z-index: 2;
    position: relative;
    margin-bottom: -10%;
    align-items: center;
    justify-content: center;
}
a.gift-anchor:link {
    /* background: #fff; */
/*     color: #253d6b;
    font-size: 1rem;
    line-height: 2.2rem;
    margin: auto 2px;
    font-weight: 600;
    padding: 4px; */
    position: relative;
    z-index: 1;
    /* border: 2.5px solid #000; */
    /* border-radius: .5em; */
    /* border-bottom: 2px solid #1b66e5; */
}
a.gift-anchor.focus:link {
    color: #eb1923;
}
.tabmenu {
    transition: all .3s;
}
#navB a.gift-anchor:link {
    background: #000;
    color: #000000;
    font-size: 1rem;
    line-height: 2.2rem;
    margin: auto 2px;
    font-weight: 600;
    padding: 0px 2%;
    margin: 0 1%;
    position: relative;
    z-index: 1;
    /* border: 2.5px solid #000; */
    /* border-radius: .5em; */
    /* border-bottom: 2px solid #1b66e5; */
    clip-path: polygon(0 0, 90% 0, 130% 100%, 0 100%);
    /* clip-path: polygon(0 0, 70% 0, 150% 100%, 0 100%); */
    /* border: 2.5px solid #000; */
    /* border-radius: .5em; */
    /* border-bottom: 2px solid #1b66e5; */
}
#navB a.gift-anchor:link::before {
    content: "";
    position: absolute;
    /* top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: 2px solid #000;
    clip-path: polygon(0 0, 80% 0, 120% 100%, 0 100%);
    z-index: -1; */
    top: 2px; /* 邊框厚度 */
    left: 2px;
    width: calc(100% - 4px); /* 內層尺寸縮小 */
    height: calc(100% - 4px);
    clip-path: polygon(0 0, calc(90% + 1px) 0, calc(130% - 1px) 100%, 0 100%);
    /* clip-path: polygon(0 0, calc(70% - 1px) 0, calc(150% - 1px) 100%, 0 100%); */
    background: #fff; /* 內層背景色 */
    z-index: -1;
}
#navB a.gift-anchor:hover:before {
    background: #fff560;
}
a.gift-anchor.focus::before {
    content: "\f06b ";
    font-weight: 900;
    font-family: "Font Awesome 5 Free";
}
a.gift-anchor span::before {
    content: '';
    background: #ffefb3;
    max-width: 5.5em;
    width: 100%;
    height: 50%;
    display: block;
    position: absolute;
    z-index: -1;
    bottom: 0.1em;
    left: 50%;
    transform: translateX(-50%);
}
/* a.gift-anchor:nth-child(2)::before { */
/* a.gift-anchor:not(:first-child)::after {
    content: '';
    display: block;
    position: absolute;
    width: 2px;
    height: 60%;
    background: #0d1d3b;
    left: -10%;
    top: 20%;
} */
/* a.gift-anchor:nth-child(2):after {
    content: '';
    display: block;
    position: absolute;
    width: 2px;
    height: 100%;
    background: #1b66e5;
    right: 3px;
    top: 0;
} */

.b-t, .b-c, .b-b {
    max-width: 100%;
    width: 100%;
    position: relative;
    display: grid;
}
.b-t {
    margin-bottom: -6px;
}
.w-l .b-c {
    background: url(../images/1101/block-c.png) center center / 100% repeat-y;
    text-align: left;
    color: #7f6544;
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.1rem;
    padding: 1em 0;
}
.w-l .b-c > * {
    max-width: calc(100% - 4vw);
    width: 100%;
    margin: auto;
    margin-top: 2%;
}
.g-block.g-block4.w-l > .b-c {
    background: url(../images/1201/fr-middle.png) center center / 100% repeat-y;
    text-align: left;
    /* color: #7f6544; */
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.1rem;
    padding: 2em 0 1em;
}
.w-l .b-b::before {
    /* content: url(../images/block-lb.png); */
    content: '';
    background: url(../images/1101/block-b.png) center top / 100% no-repeat;
    /* padding-top: 4%; */
    padding-top: 3vw;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}
.g-block.g-block4.w-l > .b-b::before,
.g-block.g-block4.w-l > .b-b::before {
    content: '';
    background: url(../images/1201/fr-bottom.png) center top / 100% no-repeat;
    padding-top: 3vw;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}
.g-block {
    margin-bottom: 3vw;
    margin-top: 1vw;
    display: block;
    position: relative;
}
section:has(.g-block) {
    margin: 2em auto 6em;
}
/* .g-block:nth-child(5) {
    margin: 4em 0em 0em 2em;
} */
.g-block h3 {
    padding-top: 1em;
    font-size: 1.2rem;
    line-height: 2rem;
    color: #000000;
    text-align: left;
}
.g-block table {
    vertical-align: middle;
    text-align: center;
    width: 100%;
    /* margin: 1em auto; */
    border-collapse: unset;
    border-spacing: 2px;
    border-radius: .5em;
    overflow: hidden;
    font-size: .9rem;
    font-weight: 600;
    line-height: 2rem;
    color: #654a2e;
    margin-bottom: 2em;
}
.g-block tr th {
    background-color: #a2927e;
    color: #fff;
    vertical-align: middle;
}
.g-block tr td {
    background-color: #e1d9cf;
    vertical-align: middle;
    /* border: 1px solid #000; */
}
.g-block .win {
    font-size: 12px;
    line-height: 14px;
    width: 40%;
    padding: .5em 0;
}
.g-block1 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t1.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}
.g-block1 .c-w1 {
    margin: 3em auto 0.5em;
}
.g-block1 .c-w3 {
    margin: 1em auto;
}
.g-block2 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t2.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}
.g-block3 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t3.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}
.g-block3-2 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t4.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}

.g-block3-3 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t4.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    margin-top:5em;
}

.g-block3-4 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t5.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    margin-top:4em;
}

.g-block3-5 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t7.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}



.g-block.g-block4.w-l > .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1201/fr-top.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}
.g-block5-1 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t4.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}
.g-block5-2 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t5.png) center bottom / 100% no-repeat;
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
}
.g-block5-2 .member-btn {
    margin: auto;
    transform: translate(0, 33%);
    inset: auto 0 0 0;
}
.g-block5-3 {
    margin-top: 4%;
}
.g-block5-3 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    /* background: url(../images/1101/block-t5.png) center bottom / 100% no-repeat; */
    background: url(../images/1101/block-b.png) center bottom / 100% no-repeat;
    padding-top: 4%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    rotate: 180deg;
}
.g-block5-4 {
    margin-top: 4%;
}
.g-block5-4 .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/1101/block-t6.png) center top / 100% no-repeat;
    /* background: url(../images/1101/block-b.png) center bottom / 100% no-repeat; */
    padding-top: 8%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    /* rotate: 180deg; */
}
.g-block5-4 .member-btn {
    margin: auto;
    transform: translate(32.5%, 32%);
    inset: auto 0 0 0;
}
.g-block a.c-w6 {
    /* background: #d99539; */
    padding: 4px;
    border-radius: 0.1em;
    color: #ffffff;
    font-size: 1rem;
    line-height: 1.2rem;
    /* border: 2px solid #ffd54f; */
    width: 24%;
}
.event-btn {
    align-items: center;
    justify-content: center;
    margin: auto;
}
.event-btn .c-w3 {
    margin: 0 1em;
}
.member {
    position: relative;
}
.member-btn {
    position: absolute;
    right: 0;
    bottom: 0;
    transform: translate(-3.5%, 30%);
    max-width: 64%;
    width: 100%;
}
/* section .swiper-button-prev, section .swiper-button-next {
    background: #c8332f;
    color: #ffffff;
    padding: 1em;
    opacity: .8;
    height: 110px;
    width: 20px;
    transform: translateY(-28%);
} */
/* section .swiper-button-prev {
    background: url(../images/arrow-l.png);
} */

section .swiper-block {
    position: relative;
    max-width: 90%;
    width: 100%;
    margin: auto;
    padding-bottom: 4%;
    /* margin-top: 2%; */
}
section .swiper-block .swiper-container {
    padding: 0 4%;
}
section:not(.campaign):not(.power) .swiper-block .swiper-container {
    padding: 0 2%;
}
section .swiper-button-next.swiper-button-disabled,
section .swiper-button-prev.swiper-button-disabled {
    opacity: .6;
}
section .swiper-button-next,
section .swiper-button-prev {
}
section .swiper-button-prev {
    left: -4%;
}
section .swiper-button-next {
    right: -4%;
}
section .swiper-button-prev,
section .swiper-button-next {
    transition: .2s ease;
}
section .swiper-button-prev:hover,
section .swiper-button-next:hover {
    scale: 1.1;
}
section .swiper-pagination {
    width: 100%;
}
section .swiper-pagination-bullet,
section .swiper-pagination-bullet-active {
    margin: 0 2px;
}
section .swiper-pagination-bullet {
    background: #fff;
}
section .swiper-pagination-bullet-active {
    opacity: 1;
    background: #ffee22;
}
.swiper-slide {
    /* scale: .9; */
    transform: scale(0.8);
    transition: .2s ease;
}
.swiper-container:not(.swiper-goods2):not(.swiper-goods4):not(.swiper-goods5) .swiper-slide.swiper-slide-active {
    transform: scale(1);
    transition: .2s ease;
}
.cp1_b {
    position: relative;
    margin-right: 1em;
}
.cp1 {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 92%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.cp1 a {
    padding: .5em;
}
.cp3_b {
    position: relative;
    /* width: 90%; */
    margin: auto;
}
.cp3 {
    position: absolute;
    bottom: -15%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 75%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}
.cp4 {
    position: absolute;
    bottom: -22%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 78%;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
}

.c-w1 {
    width: 100%;
    max-width: 100%;
    /* padding: 0 0.2em; */
    margin: 1em auto;
}

.c-w2 {
    width: 49%;
    padding: 0 0.2em;
    margin: 1em auto;
}

.c-w3 {
    width: 32%;
    padding: 0 0.2em;
    margin: auto;
}

.c-w6 {
    width: 15%;
    position: relative;
}

.c-w6 p {
    position: absolute;
    top: 25%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2.5rem;
    line-height: 2rem;
    font-family: Arial;
    font-weight: 600;
    font-style: italic;
    color: #000;
}

.c-gray {
    filter: grayscale(1);
}

.code {
    position: relative;
}

    .code span {
        position: absolute;
        font-size: 1.5rem;
        line-height: 1.5rem;
        font-weight: 600;
        color: #000;
        font-family: Arial;
        text-align: center;
        margin: auto;
        opacity: 0;
    }

.c-w3.code span {
    width: 50%;
    right: 6%;
    bottom: 33.5%;
}

.c-w2.code span {
    width: 65%;
    right: 9%;
    bottom: 20%;
}
/* .e-link:hover {
    padding-bottom: 8px;
} */
.e-link a, .e-link a:link, .e-link a:visited {
    color: #fff;
}

/* 12月主會場 */
.logo-bar {
    /* background: #d4d4d4; */
    /* background: #000; */
    background: #fff;
    padding: 4px 0 2px;
    text-align: center;
    box-shadow: 0 0 8px rgba(0, 0, 0, .3);
    position: relative;
    z-index: 1;
}
.logo-bar a {
    display: inline;
}

/* search bar */
body .search-box {
    bottom: -36px;
}
body .search-bar {
    box-shadow: 0px 8px 6px #2626263b, 0 -1px 4px 0 #2626261f;
}
body #CONTENT-1-bg1 {
    /* background: #4a97f7; */
    /* background: #0073e6; */
    background: #fbf7cd url(../images/0701/bg-pc.jpg) 100% fixed;
    position: relative;
    /* padding-bottom: 2%; */
}
.main-kv {
    position: relative;
    background: url(../images/0701/kv-pc.png) top center/ 100% no-repeat;
    display: flex;
    /* margin-bottom: 400px; */
    /* padding-top: 380px; */
    /* height: 49vw; */
    /* height: 53vw; */
    padding-top: 53%;
    /* 黑五遮罩 */
    /* filter: grayscale(.8) brightness(0.6); */
}
#CONTENT-1-bg1 .main-kv + .container.dp-flex {
/*     margin-top: -12%; */
}
.kv-main {
    /* max-width: 58%;
    width: 100%;
    padding: 15.5vw 0vw 7vw;
    margin-right: 42vw;
    position: relative;
    left: calc(50% - 28.5%);
    animation: kv-move 1s ease-in-out infinite alternate; */
    /* animation: bling 1s infinite; */
    /* top: 18vw;
    left: calc(40% - 13%); */
    max-width: 65%;
    width: 100%;
    position: absolute;
    animation: kv-move 1sease-in-out infinite alternate;
    top: calc(64% - 32%);
    left: calc(50% - 33%);
}

.kv-gif {
    
    max-width: 70%;
    width: 100%;
    position: absolute;
     
    top: calc(31% - 31%);
    left: 15vw;
}

.kv-bg {
    position: relative;
    padding-top: 3em;
    /* background: url(../images/envelope-frame.png) 100% / COVER no-repeat; */
}

.kv-bg-re {
    position: relative;
    padding-top: 3em;
    margin-bottom: 3em;
   
}

.KV-contnet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 75%;
    width: 100%;
}
.blindbox-btn {
    /* padding: .5em 0 1.5em; */
    margin: 1em auto 1em;
    align-items: center;
    justify-content: center;
    /* padding: 2em 0 3em; */
}

.blindbox-btn .c-w3 {
    /* margin: 1em; */
    display: flex;
    width: 38%;
    margin: 1em 2em;
}

#blindbox_btn {
    /* margin: 10em; */
    max-width: 100%;
    width: 100%;
    /* margin: 4em auto 2em; */
    display: block;
}

#blindbox_btn img {
    max-width: 100%;
    width: 100%;
}

@keyframes kv-move {
    0% {
        transform: translate(0, -4px);
    }

    100% {
        transform: translate(0, 4px);
    }
}
/* .mask-light {
    width: 20px;
    height: 200px;
    transform: rotate(45deg);
    mask-image: url(../images/kv-pc.png);
    animation: mask 975ms ease infinite;
} */
/* @keyframes mask {
    from {transform: translateX(0)}
    to {transform: translateX(280px)}
} */

/* picshine共用 */

.picshine {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
    -webkit-filter: brightness(1.1);
    -webkit-mask-size: 250%;
    -webkit-mask-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
    -webkit-transition: -webkit-mask-position;
    -webkit-animation-timing-function: linear;
    -webkit-transform: translate3d(0, 0, 0);
    filter: brightness(1.5);
    mask-size: 250%;
    mask-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
    transition: -webkit-mask-position;
    animation-timing-function: linear;
    transform: translate3d(0, 0, 0);
    transition-duration: 1s;
    animation: picshine 2s ease-out infinite;
    width: 100%;
}

  @keyframes vibrate-2-normal {0% { transform: scale(1); } 50% { transform: scale(0.97); } 100% { transform: scale(1);} }

.vibrate-2-normal { 
    animation: vibrate-2-normal 2s ease 0s infinite normal none; 
}
@-webkit-keyframes picshine {
    0% {
        -webkit-mask-position: 125% 0px;
        -moz-mask-position: 125% 0px;
        -o-mask-position: 125% 0px;
        mask-position: 125% 0px;
    }

    50% {
        -webkit-mask-position: 0% 0px;
        -moz-mask-position: 0% 0px;
        -o-mask-position: 0% 0px;
        mask-position: 0% 0px;
    }

    100% {
        -webkit-mask-position: 125% 0px;
        -moz-mask-position: 125% 0px;
        -o-mask-position: 125% 0px;
        mask-position: 125% 0px;
    }
}
@keyframes picshine {
    0% {
        -webkit-mask-position: 125% 0px;
        -moz-mask-position: 125% 0px;
        -o-mask-position: 125% 0px;
        mask-position: 125% 0px;
    }

    50% {
        -webkit-mask-position: 0% 0px;
        -moz-mask-position: 0% 0px;
        -o-mask-position: 0% 0px;
        mask-position: 0% 0px;
    }
    100% {
        -webkit-mask-position: 125% 0px;
        -moz-mask-position: 125% 0px;
        -o-mask-position: 125% 0px;
        mask-position: 125% 0px;
    }
}

/* pic move共用 */
.picmove {
	-webkit-animation: picmove .6s ease-in-out infinite alternate;
    animation: picmove .6s ease-in-out infinite alternate;
}
@-webkit-keyframes picmove {
	100% {
		transform: translateY(0);
	}
}
@keyframes picmove {
	100% {
		transform: translateY(-5px);
	}
}

/* hover scale共用 */
a.scale img {
    transform: scale(0.95);
    transition: ease .2s;
}
a.scale:hover img {
    transform: scale(1);
    box-shadow: unset;
}
@keyframes scale {
	from {
		transform: scale(1);
	}
	to {
		transform: scale(0.95);
	}
}
.idol img,
.coupon-block a,
.sale-event a,
.week-event a,
.membergift a,
.blindbox-btn a,
.entertainment a,
.item-coupon a,
.sale-day a {
    transition: ease .4s;
    display: block;
}
.idol img:hover,
.coupon-block a:hover,
.sale-event a:hover,
.week-event a:hover,
.membergift a:hover,
.blindbox-btn a:hover,
.entertainment a:hover
{
    transform: translate(0, -4px);
}
section {
    /* margin-top: 3em; */
    position: relative;
}
.bannerBlock section:first-child {
    margin-top: 0;
}
.wait-event .photo,
.end-event .photo {
    filter: grayscale(.9) brightness(0.5);
}
.wait-event > img,
.end-event > img {
    filter: grayscale(.9) brightness(0.5);
}
.wait-event::before {
    content: url(../images/0228/event-wait.png);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-56%, -60%);
    scale: .9;
}
.end-event::before {
    content: url(../images/0228/event-end.png);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    transform: translate(-56%, -60%);
    scale: .9;
    cursor: default;
}
.swiper-slide {
    transition: ease .3s;
}
.swiper-slide:hover {
    transform: scale(.9);
}
.swiper-container:not(.swiper-goods2):not(.swiper-goods4):not(.swiper-goods5) .swiper-slide.swiper-slide-active:hover {
    transform: scale(1);
}
.block1-pc {
    display: block;
}
.block1-mb {
    display: none;
}
.block2-pc {
    display: block;
}
.block2-mb {
    display: none;
}

/* section:last-child {
    margin-bottom: 4em;
} */

#CONTENT-1-bg1 #navB {
    display: block;
    padding: 0;
    height: auto;
    margin-top: 0;
    z-index: 2;
}
#navB.sticky section {
    padding: 4px;
}
body #navB.sticky {
    width: 100% !important;
    max-width: 100% !important;
}
.tabmenu.sticky {
    position: sticky;
    background: #000;
}
.tabmenu {
    display: none;
    height: 0;
    padding: 0;
}
.tabmenu.sticky {
    top: 0;
}
.sale-event {
    margin: 4% 0;
}

.sale-item {
    position: relative;
    
}
.sale-item .copy-it {
    position: absolute;
    bottom: 2%;
    left: 50%;
    transform: translateX(-50%);
    max-width: 78%;
    width: 100%;
}
/* .entertainment a.copy-it:hover {
    transform: translateX(-50%);
} */

.likegoods {
    background: #75b65d url(../images/like/frame-bg.png);
    border-radius: 2em;
    width: 99%;
    margin-bottom: 2em;
    
}
.likegoods.ccc {
    background: #8053db url(../images/like/frame-bg1.png);
    border-radius: 2em;
    width: 99%;
}

.likegoods.acg {
    background: #eb5f90 url(../images/like/frame-bg2.png);
    border-radius: 2em;
    width: 99%;
}

img.date {
    max-width: 42%;
}
.likegoods.d11 {
    background: #fc4e74 url(../images/d11/frame-1111-bg.png);
    border-radius: 2em;
    width: 99%;
    margin-bottom: 2em;
}
.likegoods.bf {
    background: #404040 url(../images/bf/frame-bf-bg.png);
    border-radius: 2em;
    width: 99%;
    margin-bottom: 2em;
}
.likegoods.toy {
    background: #8053db url(../images/toy/frame-toy-bg.png);
    border-radius: 2em;
    width: 99%;
    margin-bottom: 2em;
}
.likegoods.ccc .dp-flex,
.likegoods .dp-flex {
    justify-content: space-between;
    padding: 0 1%;
    position: relative;
}
.likegoods .swiper-slide-active {
    transform: scale(0.9);
}
.likegoods .swiper-slide-active:hover {
    transform: scale(1);
}





/* 我的英雄9只有你 */

.c-w2b {
    width: 49%;
    padding: 0 0.4em;
    margin-top: 2em;
}
.c-w2b a.more {
    margin-top: .5em;
}
.dp-flex.anchor {
    justify-content: space-around;
}
.dp-flex.anchor,
.dp-flex:has(.event-info) {
    margin: 2% 0;
}
.event-info.c-w2b {
    position: relative;
    width: 50%;
}
.event-btn-info {
    position: absolute;
    bottom: -6%;
    left: calc(50% - 25%);
    background: unset;
    border: unset;
    max-width: 50%;
}
#CONTENT-1-bg1 img.event-go {
    position: absolute;
    bottom: 13%;
    right: calc(50% - 42%);
    background: unset;
    border: unset;
    max-width: 13%;
}
.sale-block {
    margin: 2% 0;
}
.theme-block {
    position: relative;
    /* margin: 2% 0; */
}
.theme-block > .dp-flex {
    position: absolute;
    inset: 0 0 0 0;
    padding: 3%;
    margin-top: 14.5%;
}
.theme-block.theme2 > .dp-flex {
    margin-top: -2%;
}
.theme-block.theme2 {
    margin-top: 2%;
}
.theme-item {
    gap: 12px;
}
.theme-item a {
    flex: 0 0 48%;
}
.jb-event .c-w3 {
    width: 33%;
    padding: 1% 0;
}
.c-w2b.more {
    padding: 2% 0;
}

.sale-block a.c-w4 {
    position: relative;
    overflow: hidden;
}
.sale-block a.c-w4.wait::after {
    content: url(../images/0827/wait.png);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-59%, -58%);
    scale: 0.84;
}
.sale-block a.c-w4.end {
    filter: grayscale(1);
}
.sale-block a.c-w4.end::after {
    content: url(../images/0827/end.png);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-59%, -58%);
    scale: 0.84;
}
.coupon-1 {
    margin-bottom: 4%;
}
.btn-h {
    transition: ease 0.2s;
}
.btn-h:hover {
    transform: translateY(-5px);
}
.sale-d-item {
    position: relative;
    max-width: 38%;
    width: 100%;
    margin-left: 3%;
}
.sale-d-item .swiper-block {
    position: absolute;
    inset: 22% 0 0 0;
    max-width: 82%;
}
.sale-d-item .swiper-slide {
    position: relative;
}
.sale-d-item .swiper-slide:has(a.end) {
    filter: grayscale(1) brightness(0.5);
}
.sale-all {
    max-width: 44%;
    width: 100%;
    margin: 0 3%;
    /* margin: auto; */
}
section .pagi8 .swiper-pagination-bullet {
    background: #aaa;
    opacity: .5;
} 
section .pagi8 .swiper-pagination-bullet-active {
    background: #a13bf6;
    opacity: 1;
}
/* .sale-d-item, .sale-all {
    margin: auto;
} */
.sale-day {
    position: relative;
    background: url(../images/1201/bg_od_bg.png) center center / 100% no-repeat;
    padding: 8em 0;
    width: 100%;
    max-width: 99%;
}
.sale-day a {
    scale: 0.98;
}
.sale-day a:hover {
    scale: 1;
}
.sale-day a.copy-it {
    position: absolute;
    top: auto;
    left: 0;
    right: 0;
    bottom: 12px;
    /* width: 100%;
    max-width: 75%; */
    margin: auto;
    padding: 0 15%;
}
.sale-day a.copy-it:hover {
    scale: 1.1;
}
/* 品類5折新版型241127 */
.campaign-set {
    background: url(../images/1201/frame1.png) 100% / contain no-repeat;
    padding: 3% 8%;
    align-items: center;
    justify-content: center;
}
.campaign-m a {
    padding: 3%;
}
.campaign-item a {
    padding: .5%;
    padding-left: 2%;
}
/* 會員大禮包新版型241127 */
.gift-block .gift {
    padding: 1%;
}
.gift {
    position: relative;
}
.gift-btn {
    position: absolute;
    bottom: 0;
    right: 7%;
}

.gift-btn2 {
    position: absolute;
    bottom: 0;
    right: 5%;
    top: 41%;
}
/* 多組自動熄燈-暖身神券 */
.g-block .coupon-c-1 a.c-w6 {
    /* width: 12%; */
/*     width: 30%; */
}
.coupon-c-1 .calendar-coupon {
    margin: 0;
    /* gap: 6px; */
    gap: 16px;
}
.coupon-c-1 .calendar-coupon time {
position: absolute;
  top: 11%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 2.5rem;
  line-height: 2rem;
  font-family: Arial;
  font-weight: 800;
  color: #fcefc3;
  text-shadow: -1px -1px 0 #222, 1px -1px 0 #222, -1px 1px 0 #222, 1px 1px 0 #222;
}
.g-block .coupon-c-1.grid4 a.c-w6 {
    width: 33%;
}
.coupon-c-1.grid4 .calendar-coupon {
    justify-content: flex-start;
}
.coupon-c-1.grid4 .calendar-coupon time {
    font-size: .95rem;
    top: 10%;
    left: 9.5%;
    letter-spacing: -.5px;
}
.coupon-c-2 {
    background: url(../images/1101/bn-300.png) center center / 100% no-repeat;
    position: relative;
    padding-top: 29.4%;
}
.coupon-c-2 .dp-flex,
.coupon-c-2 .calendar-coupon {
    max-width: 50%;
    width: 100%;
    margin: 0 4% 0 auto;
    position: absolute;
    inset: 0 0 0 0;
    align-items: center;
}
.coupon-c-2 .calendar-coupon a {
    max-width: 32%;
    width: 100%;
    display: flex;
}
.coupon-c-2 .calendar-coupon time {
    left: 2.3vw;
    top: 0.6vw;
    font-size: 1.3rem;
    letter-spacing: -1px;
    font-style: unset;
    color: #1a1a1a;
}
.bn-link {
    padding: 1% 1.2%;
}

/* tab menu cate品類區 */
.navB.sticky {
    position: sticky;
    top: 0;
    z-index: 5;
    /* background: #fff; */
    /* padding-bottom: 1em; */
    box-shadow: 0 4px 4px #00000050;
    padding: 0;
}
.navB section {
    margin-top: unset;
}
.tab .dp-flex {
    align-items: center;
    justify-content: center;
    /* height: 3.5em; */
    flex-wrap: nowrap;
    margin: 0 auto;
    width: 100%;
}
.sticky .tab .dp-flex {
    justify-content: space-evenly;
}

/* 1月主會場 */
/* 241226-輪播強檔 */
/* tab頁籤 */
#CONTENT-1-bg1 .container:has( > .tab-group) {
    width: 100%;
    overflow-x: auto;
    margin: auto;
    z-index: 99;
/*     position: sticky;
    top: 0;
    padding: 0.5em;
    padding: 0;
    margin-bottom: -4px; */
    /* max-width: 100% !important; */
    /* transition: all 1s ease-out; */
    transition: all .3s ease-out;
    /* position: relative; */
}
#CONTENT-1-bg1 .container:has(.tab-group.sticky) {
    /* background: #000000a6; */
    max-height: fit-content;
    padding: 0;
}
.tab-group {
    max-width: 1200px;
    margin: auto;
    position: sticky;
    top: 0;
    z-index: 99;
}
/* .tab-group.sticky img {
    max-height: 60px;
} */
.tab-group a label img {
    cursor: pointer;
    display: block;
}
.tab-group a {
    /* max-width: 19%; */
    /* max-width: 32%; */
    width: 100%;
    margin: auto;
}
/* .tab-group a.tabs.active {
    scale: 1;
} */
.tab-group a img {
    transition: all .3s ease;
}
.tab-group a img:nth-child(2) {
    display: none;
}
/* .tab-group a:hover img:nth-child(2), */
.tab-group a.tabs.active img:nth-child(2) {
    display: block;
}
/* .tab-group a:hover img:nth-child(2) {
    filter: drop-shadow(2px 4px 6px black);
    box-shadow: 16px 16px 4px -4px rgba(0, 0, 0, 0.2),
            12px 12px 0px 8px rgba(0, 0, 0, 0.2) inset;
} */
/* .tab-group a:hover img:nth-child(3), */
.tab-group a.tabs.active img:nth-child(3) {
    /* filter: invert(1) opacity(.8); */
    /* outline: 1px solid #000; */
    display: none;
}
/* .tab-group a.active {
    filter: invert(1);
} */
.tab-content {
    display: none;
}
.tab-content.active {
    display: flex;
    flex-wrap: wrap;
}
.content-group {
    border-radius: 15px;
}
.tab-block {
    position: relative;
}
.campaign,
.power {
    position: relative;
}
.campaign .tab-group {
    max-width: 66%;
    margin-left: auto;
    margin-right: .5em;
    width: 100%;
    position: absolute;
    right: 0;
    top: 14%;
}
.campaign .tab-group > .dp-flex {
    gap: 1em;
    padding: 0 1em;
}
.campaign .tab-group a.tabs {
    background: #fff;
    color: #e7490e;
    border-radius: 5em;
    will-change: transform;
    transform-origin: center;
    box-sizing: border-box;
    flex: 1 1 0;
    flex: 0 0 15%;
    max-width: unset;
    gap: 2px;
    display: flex;
}
.campaign .tab-group a.tabs label {
    color: #e7490e;
}
.campaign .tab-group a.active {
    background: #e7490e;
    color: #fff;
    filter: unset;
}
.campaign .tab-group a.active label {
    color: #fff;
}
.campaign .campaign-item {
    background: transparent url(../images/camp-0123/50off_bg.png) center center / 100% no-repeat;
    padding: 8% .5% 2%;
    font-weight: 900;
    overflow-x: auto; /* 水平滾動條 */
}
.campaign .campaign-item a {
    padding: 1%;
}


.KV-contnet {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 54%;
    left: 50%;
    transform: translate(-50%, -50%);
    max-width: 84%;
    width: 100%;
}
.click-hint {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

/* 三月主會場 購物獵人 */
.map {
    /* background: url(../images/0228/point-taskboard.png); */
    position: relative;
    margin-top: 6%;
}
.map-content {
    position: absolute;
    inset: 0 0 0 0;
    padding: 3% 6%;
}
.map-content a {
    padding: .5% 0 0 .5%;
}

.block-tt {
    color: #606060;
    font-size: 2rem;
    font-weight: bold;
    line-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.5em 0 0em;
    width: 70%;
    max-width: 100%;
    z-index: 2;
    top: -2.2%;
    margin: 0 auto;
}


.block-tt img {
    max-width: 100%;
    margin: auto;
}
.sub-tt {
    color: #606060;
    font-size: 2rem;
    font-weight: bold;
    line-height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0.3em 0 0em;
    width: 60%;
    max-width: 100%;
    z-index: 2;
    top: -2.2%;
    margin: 0 auto;
}


.sub-tt img {
    max-width: 100%;
    margin: auto;
}
/* 限時任務+戰力強化 */
section.campaign {
    background: url(../images/0228/scroll.png) no-repeat 100% / 100%;
    padding: 4% 0;
}
section.power {
    padding: 4% 0;
}
section.campaign .swiper-container
section.power .swiper-container {
    margin: 12% 4% 0;
    max-width: 90%;
}
section .swiper-button-prev::after {
    content: url(../images/arrow-l.png);
    scale: .6;
    filter: hue-rotate(342deg);
}
section .swiper-button-next::after {
    content: url(../images/arrow-r.png);
    scale: .6;
    filter: hue-rotate(342deg);
}
.swiper-pagination span.swiper-pagination-bullet {
    background: #2c3878 !important;
}
/* title */
.campaign .block-tt {
    margin-top: 6%;
}
.power .block-tt {
    margin-top: 7%;
}
.power .block-tt {
    margin-bottom: -12%;
}
.gift-1 .block-tt {
    position: relative;
}
.g-block-pd .block-tt {
    top: -12%;
}

.container-s {
    max-width: 82%;
    margin: 6% auto 0;
}

/* 狩獵任務 */
.swiper-goods2 {
    z-index: 10;
}
.product {
    position: relative;
}
.product a {
    padding-top: 100%;
}
.product .event-date {
    position: absolute;
    left: -6%;
    bottom: -6%;
    max-width: 32%;
    width: 100%;
}
.product .event-date .day {
    position: absolute;
    inset: 0 0 0 0;
    color: #f4ee69;
    font-size: 1.4rem;
    line-height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial;
}

/* 隱藏任務 */
.special .block-tt {
    margin-top: 1%;
}
.hidden-task {
    position: relative;
    scale: .95;
}
.hidden-task .event-date {
    position: absolute;
    left: 1%;
    top: -4%;
    max-width: 20%;
    width: 100%;
}
.hidden-task .event-date .day {
    position: absolute;
    inset: 0 0 0 0;
    color: #f4ee69;
    font-size: 1.4rem;
    line-height: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: Arial;
}
.go-btn {
    position: absolute;
    bottom: 10%;
    right: -26%;
}
.go-btn a {
    margin: 1em;
}
.mission-pdblock>div:nth-child(even) {
    margin-right: auto;
    margin-left: 0;
}
.mission-pdblock>div:nth-child(odd) {
    margin-right: 0;
    margin-left: auto;
}

/* 卷軸內容延伸背景 */
/* .g-block-h .b-t::before {
    padding-top: 10.5%;
    background: url(../images/0228/frame1-top.png) center top / 100% no-repeat;
} */
.g-block.g-block-h.w-l > .b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: url(../images/0228/frame1-top.png) center bottom / 100% no-repeat;
    padding-top: 12%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 1;
}
.g-block.g-block-h.w-l > .b-c {
    background: url(../images/0228/frame1-middle.png) top center / 100% repeat-y;
    text-align: left;
    /* color: #7f6544; */
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.1rem;
    padding: 2em 0 1em;
    margin-top: -3em;
    z-index: 0;
}
.g-block.g-block-h > .b-b::before {
    content: '';
    background: url(../images/0228/frame1-bottom.png) center top / 100% no-repeat;
    padding-top: 6vw;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-top: -2em;
}
.mission-title {
    max-width: 80%;
    margin: auto;
}

/* 菁英&女王 */
.g-block-pd {
    margin-top: 10%;
}
.g-block.g-block-pd.w-l>.b-t::before {
    /* content: url(../images/block-t1.png); */
    content: '';
    background: #ebe9e2 url(../images/0228/frame2-top.png) center top / 100% no-repeat;
    padding-top: 3.6%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.g-block.g-block-pd.w-l>.b-c {
    background: #ebe9e2 url(../images/0228/frame2-middle.png) top center / 100% repeat-y;
    text-align: left;
    /* color: #7f6544; */
    font-weight: 600;
    font-size: .8rem;
    line-height: 1.1rem;
    padding: 1% 0;
    /* margin-top: -2vw; */
    z-index: 0;
}

.g-block.g-block-pd.w-l>.b-b::before {
    content: '';
    background: #ebe9e2 url(../images/0228/frame2-bottom.png) center top / 100% no-repeat;
    padding-top: 3.6%;
    max-width: 100%;
    width: 100%;
    display: inline-block;
    position: relative;
    z-index: 1;
    margin-top: -2em;
}
/* 狩獵補給包 */
.gift-1 .go-btn {
    position: absolute;
    right: 3%;
    bottom: -2%;
    display: block;
    width: fit-content;
}


/* 狩獵情報站&魔物獵人專家&推薦獵物 */
.entertainment {
    margin-bottom: 2%;
    margin-top: 10%;
}
.expert,
.recommend {
    margin-top: 14%;
}
.recommend .block-tt {
    top: -22%;
}
.recommend .dp-flex > div {
    padding: 1%;
}
.entertainment .c-w3,
.expert .c-w3 {
    padding: .3em .2em;
}

.entertainment .block-tt {
    margin-top: -10%;
}
.expert .block-tt {
    margin-top: -12%;
}
.entertainment .dp-flex a,
.expert .dp-flex a {
    margin: 2%;
}

/* 4月主會場 */
.fixed {
    position: absolute;
    inset: 0 0 0 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
}
.swiper-today {
    padding: 0;
}
.swiper-today a span {
    position: absolute;
    right: 12%;
    bottom: 12%;
    max-width: 34%;
}
.swiper-today .swiper-slide a {
    display: block;
    max-width: 100%;
    margin: 0 auto;
}
/* .block-tt.text {
    font-size: 2rem;
    background: #000000;
    color: #fff;
    line-height: 3rem;
    padding: 0;
    margin-top: 1%;
    clip-path: polygon(60px 0%, 100% 0%, calc(100% - 60px) 100%, 0% 100%);
    background-color: #3d3d3d;
    opacity: 1;
    background-image:  repeating-linear-gradient(45deg, #000000 25%, transparent 25%, transparent 75%, #000000 75%, #000000), repeating-linear-gradient(45deg, #000000 25%, #3d3d3d 25%, #3d3d3d 75%, #000000 75%, #000000);
    background-position: 0 0, 18px 18px;
    background-size: 36px 36px;
} */
a.gift-anchor {
    position: relative;
    display: block;
    /* width: fit-content; */
}
a.gift-anchor > img {
    position: absolute;
    bottom: 14%;
    left: 20%;
    max-width: 80%;
    filter: grayscale(1);
}
a.gift-anchor > img:hover {
    filter: grayscale(0);
}
/* .block-discount .dp-flex a {
    padding: 1%;
} */
a.more-btn,
a.more-btn:link,
a.more-btn:visited {
    /* background: orange; */
    color: #000;
    font-size: 2rem;
    font-weight: 900;
    line-height: 2rem;
    padding: 1% 2%;
    margin-top: 0%;
}
.block-more a {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    padding: 1%;
}
.block-more a img {
    overflow: hidden;
    border-radius: 10rem;
    border: 1px solid #ccc;
}
.block-more a span {
    font-size: 1rem;
    font-weight: 900;
    margin: 3% 0 9%;
}
.Modalcontent.brand .block-more a span {
    font-size: .7rem;
}
.block-cat .dp-flex {
    margin: 2% 0;
}
.block-cat a {
    padding: 1% .5%;
}
/* .block-all-tab {
    background: #fff url(../images/0701/bg-pc.png) 100% fixed;
    border: 4px solid #000;
    padding: 0 4%;
    margin: 0 10%;
}
 */
#CONTENT-1-bg1 .block-tab:has(.sticky) + #top {
    padding-top: 8%;
    margin-top: 3%;
}

/* v20250421新增最新預購 */
.swiper-block:has(.swiper-preorder) {
max-width: 100%;
}
.swiper-preorder a {
 background: #fff;
    border: 6px solid #a258fb;
    border-radius: 1rem;
    border-style:inset;
    padding: 2% 2%; 
    position: relative;
}
.swiper-preorder span.pod-txt {
    color: #000;
    font-size: 1rem;
    padding: 2% 0;
    line-height: 140%;
    font-weight: 900;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    box-sizing: border-box;
}
.pod-day {
    position: absolute;
    bottom: 25%;
    color: #fff;
background: #241600;
background: linear-gradient(90deg, rgba(36, 22, 0, 0.3) 0%, rgb(41, 56, 124) 17%, rgb(151, 56, 124) 83%, rgba(168, 55, 7, 0.3) 100%);
    display: block;
    width: 86%;
    font-size: 1rem;
    line-height: 140%;
}
.pod-day::after {
    content: ' '
}

/* .prev-preod,.next-preod {
    display: none;
} */




/* v20250422 */
/* 精選店家 */
.mall-pd {
    /* background: url(../images/tab1/pd-mall-bg.png) no-repeat center center / cover; */
    position: relative;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    padding: 5% 1%;
    margin-top: 4%;
    z-index: 1;
}
.mall-pd::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/tab1/pd-mall-bg.png) no-repeat center center / 98% 98%;
    filter: hue-rotate(295deg); /* 濾色 */
    z-index: -1; 
}
.mall-pd .pd-img {
    aspect-ratio: 1/1; /* 比例 */
    overflow: hidden;
    border-radius: .5em;
    max-width: 45%;
    margin-top: 6%;
    position: relative;
}
.mall-pd .pd-img img {
    min-width: 105%;
    min-height: 105%;
    width: 100%;
    height: 100%;
    object-fit: cover; /* 改為 cover 使圖片填滿容器 */
    object-position: center; /* 確保圖片居中裁剪 */
}
.mall-pd  .pd-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    max-width: 50%;
    width: 100%;
    color: #fff;
    margin-top: 6%;
}
.mall-pd .pd-price {
    display: block;
    max-width: 100%;
    width: 100%;
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: 8px;
    font-family: Arial, noto sans-serif;
}
.mall-pd .pd-price::before {
    content: '促銷價$';
    font-size: .7rem;
}
.mall-pd .pd-txt {
    margin: auto;
    width: 100%;
    padding: 0 0 0 5%;
    overflow: hidden;
    font-size: .9rem;
    line-height: 140%;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    box-sizing: border-box;
}
.mall-pd .pd-mall-name {
    position: absolute;
    top: 0;
    /* background: url(../images/tab1/pd-mall-name.png) no-repeat center center / contain; */
    max-width: 90%;
    width: 100%;
    font-size: clamp(1.1rem, 1vw, 1.3rem);
    font-weight: 900;
    padding: 2%;
    line-height: 2rem;
    margin-top: -10%;
    color: #fff;
    font-family: noto sans-serif;
}
.mall-pd .pd-mall-name::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url(../images/tab1/pd-mall-name.png) no-repeat center center / contain;
    filter: hue-rotate(0deg); /* 濾色 */
    z-index: -1; 
}

/* howhow短影 */
.dp-flex:has(.video-container) {
    justify-content: space-evenly;
}
.video-container {
    position: relative;
    width: 100%;
    max-width: 40%;
    /* max-width: 430px; */
    margin: 0;
}
.video-container::before {
    content: "";
    display: block;
    padding-top: 177.67%; /* 764/430 * 100% = 177.67% (9:16比例) */
}
.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}
/* .bn-container {
    width: 100%;
    max-width: 40%;
    margin: 0 auto;
    border: .5rem solid #000;
} */

.bn-container {
    width: 100%;
    max-width: 40%;
    margin: 0;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 3/2;
    color: white;
}

.color-border {
    border-width: .5rem;
    border-style: solid;
    border-color: transparent;
    border-radius: 16px;
    border-image-source: linear-gradient(to right, #9f7ca4, #cb7da5);
    border-image-slice: 1;
}

/* 獨家線上首發商品 */
/* .special-event a {
    border-radius: 1rem;
    overflow: hidden;
    display: block;
} */

.swiper {
    border-radius: 15px;
    overflow: hidden;
}

.swiper-wrapper {
    border-radius: 15px;
}

.swiper-slide {
    border-radius: 15px;
}

.swiper-slide img {
    border-radius: 15px;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 左側menu */
#playground #menu-left .summary-expansion-unordered-list {
    grid-template-columns: 100%;
}


/* 小於2560px 大於m版布局 */
@media (min-width: 737px) and (max-width: 2560px) {
    
}

@media screen and (max-width: 736px) {
    /* m版手機布局 */
    /* .c-1m, .c-2m, .c-3m,
    .c-4m, .c-5m, .c-6m,
    .c-7m, .c-8m, .c-9m,
    .c-10m, .c-11m, .c-12m {
        box-sizing: border-box;
    } */
    .c-1m {
        flex: 0 0 8.33%;
    }
    .c-2m {
        flex: 0 0 16.66%;
    }
    .c-3m {
        flex: 0 0 25%;
    }
    .c-4m {
        flex: 0 0 33.33%;
    }
    .c-5m {
        flex: 0 0 41.66%;
    }
    .c-6m {
        flex: 0 0 48%;
    }
    .c-7m {
        flex: 0 0 58.33%;
    }
    .c-8m {
        flex: 0 0 66.66%;
    }
    .c-9m {
        flex: 0 0 75%;
    }
    .c-10m {
        flex: 0 0 83.33%;
    }
    .c-11m {
        flex: 0 0 91.66%;
    }
    .c-12m {
        flex: 0 0 100%;
    }

    /* 頁籤 */
    .tab-group {
        overflow: scroll;
        width: max-content;
        flex-wrap: nowrap;
        overflow-y: scroll;
        justify-content: unset;
    }
    .tab-group label {
        max-width: 22vw;
        width: 100%;
        margin: 0 .2em;
    }
    .tab-group label {
        background: url(../images/nav-btn1.png) 0 / 100% no-repeat;
        color: #000;
        width: 100%;
        max-width: 100%;
    }

    .c-hover a:hover {
        transform: unset;
    }
    /* 卡片 */
    #CONTENT-1-bg1 .main-group .container .card6 {
        padding: 2% 1%;
    }
    .card6 .cards {
        margin: 8% 0 1%;
    }
    .card6 .cards .cards-c {
        padding: 8% 0% 16%;
    }
    .card6 .cards .cards_btn {
        margin: 0 auto;
        left: 0;
        border-radius: 8px 8px 0 0;
        padding: 2px 16px;
    }
    .card7 .cards_info_m {
        /* justify-content: center; */
    }
    .card7 .sp::before {
        content: '促銷價$';
        font-size: 0.9rem;
        margin-left: unset;
    }
    .card7 .ori {
        float: left;
        font-size: 0.8rem;
        line-height: 0.8rem;
    }
    .card7 .sp {
        font-size: 1.1rem;
        line-height: 1.1rem;
    }

    /* 分類1 */
    .card-cate1 .cate {
        width: 92%;
        margin: 1% auto;
    }
    .card-cate1 .cate .cate_img {
        max-width: 30%;
    }
    .card-cate1 .cate .cate_b {
        padding: 0 1em;
    }
    #CONTENT-1-bg1 .main-group .container.card-cate2 {
        padding: 1% 2%;
    }
    .card-cate2 .cate {
        padding: 1%;
    }
    #CONTENT-1-bg1 .main-group .container.card-cate6 {
        padding: 0 8%;
    }
    .card-cate6 .cate {
        padding: 1.5%;
        margin: auto;
    }

    /* logo bar */
    .logo-bar {
        padding: 4px 0 0px;
        text-align: left;
        margin-top: 40px;
    }
    .logo-bar a {
        text-align: left;
    }
    .logo-bar a img {
        max-width: 40%;
        width: 100%;
        margin: unset;
        /* margin-top: 36px; */
        padding: 2px 0;
        /* margin: 0 auto; */
    }

    /* mbt-menubar */
    body #menu .menu-content {
        background: #0073e6;
    }

    /* search bar */
    body .search-box {
        /* bottom: -90px; */
        bottom: -40px;
        /* bottom: -88px; */
    }
    body .search-bar {
        box-shadow: 0 6px 4px 1px #2626263b, 0 -1px 4px 0 #2626261f;
    }
    
    /* 共用 */
    .dp-block {
        display: none !important;
    }

    .dp-mb-block {
        display: block;
    }
    .dp-mb-flex {
        display: flex;
    }
    .dp-mb-none {
        display: none !important;
    }
    .font-s {
        font-size: .7rem;
    }

    /* old */
    /* 區塊標題 */
    .block-tt {
        width: 100%;
        /* margin: -6px auto; */
    }
    /* 優惠券 */
    .c-w3 {
        width: 48%;
        margin: unset;
    }

    .c-w2 {
        width: 50%;
        margin: .2em auto;
    }

    .c-w2.mb-2 {
        width: 50%;
    }

    .c-w6 {
        width: 31%;
    }

    .c-w6 p {
        font-size: 1.5rem;
        line-height: 1rem;
    }

    .code span {
        font-size: .8rem;
        line-height: .8rem;
    }

    .c-w3.code span {
        right: 5%;
        bottom: 35%;
    }

    .c-w2.code span {
        width: 65%;
        right: 9%;
        bottom: 23%;
        font-size: 1rem;
    }

    .coupon-block > div {
        padding: .2em .3em;
    }

    /* 24-11月主會場 */
    .coupon-block .title {
        position: relative;
        margin-right: 12%;
    }
    .title .title-link {
        position: absolute;
        inset: 0;
        margin-left: auto;
        margin-right: 6%;
        display: inline-block;
        /* max-width: fit-content; */
        max-width: 16%;
    }
    a.c-w1.bn-link-l {
        width: 98%;
    }
    /* 雙11攻略 */
    .cbc1 .content {
        position: relative;
    }
    .cbc1 .content .content-link {
        position: absolute;
        inset: 0 0 0 0;
    }

    /* 12月主會場手機 */
    body #CONTENT-1-bg1 {
        background: #fbf7cd url(../images/0701/bg-mb.jpg) bottom left / 100% fixed;
        /* background: #0073e6; */
    }
    
    #CONTENT-1-bg1 .logo-bar .container {
        padding: .5em;
    }
    .main-kv {
        background: url(../images/0701/kv-mb.png) top center/ 100% no-repeat;
        mask-image: unset;
        /* margin-top: 40px; */
        padding-top: 112%;
        overflow: hidden;
    }
    .main-kv .logo {
        top: 1.5em;
        left: 1em;
        max-width: 80px;
        width: 100%;
    }
    .kv-main {
        max-width: 175%;
        width: 175%;
        /* margin: unset; */
        /* padding: 59vw 0vw 2vw; */
        top: 30%;
        left: calc(50% - 88%);
    }
    .kv-bg {
        padding-top: 1em;
        margin: 0 0 1em;
    }

    .kv-bg-re {
        padding-top: 1em;
        margin: 0 0 1em;
    }
   
    section {
        margin: 1em auto 06% auto 0;
    }
    .blindbox-btn .c-w3 {
        max-width: 40%;
        width: 100%;
        margin: .5em;
    }
    .click-hint {
        max-width: 35%;
        width: 100%;
    }
    .cp1_b, .cp2, .cp3_b {
        max-width: 96%;
        margin: auto;
    }
    .cp1 {
        width: 96%;
        top: 59%;
        padding: 0 0.5em;
    }
    .cp1 a {
        padding: unset;
        width: 100%;
        padding: 0 2px;
    }
    .cp3 {
        bottom: -18%;
        width: 85%;
    }
    .coupon-block .c-w3 {
        width: 96%;
    }
    .cp4 {
        bottom: -24%;
        width: 86%;
    }
    .tab {
        display: block;
        width: 100%;
        max-width: 94%;
        margin: 0 auto;
        background: #fff;
        align-items: center;
        justify-content: center;
        border-radius: .8em .8em .8em .8em;
        border: .25em solid #000;
        margin: 0 auto 0;
        transition: ease .2s;
        overflow: auto;
    }
    
    #CONTENT-1-bg1 #navB {
        margin-top: 6%;
    }
    #navB.sticky section {
        padding: 0;
    }
    #navB a.gift-anchor:link {
        background: #000;
        color: #fff;
        margin: 4px;
        font-size: .85rem;
        line-height: 1rem;
        padding: 4px 6px;
        width: 4em;
    }
    #navB a.gift-anchor:link::before {
        background: unset;
    }
    #navB .tab {
        /* border: unset;
        background: unset; */
    }
    #navB.tabmenu.sticky {
        /* background: #fff; */
    }
    #CONTENT-1-bg1 .container#navA {
        display: block;
        padding: 0;
        height: auto;
    }
    .tabmenu.sticky {
        position: sticky;
        display: block;
        top: 0;
        z-index: 5;
        /* background: #fff; */
        /* padding-bottom: 1em; */
        box-shadow: 0 4px 4px #00000050;
        padding: 0;
    }
    .tabmenu section {
        margin-top: unset;
    }
    #CONTENT-1-bg1 .container.tabmenu.sticky {
        padding: 0;
    }
    .sticky .tab {
        width: 100%;
        max-width: 100%;
        border-radius: 0;
        height: 4em;
    }
    .sticky .tab .dp-flex {
        /* justify-content: center; */
    }
    .tab .dp-flex {
        align-items: center;
        justify-content: center;
        height: 3.5em;
        flex-wrap: nowrap;
        width: fit-content;
    }
    .tab-item {
        width: 28%;
    }
    .week-event {
        padding: .5em;
    }
    .bn-link-s {
        width: 50%;
        margin: .2em auto;
    }
    .bn-link-l {
        width: 100%;
    }
    .block1-pc {
        display: none;
    }
    .block1-mb {
        display: flex;
    }
    .block2-pc {
        display: none;
    }
    .block2-mb {
        display: flex;
    }
    section .swiper-button-prev {
        left: -4%;
    }
    section .swiper-button-next {
        right: -4%;
    }
    section .swiper-button-prev::after,
    section .swiper-button-next::after {
        scale: .4;
    }
    .wait-event::before,
    .end-event::before {
        transform: translate(-100%, -90%);
        scale: .5;
    }
    a.gift-anchor:link {
  /*       font-size: .85rem;
        line-height: 1rem;
        padding: 2px 6px; */
        /* margin: 0 5px; */
   /*      letter-spacing: -1px; */
/*         width: fit-content; */
        white-space: nowrap;
/*         margin: 0 6px; */
    }
    .gift-content {
        padding: .25em;
        clip-path: polygon(0 14px,14px 0,calc(100% - 14px) 0,100% 14px,100% calc(100% - 14px),calc(100% - 14px) 100%,14px 100%,0 calc(100% - 14px));
        margin: .5em;
    }
    .gift-event {
        padding: 2em 0em .1em;
        clip-path: polygon(0 12px,12px 0,calc(100% - 12px) 0,100% 12px,100% calc(100% - 12px),calc(100% - 12px) 100%,12px 100%,0 calc(100% - 12px));
    }
    .gift-tt {
        padding: 0 6%;
    }
    .w-l .b-c > * {
        max-width: 92vw;
    }

    .w-l .b-c > .shop-coupon {
        margin: 4% auto 5%;
    }
    .w-l .b-c > .item-coupon {
        margin: 6% auto 8%;
    }
    .w-l .b-c > .item-coupon:last-child {
        margin: 6% auto 4%;
    }
    .w-l .b-c > .item-coupon2 {
        margin: 4% auto 5%;
    }

    .g-block:first-child {
        margin: 1.5em auto 0;
    }

    .g-block:nth-child(5) {
        margin: 0 1em;
    }

    .w-l .b-c > .g-block {
        margin: 0 auto 2%;
        max-width: 98vw;
    }
    .g-block h3 {
        padding-top: .5em;
        font-size: .9rem;
        line-height: 1.1rem;
    }
    .g-block p {
        font-size: .7rem;
        line-height: 1rem;
        text-align: justify;
    }
    .g-block table {
        font-size: .7rem;
        line-height: 1rem;
        width:100%;
        /* table-layout: fixed;
        overflow-wrap: break-word; */
    }
    .g-block tr th, .g-block tr td {
        vertical-align: middle;
        padding: 2px;
    }
    .g-block a.c-w6 {
        font-size: .8rem;
        width: 48%;
        margin: .2em 0;
    }
    .g-block .coupon-c-1.grid4 a.c-w6 {
        width: 48%;
        padding: 0;
    }
    .coupon-c-1 .calendar-coupon {
        gap: 4px;
        justify-content: flex-start;
    }
    .g-block .coupon-c-1 a.c-w6 {
        width: 32%;
        padding: 0 2px;
    }
    .coupon-c-1.grid4 .calendar-coupon time {
        font-size: .7rem;
        left: 8.5%;
    }
    .sale-event {
        max-width: 96%;
        margin: 0.4em auto;
    }
    .sale-event .c-w2,
    .sale-event .c-w3 {
        width: 25%;
    }
    .sale-event a:nth-child(1) {
        order: 0;
    }
    .sale-event a:nth-child(3) {
        order: 3;
    }
    .sale-event a:nth-child(4) {
        order: 1;
    }
    .sale-event a:nth-child(5) {
        order: 2;
    }
    .coupon-block.dp-mb-flex {
        max-width: 94%;
        width: 100%;
        margin-top: 4px;
    }
    
    .g-block {
        max-width: 100%;
    }
    .w-l .b-c > .g-block:first-child {
        /* margin: 1em auto .5em; */
        margin: 0 auto 6%;
        max-width: 98vw;
    }
    .g-block1 .b-t::before {
        background: url(../images/1201/block-t1-mb.png) center center / 100% no-repeat;
        padding-top: 10%;
    }
    .g-block2 .b-t::before {
        background: url(../images/1201/block-t2-mb.png) center center / 100% no-repeat;
        padding-top: 10%;
    }
    .g-block2 .c-w1.member {
        margin: 0.5em auto;
    }
    .g-block3 .b-t::before {
        background: url(../images/1201/block-t3-mb.png) center center / 100% no-repeat;
        padding-top: 10%;
    }
    .g-block3-2 .b-t::before {
        background: url(../images/1201/block-t4-mb.png) center center / 100% no-repeat;
        padding-top: 13%;
    }

    .g-block3-3 .b-t::before {
        background: url(../images/1201/block-t4-mb.png) center center / 100% no-repeat;
        padding-top: 13%;
        margin-top: -1.5em;
    }


    .g-block3-4 .b-t::before {
        background: url(../images/1201/block-t5-mb.png) center center / 100% no-repeat;
        padding-top: 13%;
        margin-top: 0em;
    }


    .g-block3-5 .b-t::before {
        background: url(../images/1201/block-t7-mb.png) center center / 100% no-repeat;
        padding-top: 10.5%;
        margin-top: 0em;
    }
    
    .g-block.g-block4.w-l > .b-t::before {
        /* background: url(../images/1201/fr-top.png) center center / 100% no-repeat; */
        padding-top: 8%;
    }
    .g-block5-3 .b-t::before {
        padding-top: 3%;
    }
    .g-block5-3 .w-l .b-c {
        padding: 0 0 .3em;
    }
    .g-block5-4 .b-t::before {
        padding-top: 10.5%;
        background: url(../images/1201/block-t6-mb.png) center top / 100% no-repeat;
    }
    .g-block5-4 .w-l .b-c {
        padding: 0 0 .3em;
    }
    .g-block1 .c-w1 {
        margin: .5em 0 0.2em;
    }
    .g-block1 .c-w3 {
        margin: 0.5em auto 0.2em;
        width: 40%;
    }
    .entertainment .dp-flex {
        align-items: center;
        justify-content: center;
    }
    .b-t {
        margin-bottom: -1px;
    }
    .b-b {
        margin-top: -1px;
    }
    .w-l .b-c {
        padding: 0.3em 0;
    }
    .cbc1 {
        order: 1;
    }
    /* .campaign {
        order: 1;
    } */
    .sale-event {
        order: -1;
    }
    .cbc2 {
        order: -1;
    }
    .theme-block {
        order: 0;
    }
    .membergift {
        order: 3;
        margin-bottom: 2em;
    }
    .sale-day {
        order: 0;
    }
    .entertainment {
        order: 0;
        margin-bottom: 8%;
        margin-top: unset;
    }

    /* 優惠區上下佔滿 */
    .sale-day {
        background: url(../images/1201/bg_od_bg_mb.png) center center / 100% no-repeat;
        /* margin: 1em 0 2em 0; */
        margin: 0 0 1em 0;
        padding: 2.4em 0;
    }
    .sale-d-item {
        max-width: 80%;
    }
    .sale-all {
        max-width: 77%;
    }

    /* 優惠區照PC比例 */
    /* .sale-d-item {
        max-width: 38%;
        margin-left: 2%;
    }
    .sale-all {
        margin: 0 2%;
    }
    .sale-day a.c-w1 {
        margin: 1% 0 0;
    } */

    .sale-d-item {
       
        margin-left: 0%;
    }

    /* .swiper-wrapper {
        max-width: 90vw;
    } */
    .likegoods .swiper-wrapper {
        max-width: unset;
    }
    .shop-coupon,
    .item-coupon {
        margin: 2em 0;
    }
    /* #menu {
        display: none;
    } */
    .sale-item .copy-it {
        bottom: 1%;
        max-width: 68%;
        width: 100%;
    }

    /* 激賞好物 */
    .likegoods {
        order: 0;
        /* margin-bottom: 3em; */
    }
    .likegoods .title {
        margin: 10% 0 0%;
    }
    .likegoods .date {
        position: absolute;
        margin-top: -26%;
        left: 50%;
        transform: translateX(-50%);
        max-width: 60%;
        width: 100%;
    }
    /* .swiper-goods2 .swiper-slide-active {
        transform: scale(0.9);
    } */
    /* .swiper-goods2 .swiper-slide:hover {
        transform: scale(0.9);
    } */
    /* 激賞好物mb-1排 預設大 */
    /* .swiper-goods1 .swiper-slide-active {
        transform: scale(0.98);
    }
    .swiper-goods1 .swiper-slide-active:hover {
        transform: scale(1);
    } */

    /* 我的英雄9只有你 */
    .main-kv .logo {
        top: 1vw;
        max-width: 100px;
        left: 9vw;
    }
    .c-w2b {
        width: 96%;
        margin: 0% 0;
    }
    .c-w2b.more {
        width: 64%;
        padding: 2% 0 0;
    }
    .c-w2b > .c-w2b {
        width: 48%;
        margin: auto;
        padding: 0;
        margin: 1%;
    }
    .block-tt.tt2 {
        margin: -1% auto 2%;
    }
    .sale-block a.c-w4.wait::after {
        transform: translate(-100%, -100%);
        scale: 0.5;
    }
    .sale-block a.c-w4.end::after {
        transform: translate(-100%, -100%);
        scale: 0.5;
    }
    .theme-block > .dp-flex {
        margin-top: 23%;
        inset: none;
    }
    .theme-item {
        gap: 8px;
    }

    .sale-d-item .swiper-block {
        inset: 22% 0 0 0;
    }
    /* .c-w1 {
        margin: 1em 0 0 0;
    } */

    .coupon-block {
        margin-bottom: 0;
    }
    
    a.c-w1.bn-link-l {
        order: 3;
    }
    .content-link .c-w3 {
        width: 33%;
    }
    .title .title-link {
        max-width: 18%;
        right: -12%;
    }

    .c-w2b a.more {
        margin-top: .5em;
        max-width: 56%;
    }
    .theme-block.theme2 > .dp-flex {
        margin-top: -4%;
    }

    /* 品類5折新版型241127 */
    .campaign-set {
        background: url(../images/1201/frame1_mb.png) 100% / contain no-repeat;
        padding: 5%;
        /* background-size: contain; */
        margin: 2% auto;
        max-width: 98%;
        width: 100%;
    }
    /* 會員大禮包新版型241127 */
    .gift-btn {
        max-width: 44%;
        bottom: -4%;
    }

    .gift-btn2 {
        max-width: 44%;
        top: 68%;
        right: 6%;
    }
    
    .bn-link {
        order: 3;
    }
    /* 暖身神券 */
    .coupon-c-1 .calendar-coupon time {
    font-size: 1.5rem;
    line-height: 0.5rem;
    }

    /* 碎片動畫 */
    .kv-gif {
        max-width: 100%;
        left: 0vw;
    }
    
    /* 手機1月主會場 */
    /* 241226-輪播強檔 */
    /* tab頁籤 */
    .tab-group {
        width: 100%;
        /* width: 100%; */
        overflow: visible;
        position: sticky;
        top: 0;
    }
    .tab-group label {
        font-size: .7rem;
        line-height: .9rem;
    }
    .campaign .tab-group {
        overflow-x: scroll;
        white-space: nowrap;
        top: 11%;
        max-width: 60%;
        padding: 0 .1em 0 1.1em;
    }
    .campaign .tab-group > .dp-flex {
        overflow: auto;
        width: fit-content;
        flex-wrap: nowrap;
        white-space: nowrap;
        justify-content: flex-start;
        gap: .5em;
        padding: 0 .5em;
    }
    /* .campaign .tab-group label {
        margin: 0;
    } */
    .tab-group a:hover {
        filter: unset;
        border: unset;
    }
    .campaign .tab-group label,
    .campaign .tab-group a.tabs {
        max-width: 10em;
        margin: auto 4px;
        width: 100%;
        padding: 0 2px;
    }
    .campaign .campaign-item {
        background: transparent url(../images/camp-0123/50off_bg_mb.png) center center / cover no-repeat;
        padding: 11% .5% 1%;
        font-weight: 900;
        overflow-x: scroll;
        border-radius: 2%;
    }
    .campaign .campaign-row {
        white-space: nowrap;
        flex-wrap: nowrap;
        justify-content: flex-start;
        padding: 0 2%;
    }
    .campaign .campaign-item a {
        padding: 1%;
        flex: 0 0 49%;
        max-width: unset;
    }

    .KV-contnet {
        top: 54%;
        max-width: 82%;
    }
    .blindbox-btn .c-w3 {
        max-width: 40%;
        width: 100%;
        margin: .5em;
    }
    
    
    /* mb版隱藏上方bar+保留searchbar */
    /* #menu {
        display: block;
    }
    #menu .menu-content {
        height: 0;
    }
    #menu .menu-content > ul,
    #menu .menu-content > button {
        display: none;
    } */

    /* 三月購物獵人 */
    .container-s {
        max-width: 94%;
    }
    .block-tt {
        margin-top: 0;
    }
    .block-text {
        margin-top: -5%;
    }
    .subtt{
        margin-top: 0;
        width: 80%;

    }

    .recommend .block-tt {
        top: -2%;
    }
    .campaign .block-tt {
        margin-top: -2%;
    }
    .special .block-tt {
        margin-top: 4%;
    }
    .g-block-pd .block-tt {
        margin-top: -6%;
    }
    .power .block-tt {
        top: -15%;
        margin-top: 7%;
    }
    .gift-1 .block-tt {
        margin: 1% auto 2%;
    }
    .block-tt img {
        max-width: 86%;
    }
    .g-block {
        margin-top: 0;
    }
    .g-block.g-block-h.w-l > .b-t::before {
        background: url(../images/0228/frame1-top.png) center bottom / COVER no-repeat;
        padding-top: 25%;
    }
    .g-block.g-block-h.w-l > .b-c {
        background: url(../images/0228/frame1-middle.png) top center / COVER repeat-y;
        padding: 2em 0 0;
    }
    .g-block.g-block-h.w-l > .b-b::before {
        padding-top: 15vw;
        margin-top: -1em;
        background: url(../images/0228/frame1-bottom.png) center top / 170% no-repeat;
    }
    div section {
        margin-top: 3%;
    }
    div section:not(.map):not(.campaign):not(.power):not(.expert) {
  /*       margin-top: 24%; */
    }
    div section.recommend {
        margin-top: 8% !important;
    }
    div section.recommend .dp-flex {
        padding-top: 24%;
    }
    div section.recommend .dp-flex > div {
        margin: 4px auto;
        padding: .5%;
    }
    .map-content img {
        display: block;
    }
    section .swiper-block {
        margin-top: 0;
        max-width: 94%;
    }
    section .swiper-block {
        position: relative;
        max-width: 94%;
    }
    /* 限時任務 */
    section .swiper-pagination {
        width: 100%;
        margin-top: 0;
    }
    
    /* 限時任務&戰力強化 */
    section.campaign {
        background: url(../images/0228/scroll.png) no-repeat center center / 212%;
        /* padding: .5% 0 0 0; */
        padding-top: 5%;
    }
    section.power {
        padding-top: 5%;
    }
    /* 狩獵任務 */
    .product .event-date .day {
        font-size: .8rem;
        line-height: .8rem;
    }
    /* 隱藏任務 */
    .hidden-task .event-date .day {
        font-size: 1rem;
        line-height: 1rem;
    }
    .go-btn {
        bottom: 10%;
        max-width: 40%;
        right: 6%;
    }
    .mission-pdblock>div:nth-child(even) {
        margin-right: auto;
        margin-left: auto;
    }
    .mission-pdblock>div:nth-child(odd) {
        margin-right: auto;
        margin-left: auto;
    }
    /* 狩獵補給包 */
    div.container section.gift-1:has(.g-block) {
        margin-top: -6%;
    }
    .gift-1 .go-btn {
        bottom: -1%;
        right: 2.5%;
        max-width: 48%;
    }
    .go-btn a {
        margin: .5em;
    }
    /* 狩獵情報站&魔物獵人專家 */
    .entertainment .block-tt {
        margin-top: -24%;
    }
    .expert .block-tt {
        margin-top: -26%;
    }
    div section.expert {
        margin-bottom: 16%;
        margin-top: 32%;
    }

    /* 4月主會場 */
    .block-more a span {
        font-size: .8rem;
        letter-spacing: -1px;
    }
    .block-tt.text {
        font-size: 1.2rem;
        line-height: 2rem;
        clip-path: polygon(30px 0%, 100% 0%, calc(100% - 30px) 100%, 0% 100%);
    }
    #CONTENT-1-bg1 .container.block-all-tab {
/*         background: #fff url(../images/0701/bg-pc.png) 100% fixed;
        border: 2px solid #000; */
        margin: auto;
        max-width: 98% !important;
        padding-bottom: 6%;
    }
    #CONTENT-1-bg1 .block-tab:has(.sticky) + #top {
        padding-top: 20%;
        margin-top: 8%;
    }
    #CONTENT-1-bg1 .container.block-tab {
        max-width: 98% !important;
    }
    .map-today .block-tt {
/*         margin-top: 6%; */
    }
    #CONTENT-1-bg1 .container:has( > .tab-group) {
        top: 4.8%;
    }
    /* .swiper-slide {
        max-width: 80%;
    } */
    .tab-group.sticky {
        background: #fff;
        /* padding: 2% 0; */
        top: 0;
    }
    /* body .search-box.move {
        bottom: -190%;
    } */
    /* v20250421新增最新預購 */
    .swiper-preorder a {
           border: 6px solid #a258fb;
    border-radius: 1rem;
    border-style:inset;
        border-radius: .5em;
    }
    .swiper-block:has(.swiper-preorder) {
        max-width: 88%;
    }
    .swiper-preorder span.pod-txt {
        font-size: .7rem;
    }
    .pod-day {
        bottom: 28%;
        font-size: .8rem;
    }
    section .swiper-block:has(.swiper-preorder) {
        padding-bottom: 8%;
    }
    .prev-preod,.next-preod {
        display: flex;
    }
    /* 今日pagi調整 */
    section .swiper-pagination.pagi-td {
        bottom: -6%;
    }

    /* v20250422 */
    /* 精選店家 */
    .block-cat a.mall-pd {
        padding: 12% 3% 6%;
        max-width: 70%;
        margin: 4% 1%;
    }
    .block-cat a.mall-pd::before {
        background: url(../images/tab1/pd-mall-bg-m.png) no-repeat center center / cover;
    }
    .block-cat a.mall-pd .pd-img {
        max-width: 96%;
        margin-top: -6%;
    }
    .block-cat a.mall-pd .pd-info {
        max-width: 90%;
    }
    .block-cat a.mall-pd .pd-txt {
        -webkit-line-clamp: 2;
        font-size: 1rem;
    }
    .block-cat a.mall-pd .pd-mall-name {
        font-size: 1.1rem;
    }
    .block-cat a.mall-pd .pd-price {
        font-size: 1.5rem;
    }

    
    /* howhow短影 */
    .color-border {
        border-width: .18rem;
        border-style: solid;
        border-color: transparent;
        border-radius: 16px;
        border-image-source: linear-gradient(to right, #9f7ca4, #cb7da5);
        border-image-slice: 1;
    }
    
    /* 獨家線上首發商品 */
    /* .special-event a {
        border-radius: .5rem;
        overflow: hidden;
        width: 100%;
        height: 150px;
    }
    .special-event a img {
        max-width: 200%;
        width: 100%;
        height: 100%;
        object-fit: cover;
        object-position: center;
    } */
    .swiper {
        border-radius: 8px;
        overflow: hidden;
    }

    .swiper-wrapper {
        border-radius: 8px;
    }

    .swiper-slide {
        border-radius: 8px;
    }

    .swiper-slide img {
        border-radius: 8px;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .dp-flex1 {
        
        width: 33%;
        
    }
}