/* 各頁面CSS */ /*切換PC置頂選單*/ .cantantBase1 { display: block;} .cantantBase2 { display: none;} /* 版頭 */ @media screen and (min-width: 768px){ .hero { height: 1650px;} .hero-title { top: 110px; left: 215px;} .hero-title .lg-text { width: 530px;} .bg-deco .bgdeco_1 { height: 412px; background-size: auto 412px;} } @media screen and (max-width: 767px){ .hero-title { padding: 7vw 0 0; width: 54%; left: 14%;} } /* 倒數 */ .TimerNick { position: absolute; top: 285px; left: 330px;} .TimerNick .TIMER { margin: 0 auto; padding: 0; overflow: hidden; text-align: center; color:#fff; font-size: 26px; line-height: 40px; font-weight: 800; font-family: "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;} .TimerNick small {position: relative; top: 0; font-size: 20px;} .TimerNick .time_day { font-size: 20px; letter-spacing: .05rem;} .TimerNick .FontStyle { position: relative; padding: 0 7px 0 0;font-size: 22px; text-align:center; color: #fff;} .TimerNick .FontStyle b { display: inline-block; font-weight: 500; font-family: Century Gothic; width: 14px;} @media screen and (max-width:767px){ .TimerNick { position: absolute; top: 26vw; left: 14%; transform: none; width: 53%; text-align: center; z-index: 999;} .TimerNick .TIMER { font-size: 8.5vw; line-height: 4vw; color:#fff;} .TimerNick small { margin: 0; top: inherit; font-size: 3.5vw; float: none;} .TimerNick .time_day { position: relative; font-size: 3.9vw; letter-spacing: 0; float: none; margin-right: -2px;} .TimerNick .FontStyle { padding: 0; font-size: 4.2vw; float: none;} .TimerNick .FontStyle b { margin: 0; width: 2vw; font-family:Helvetica; color:#fff;} } /* 版頭品輪播 */ .top_pd .Area_swiper_box .PD_layout li, .Area_swiper_box .PD_layout li .PD_img img { border-radius: 0!important;} @media screen and (min-width:768px){ .top_pd { position: absolute; top: 75px; left: 758px; width: 245px; height: 340px; overflow: hidden; z-index: 9;} .top_pd .ly ul, .top_pd .ly ul li { padding: 0;} .top_pd .ly ul li .PD_into {text-align: center;} .top_pd .ly ul li .PD_into .PD_logo { display: none;} .top_pd .ly ul li .PD_into { width: 100%; position: relative; top: 6px;} .top_pd .ly ul li .PD_img { width: 100%; height: auto;} /* 文字 */ .top_pd .ly.PD_layout .PD_into h3 {color: #ce2227; width: 100%; font-size: 1.8em;text-align: center;} } @media screen and (max-width:767px){ .Area_top .top_pd { position: absolute; top: 0; right: 5vw; width: 27vw; height: 34vw; overflow: hidden; z-index: 9;} .top_pd .ly ul li { padding: 0;} .top_pd .ly ul li .PD_into .PD_logo { display: none;} .top_pd .ly ul li .PD_into { padding: .05em 0 0;} .top_pd .ly ul li .PD_img { width: 100%; height: auto; padding: .5em .2em .05em;} /*文字*/ .top_pd .ly ul li .PD_into h3 { color: #ce2227; font-size: .9em;} } /* hasBG調整 */ @media screen and (min-width:768px){ .Area_boxstyle.Area_boxstyle--hasBackdrop .Area_boxstyle_box { background: url(Area_boxstyle_top_hasbg-B.png?t=1775699078730) top center / contain no-repeat !important;} .Area_boxstyle.Area_boxstyle--hasBackdrop:before { background: url(Area_boxstyle_hasbg_top-B.png?t=1775699078730) top center / 100% no-repeat, url(Area_boxstyle_hasbg_bottom-B.png?t=1775699078730) bottom center / 100% no-repeat, url(Area_boxstyle_hasbg_bottom-B.png?t=1775699078730) center top 80px / 100% calc(100% - 80px) no-repeat !important;} } @media screen and (max-width:767px){ .Area_boxstyle.Area_boxstyle--hasBackdrop .Area_boxstyle_box { background: url(m_Area_boxstyle_top_hasbg-B.png?t=1775699078730) center top 0.5vw / contain no-repeat !important;} .Area_boxstyle.Area_boxstyle--hasBackdrop:before { background: url(m_Area_boxstyle_hasbg_top-B.png?t=1775699078730) top center / 100% no-repeat, url(m_Area_boxstyle_hasbg_bottom-B.png?t=1775699078730) bottom center / 100% no-repeat, url(m_Area_boxstyle_hasbg_bottom-B.png?t=1775699078730) center top 5vw / 100% calc(100% - 5vw) no-repeat !important;} } /* 移除公版設定 */ .Area .remove_box_style ul { background-color: transparent; grid-gap: 0;} .Area .remove_box_style ul li { border: none !important; background-color: transparent;} @media screen and (max-width:767px){ .Area .remove_box_style ul { width: 100%; padding: 0;} } /* 品牌公版背景設定 */ .PD_layout-D1_01 .PD_slide { background-color: #fcd206;} .PD_layout-D1_01 .PD h4 { color: #1117c1; font-weight: 900;} .PD_layout-D1_01 .PD h4:hover { color: #d71163 !important;} .PD_layout-D1_01 { padding-bottom: 30px;} .PD_layout-D1_01 ul { width: 100%;} .Area_grabmoney_NUM2 .PD_layout-btn li .PD h3 { color: #000; background: #fff;} @media screen and (max-width:767px){ .Area_grabmoney_NUM2 .PD_layout-btn { margin-top: -5vw;} } /* 熱銷排行 */ .Area_PD3 .PD_layout-btn li .PD h3 { color: #000; background: #fff;} @media screen and (min-width:768px){ .Area_PD3 .PD_layout-btn { margin-top: 25px;} } @media screen and (max-width:767px){ .Area_PD3 .PD_layout-btn { margin-top: 3vw;} } /*區標*/ .title2 {width: 79%;} .title ul {padding: 0!important;grid-gap:0!important;} .title ul li {pointer-events: none;} .bg_top {position: absolute;margin: 0 auto;width: 100%;height: auto;top: 0;z-index: 0;} .bg_top img {width: 100%;} .box_txt {position: absolute;margin: 0 auto;width: 100%;height: auto;} .box_txt img {width: 79%;} .txt ul {position: relative;padding: 0;margin: 0;list-style: none;height: 150px;top:0;} .txt ul li { background-color: transparent; pointer-events: none;padding: 0;} .txt .PD_into {padding: 0;} .txt ul li h5 {position: relative;top: 30px;margin: 0;padding: 0;width: 100%;font: 63px/63px "Noto Sans CJK SC";font-weight: 700;text-align: center;overflow: hidden;color: #242424;letter-spacing:-4px;} .txt2 ul {position: relative;padding: 0;margin: 0;list-style: none;height: 95px;top:0;} .txt2 ul li { background-color: transparent; pointer-events: none;padding: 0;} .txt2 .PD_into {padding: 0;} .txt2 ul li h5 {position: relative;top: 9px;margin: 0;padding: 0;width: 100%;font: 41px/41px "Noto Sans CJK SC";font-weight: 500;text-align: center;overflow: hidden;color: #ffffff;letter-spacing:0px;} @media screen and (max-width:767px){ .title2 {width: 100%;} .bg_top {position: absolute;margin: 0 auto;width: 100%;top:0;} .bg_top img {width: 100%;} .box_txt {position: absolute;margin: 0 auto;width: 100%;} .box_txt img {width: 100%;} .txt ul {padding: 0;margin: 0;list-style: none;height: 17vw;} .txt ul li { background-color: transparent; pointer-events: none;padding-top: 0;} .txt .PD_into {padding: 0;} .txt ul li h5 {position: relative;top: 3.5vw;margin: 0;padding: 0;width: 100%;font: 6vw/6vw "Noto Sans CJK SC";font-weight: 700;text-align: center;letter-spacing: -0.5vw;overflow: hidden;} .txt2 ul {padding: 0;margin: 0;list-style: none;height: 10vw;} .txt2 ul li { background-color: transparent; pointer-events: none;padding-top: 0;} .txt2 .PD_into {padding: 0;} .txt2 ul li h5 {position: relative;top: 1vw;margin: 0;padding: 0;width: 100%;font: 5.5vw/5.5vw "Noto Sans CJK SC";font-weight: 700;text-align: center;letter-spacing: -0.5vw;overflow: hidden;} } /*公版*/ .bg_box { background: url(bg_box_m.png?t=1775699078730)top center repeat-y;background-size: 100%;} .bg_boxbottom {position: relative;background: url(mbg_boxbottom.png?t=1775699078730)top center no-repeat;background-size: 100%;height: 57px;} .bg_box2 { background: url(bg_box2.png?t=1775699078730)top center repeat-y;background-size: 100%;} .bg_boxbottom2 {position: relative;background: url(bg_boxbottom2.png?t=1775699078730)top center no-repeat;background-size: 100%;height: 58px;} /* .bg_box3 { background: url(bg_box3.png?t=1775699078730)top center repeat-y;} .bg_boxbottom3 {position: relative;background: url(bg_boxbottom3.png?t=1775699078730)top center no-repeat;height: 49px;} */ @media screen and (max-width:767px){ .bg_box { background: url(bg_box_m.png?t=1775699078730)top center repeat-y; background-size: 100%;} .bg_boxbottom {background: url(mbg_boxbottom.png?t=1775699078730)top center no-repeat;height: 4vw;background-size: 100%;top: 0;} .bg_box2 { background: url(bg_box2_m.png?t=1775699078730)top center repeat-y; background-size: 100%;} .bg_boxbottom2 {background: url(mbg_boxbottom2.png?t=1775699078730)top center no-repeat;height: 6vw;background-size: 100%;top: 0;} /* .bg_box3 { background: url(bg_box3_m.png?t=1775699078730)top center repeat-y; background-size: 100%;} .bg_boxbottom3 {background: url(mbg_boxbottom3.png?t=1775699078730)top center no-repeat;height: 6vw;background-size: 100%;top: 0;} */ } /**倒數限搶公版**/ .Area_24hr {position: relative;padding-bottom: 50px;} .Area_24hr .TimerNick3 {position: absolute;top: 164px;left: 50%;transform: translateX(-50%);z-index: 15;display:inline-block;padding-right:14px;height:0px;text-align:right;} .Area_24hr .TimerNick3 .FontStyle3 {display:inline-block;margin:0px 0 0 0;padding: 9px;border:0px;width: 39px;font: bold 35px/38px Century Gothic;color:#252bf4;letter-spacing:-1px;text-align:center;background: #ffffff;border-radius: 9em;} .Area_24hr .TimerNick3 div:nth-of-type(2) .Area_24hr .TimerNick3 div:nth-of-type(3) { width:60px;} .Area_24hr .TimerNick3 span { padding-left:2px; font: bold 25px/38px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #000;} .Area_24hr .Area_boxstyle .Area_boxstyle_box1 {padding-block-start:150px;} @media screen and (max-width:767px){ .Area_24hr {position: relative;padding-bottom: 0px;} .Area_24hr .TimerNick3 {z-index:2;position: absolute;top: 19.5vw;left: 49%;display:inline-block;margin:0;padding-right:5%;width:85%;height:0;padding-bottom:10%;overflow:hidden;text-align:right;} .Area_24hr .TimerNick3 .FontStyle3 { display:inline-block; margin:0vw 0 0 1vw ; padding:0; border:0px; width:9vw; height: 9vw; font: bold 5.5vw/9vw Century Gothic; color:#252bf4; letter-spacing:-1px; text-align:center; background:#ffffff; border-radius: 7em;} .Area_24hr .TimerNick3 div:nth-of-type(2), .Area_24hr .TimerNick3 div:nth-of-type(3) { width:9vw;} .Area_24hr .TimerNick3 span { padding-left:1vw; font: bold 4vw/11vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.1em;color: #000;} .Area_24hr .Area_boxstyle .Area_boxstyle_box1 {padding-block-start:11vw;} } /**今日爆品 限時搶-公版調位置**/ @media screen and (min-width:768px){ /* .Area01 {background-color: #826eff;} */ .Area01 ul {width: 100%;} .Area01 .PD_layout ul {padding:75px 0 20px 0 !important;} } @media screen and (max-width:767px){ .Area01 .PD_layout ul {padding:13vw 0 3vw 0 !important;position: relative;top:24px;} .Area01 .PD_layout {padding:0vw 0 10vw 0 !important} } /*情境圖輪播*/ .Area_newpd .Area_swiper_box .PD_layout li .PD_img img {border-radius:0;} @media screen and (min-width: 768px){ .Area_newpd .Area_swiper_box ul { height: 522px;padding:0;grid-gap:0;} .Area_newpd .Area_swiper{width: 100%;} } @media screen and (max-width: 767px){ .Area_newpd .Area_PD9 { overflow: hidden; height: 98vw; } .Area_newpd .Area_swiper{width: 100%;} .Area_newpd .Area_swiper_box { margin: 0 0 0 -4vw; /*overflow-x: auto*/} .Area_newpd .PD_layout.PD_layout-D1_15 ul { height: 89vw;padding:0;grid-gap:0;} .Area_newpd .PD_layout.PD_layout-D1_15 ul .PD .PD_into { background-color: #fff; text-align: left; position: relative; padding-left: .7em; } .Area_newpd .swiper-pagination-progressbar{ display: none; } } /*攻略區(登記活動+折價券+BTN3顆)*/ @media screen and (min-width: 768px){ .Area04 {} .Area04 .box {position: relative;} .Area04 .more {position: absolute;top: 16px;left: 735px;z-index: 5;} .Area04 .Area_coupon {padding-bottom: 20px;} .Area04 .layout_BN {width: 90%;} .Area04 .layout_BN ul {padding: 0;grid-gap:0;} .Area04 .layout_BN ul li {padding: 0 7px;} } .Area_danji .danji_box ul li .activityText .gifts span { color: #6636d9;} .Area_danji .danji_box {margin-bottom: 0;} .warningTxt h3 {color: #000;} @media screen and (max-width: 767px){ .Area04 {} .Area04 .Area_danji {width: 96%;} .Area04 .box {position: relative;} .Area04 .more {position: absolute;top: 2.5vw;left: 79vw;z-index: 5;width: 19%;} .Area04 .Area_coupon {padding-bottom: 3vw;} .Area04 .layout_BN {width: 97%;} .Area04 .layout_BN ul {padding: 0;grid-gap:0;} .Area04 .layout_BN ul li {padding: 0 1vw;} } /*攻略區(登記活動+折價券+BTN3顆)*/ .Area_BN .Area_swiper_box .PD_layout li{background-color: #ffffff00;} @media screen and (min-width: 768px){ .Area_BN ul {height: 354px;} } @media screen and (max-width: 767px){ .Area_BN ul {height:41vw;} } /*超殺爆款 重磅登場*/ @media screen and (min-width: 768px){ .Area06 {} .Area06 .remove_box_style ul {grid-gap:10px;} .Area06 .PD_wrap {padding: 0;height: 100%;position: relative;width: 79%;margin: 0 auto;} .Area06 .PD_box ul li { position: relative;} .Area06 .PD_box ul li .PD_img { padding: 0;} .Area06 .PD_box ul li .PD_into { position: absolute; top:443px; left:49%; transform: translateX(-50%); width: 81%; z-index: 1;} .Area06 .PD_box ul li .PD_into h3 { color: #000000; font-size: 22px;} .Area06 .PD_box ul li .PD_into h4 { color: #000000; font-size: 20px;} .Area06 .PD_box ul li .PD_into p { height: 2.5em; color:#d62672;} .Area06 .PD_box ul li .PD_into p del { font-size: 22px; color:#616161;} .Area06 .PD_box ul li .PD_into p b { font-size: 20px;} .Area06 .PD_box ul li .PD_into p .money { font-size: 22px;} .Area06 .PD_box ul li .PD_into p .Price { font-size: 40px;} .Area06 .PD_wrap .PD_box ul li .PD_img { padding: 2% 2% 0 2%; position: absolute; top: 13px; width: 97%;left: 7px;} .Area06 .PD_wrap .PD_box ul li {position: relative; border-radius: 10px;background-color: #fff;height: 600px;} .Area06 .PD_wrap .PD_layout ul{width: 90%;} /*公版上下標隱藏*/ .Area06 .PD_wrap .PD_layout.CX .imgTagBottom {display:none!important;} .Area06 .PD_wrap .PD_layout.CX .prdImgWrap .imgTagRectangle {display:none!important;} .Area06 .PD_wrap .PD_layout.CX .prdImgWrap .imgTag {display:none!important;} } @media screen and (max-width:767px){ .Area06 {} .Area06 .remove_box_style ul {grid-gap:10px;} .Area06 .PD_wrap .PD_layout ul{width: 100%;} .Area06 .PD_wrap {width: 97%;padding: 0;height: 100%;position: relative;} .Area06 .PD_wrap {padding: 0;width:100%;} .Area06 .PD_wrap .PD_box ul li {border-radius: 10px;width: 100%;background-color: #fff;height: 70vw;margin-bottom: 1vw;} .Area06 .PD_wrap .PD_box ul li .PD_img { padding: 2% 2% 0 2%; position: absolute;top: 2vw; width: 94%;left: 1.2vw;} .Area06 .PD_box ul li {padding-bottom: 3vw;} .Area06 .PD_box ul li .PD_into {top:46vw;position: relative;} .Area06 .PD_box ul li .PD_into h3 { font-size: 15px;} .Area06 .PD_box ul li .PD_into h3:after { width: 10em;} .Area06 .PD_box ul li .PD_into h4 { font-size: 15px; margin-bottom: 0;} .Area06 .PD_box ul li .PD_into p { height: 2.5em;} .Area06 .PD_box ul li .PD_into p del { font-size: 14px;} .Area06 .PD_box ul li .PD_into p b { font-size: 14px;} .Area06 .PD_box ul li .PD_into p .money { font-size: 16px;} .Area06 .PD_box ul li .PD_into p .Price { font-size: 28px;} /*公版上下標隱藏*/ .Area06 .PD_wrap .PD_layout.CX .imgTagBottom {display:none!important;} .Area06 .PD_wrap .PD_layout.CX .prdImgWrap .imgTagRectangle {display:none!important;} .Area06 .PD_wrap .PD_layout.CX .prdImgWrap .imgTag {display:none!important;} } /*熱門品牌 直擊心坎*/ .Area09 {} .Area09 .box_all {position: relative;padding-bottom: 50px;} .Area09 .box_txt4 {position: absolute;margin: 0 auto;height: auto;width: auto;top: 30px;} .Area09 .text02 {width: 100%;margin: auto;height: 155px;} .Area09 .text02 .PD_layout {width: 80%;} .Area09 .text02 .PD_layout .PD_into {display: flex;flex-direction: row;margin-top: 0;} .Area09 .text02 .PD_layout .PD_into .PD_logo {width: 35%;left: 75px;top: 25px;position: relative;} .Area09 .text02 .PD_layout .PD_into h3 {width: 50%;color: #ffffff;margin-top: 50px;left: 24px;position: relative;font: 43px/43px "Noto Sans CJK SC";font-weight: 500;} .Area09 .Area_swiper {width: 92%;left: 6px;top: 0;} @media screen and (max-width:767px){ .Area09 {} .Area09 .box_all {position: relative;padding-bottom: 5vw;} .Area09 .box_txt4 {top: 3vw;} .Area09 .text02 {height: 17.2vw;} .Area09 .text02 .PD_layout {width: 94%;} .Area09 .text02 .PD_layout .PD_into{display: flex;flex-direction: row;margin-top: 0vw;margin-bottom: 0;} .Area09 .text02 .PD_layout .PD_into .PD_logo {width: 40%;top: 3vw;left: 2vw;position: relative;} .Area09 .text02 .PD_layout .PD_into h3{width: 51%;margin-left: 0;font-size: 18px;line-height: 1.2em;color: #ffffff;margin-top: 5vw;left: -2.5vw;} .Area09 .Area_swiper {width: 97%;left: 0;top: 0;} } /*大家都在買*/ .Area10 {overflow: hidden;} .Area10 .box_txt_all {position: relative;margin: 0 auto;height: 146px;} .Area10 .box_txt_all .PD_layout .PD .PD_into {padding: 0;} .Area10 .box_txt_all ul {} .Area10 .box_txt_all li:hover { transform: none!important;} .Area10 .box_txt_all a { pointer-events: none;} .Area10 .box_txt_all h3 span { overflow: visible!important;} .Area10 .box_txt_all .PD_layout .PD h3 {font-size: 3.8em;line-height: 2em;letter-spacing: .05em;font-weight: 700;font-family:"Century Gothic","Noto Sans TC";font-style: italic;color:#242424;transform: translate(-183px, -1px);} .Area10 .box_txt_all .PD_layout .PD h4 {color:#242424;transform: translate(607px, -82px);font-size: 35px;text-align: left;font-weight: 700;} .Area10 .NavArea_tabbar_page {width: 88%;} .Area10 .layout_PD {width: 88%;} .Area10 .layout_PD li:nth-child(1)::after{ content: ""; position: absolute; top: 1%; left: 3%; width: 31%; height: 15%; background: url(tag1.png?t=1775699078730) no-repeat top / 100%; z-index: 10;} .Area10 .layout_PD li:nth-child(2)::after{ content: ""; position: absolute; top: 1%; left: 3%; width: 31%; height: 15%; background: url(tag2.png?t=1775699078730) no-repeat top / 100%; z-index: 10;} .Area10 .layout_PD li:nth-child(3)::after{ content: ""; position: absolute; top: 1%; left: 3%; width: 31%; height: 15%; background: url(tag3.png?t=1775699078730) no-repeat top / 100%; z-index: 10;} @media screen and (max-width:767px){ .Area10 {padding-bottom: 10vw;} .Area10 .box_txt_all {height: 13vw;} .Area10 .box_txt_all .PD_layout .PD h3 {font-size: 1.6em;line-height: 2.1em;} .Area10 .box_txt3 .PD_layout .PD h3 {transform: translate(-19vw, -0.3vw);} .Area10 .box_txt3 .PD_layout .PD h4 {transform: translate(50vw, -9.5vw);font-size: 3.5vw;} .Area10 .NavArea_tabbar_page {width: 96%;} .Area10 .layout_PD {width: 96%;} } /* -------------------------------------- * Page 頁籤_202405291900 * -------------------------------------- */ .NavArea_tabbar_page { margin: 0 auto 20px ; width: 94%; } .NavArea_tabbar_page .Nav { overflow: visible; transform: translate3d(-30.5%, 0, 0);} .NavArea_tabbar_page .Nav_box { border-radius: 8px; overflow: hidden; padding: 0 2%;} .NavArea_tabbar_page[data-num="2"] .Nav-wrapper { transform: translate3d(55.5%, 0, 0)!important} .NavArea_tabbar_page[data-num="3"] .Nav-wrapper { transform: translate3d(43.0%, 0, 0)!important} .NavArea_tabbar_page[data-num="4"] .Nav-wrapper { transform: translate3d(30.5%, 0, 0)!important} .NavArea_tabbar_page[data-light="box"] .Nav ul { padding: 0 } .NavArea_tabbar_page .Nav li { overflow: visible; } @media screen and (min-width:768px){ .NavArea_tabbar_page { display: block; } } /*頁籤高亮顏色設定 */ .NavArea_tabbar_page .Nav .swiper-slide-active a { color:#fff;} .NavArea_tabbar_page .Nav .swiper-slide-active i { display:block; border: 1px solid #562bd1 !important; background-color: #562bd1 !important;} /*推編輯按鈕 */ .NavArea_tabbar_page .Nav input { position: fixed; left: 30%} /*人氣品牌熱銷榜*/ @media screen and (min-width:768px){ .Area12 {} .Area12 .layout_PD {width: 100%;} .Area12 .layout_PD ul {grid-gap: 15px;padding:0;display: flex;justify-content: center;flex-wrap: wrap;} .Area12 .layout_PD ul li {background:url(Area12_bg.png?t=1775699078730)top center no-repeat;background-size:100%;width: calc(100% / 5);min-width: inherit;} .Area12 .layout_PD .PD_img {padding: 20px;} } @media screen and (max-width: 767px){ .Area12 {} .Area12 .layout_PD {width: 96%;} .Area12 .layout_PD ul {grid-gap: 8px;padding: 0;} .Area12 .layout_PD ul li {background:url(Area12_bg.png?t=1775699078730)top center no-repeat;background-size:100%;} .Area12 .layout_PD .PD_img {padding: 5%;padding-bottom: 5%!important;} }