/* 各頁面CSS */ /*切換PC置頂選單*/ .cantantBase1 { display: block;} .cantantBase2 { display: none;} /* 版頭 */ @media screen and (min-width: 768px){ .hero { height: 1650px;} .hero-title { top: 65px; left: 0px;} .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%;top: -8vw;} } /* 倒數 */ .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; margin: -1.5vw;} .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=1775787932244) top center / contain no-repeat !important;} .Area_boxstyle.Area_boxstyle--hasBackdrop:before { background: url(Area_boxstyle_hasbg_top-B.png?t=1775787932244) top center / 100% no-repeat, url(Area_boxstyle_hasbg_bottom-B.png?t=1775787932244) bottom center / 100% no-repeat, url(Area_boxstyle_hasbg_bottom-B.png?t=1775787932244) 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=1775787932244) center top 0.5vw / contain no-repeat !important;} .Area_boxstyle.Area_boxstyle--hasBackdrop:before { background: url(m_Area_boxstyle_hasbg_top-B.png?t=1775787932244) top center / 100% no-repeat, url(m_Area_boxstyle_hasbg_bottom-B.png?t=1775787932244) bottom center / 100% no-repeat, url(m_Area_boxstyle_hasbg_bottom-B.png?t=1775787932244) 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;} } /*副標*/ .md-text2 .PD_layout .PD_img { display: none;} .md-text2 .PD_layout ul { background: transparent;} .md-text2 .PD_layout ul li { border: unset;background-color:transparent} .md-text2 a { pointer-events: none;} .md-text2 .PD_layout .PD h3{font-family: "Cubic 11";color: #fff;} .md-text2 { width: 960px;} @media screen and (min-width:768px){ .md-text2 { position: relative;top: 50px;} .md-text2 .PD_layout .PD h3{font-size:50px;font-weight: 700;line-height:1em;display: block;} } @media screen and (max-width:767px){ .md-text2 { position: relative;top:8vw} .md-text2 .PD_layout .PD h3{font-size:6.5vw;line-height:6.5vw;font-weight: 700;display: block} } /*三顆按鈕*/ .Area_activ3 .activ01{position: absolute;width:68%;} .Area_activ3 .activ02{position: relative; width: 37.5%;left: 582px;} @media screen and (max-width:767px){ .Area_activ3 .activ01{width:67%;} .Area_activ3 .activ02{ width: 33%; left: 67vw;} .Area_activ3 .layout_tag ul{grid-gap: 0em;} } /*活動倒數*/ .TimerNick2 {display:inline-block; position:relative; height:80px; z-index:99; } .TimerNick2 .FontStyle2 { display: inline-block; margin: 0 0 0 2px; padding: 0; border: 0; font:normal 30px/30px Arial; color: #fff; border-radius:5px;/*text-shadow:1px 1px 0px #fff;*/ letter-spacing: 0px; text-align: center;} .TimerNick2 span { padding-left: 2px; font: 400 23px/48px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0em; color:#fff;} @media screen and (max-width:767px){ .TimerNick2 {display:inline-block; width:100%; position: relative; top:0vw; left:0; margin:0; height:0; padding-bottom:7%; overflow:hidden; text-align:center; background-size:100%;z-index:20;} .TimerNick2 .FontStyle2 { margin: 0; padding: 0; border: 0; font: lighter 5.5vw/7vw Arial; } .TimerNick2 span { padding-left:0; font:normal 4vw/5vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;} } /*經典必Buy作圖區8品*/ @media screen and (min-width:768px){ .Area_item {height: auto;padding-bottom:0;} .Area_item .PD_layout .PD_slide:hover { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } /*版頭公版上下標.關閉*/ .Area_item .PD_layout.layout_item .imgTag{display: none !important;} .Area_item .PD_layout.layout_item .imgTagBottom{display: none !important;} .Area_item .PD_layout.layout_item .prdImgWrap .imgTagRectangle{display: none !important;} /*標.關閉*/ .Area_item .PD_layout .PD_img::before{display: none !important;} /* .Area_PD1 .PD_layout .PD_img::before{display: none !important;} */ /*作圖區*/ .Area_item .PD_layout.layout_item .PD_slide .PD p del {position: absolute;top: 54px;left:26px;color:#000; font-size: 25px;} .Area_item .PD_layout.layout_item .PD p .Price {font-weight: 700;font-size: 2.7em;} .Area_item .PD_layout.layout_item .PD p {position: relative;top:65px;left:95px;height: 6em;padding: 13% 0 0;line-height: 1.6em;font-size:1.4em;color:#3514bf!important;font-weight:700;} .Area_item .PD_layout.layout_item li {background: url("item_bg.png?t=1775787932244") center top / 100% no-repeat scroll;} .Area_item .PD_layout.layout_item {padding:0;width: 91%;} .Area_item .PD_layout.layout_item .PD_slide:hover {transform:translateY(-6px);} .Area_item .PD_layout.layout_item .PD_slide:hover { box-shadow:unset;} .Area_item .PD_layout.layout_item .PD_slide {height:835px;padding:0;} .Area_item .PD_layout.layout_item .PD_slide .PD_into {width: 70%;padding-left:0;position: absolute;left:33px;top: 366px;text-align: center;font-size: 1em;color: #000;} .Area_item .PD_layout.layout_item .PD_slide .PD_img img {width:86%;margin:13% 0% 0% 7%;box-shadow: unset;/*border-radius: 34.5em !important;border: 7px solid #ffffff;*/} .Area_item .PD_layout.layout_item .PD_slide .PD_into h3 {position: relative;top:107px;left:58px;max-height: 1.4em;font-family: Noto Sans CJK TC;font-weight: bold;font-size: 2.3em;line-height: 1.6em;color:#000;text-align: center; background: transparent!important;} .Area_item .PD_layout.layout_item .PD_slide .PD_into h4 {font-size: 2em;color: #000;text-align: center;position: relative;top:116px;left:51px;} .Area_item .PD_layout.layout_item .PD_slide .PD:hover h4 { color:#a16d00;} .Area_item .PD_layout.layout_item .PD .PD_logo {position: relative; top: -315px;left: -22px;height: 8em; z-index: 90;border-radius: 26.5em !important;} .Area_item .PD_layout.layout_item .PD .PD_logo img { padding: 0%; box-shadow: none; border: none; width: 160px; height: 160px;} .Area_item .PD_layout .PD p .money{font-size: 35px;} .Area_item .PD_layout .PD p{color:#ffe744!important;} } @media screen and (max-width:767px){ .Area_item {height:100%;} .Area_item .PD_layout .PD_slide:hover { box-shadow: 0 0 0 rgba(0, 0, 0, 0); } /*版頭公版上下標.關閉*/ .Area_item .PD_layout.layout_item .imgTag{display: none !important;} .Area_item .PD_layout.layout_item .imgTagBottom{display: none !important;} .Area_item .PD_layout.layout_item .prdImgWrap .imgTagRectangle{display: none !important;} /*標.關閉*/ .Area_item .PD_layout .PD_img::before{display: none !important;} /* .Area_PD1 .PD_layout .PD_img::before{display: none !important;} */ /*作圖區*/ .Area_item .PD_layout.layout_item {padding: 0 0 0 0;} .Area_item .PD_layout.layout_item ul {padding-left: 1vw; padding-right: 1vw;} .Area_item .PD_layout.layout_item li {width:105%;height:74vw;left:-1vw;background: url("item_bg.png?t=1775787932244") center top / 99% no-repeat scroll;} .Area_item .PD_layout.layout_item .PD_slide .PD_img {margin-bottom: 3%;} .Area_item .PD_layout.layout_item .PD_slide .PD_into {padding-left: 0;position: absolute;top:45vw;width: 100%;text-align:center;font-size: 0.7em;} .Area_item .PD_layout.layout_item .PD_slide .PD_logo {position:absolute;left:1.4vw;top:-37.4vw;height: 14vw;border-radius:50%;display: block; z-index: 90;} .Area_item .PD_layout.layout_item .PD .PD_logo::after { content:""; position: absolute; display:block; top: -7vw;left: 0;width:100%; height:100%; pointer-events:none; z-index: -1;} .Area_item .PD_layout.layout_item .PD .PD_logo img { padding: 0; box-shadow: none;border-radius: 34.5em!important;/*border: 7vw solid #ffffff;*/} .Area_item .PD_layout.layout_item .PD_slide .PD_img img {width:91%;margin:12% 0% 0% 4%;box-shadow: unset;} .Area_item .PD_layout.layout_item .PD_slide .PD_into h3 {padding: 0;max-height: 1.4em;font-weight: bolder;font-size: 1.4em;line-height: 1.7em;margin: 0;-webkit-background-clip: text;color: #000;top:4vw;left:0vw;position: relative;} .Area_item .PD_layout.layout_item .PD_slide .PD_into h4 {padding: 0;font-size: 1.4em;color:#000;margin: 0;line-height: 1em;text-align: center;top:5vw;position: relative;left:1vw;} .Area_item .PD_layout.layout_item .PD_slide .PD p del {top: 0vw;left: 0vw; color: #000;z-index: 99;position: relative;font-size: 1.1em;} .Area_item .PD_layout.layout_item .PD p {position: relative;top:3.8vw;left:0vw; height: 15vw;font-size: 1.1em;line-height: 2.8em;color:#3514bf;} .Area_item .PD_layout.layout_item .PD p .Price {font-weight: 900;font-size: 2.1em;} .Area_item .PD_layout.layout_item .PD p small {font-size: 1.4em;} } /*登記贈品文案顏色*/ .Area_danji .danji_box ul li .activityText .gifts span { color: #3514bf !important;} /* -------------------------------------- * Page 頁面 * -------------------------------------- */ /*Phone置頂滑動選單*/ .Area_floorPD_NavArea_tabbar { margin: 0 auto 0vw ; width: 94%; } .Area_floorPD_NavArea_tabbar.cate-fixed { width: 100%; } .Area_floorPD_NavArea_tabbar .Nav_box { top: 0!important} .Area_floorPD_NavArea_tabbar .Nav_box { border-radius: 8px; -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2); box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2); } .Area_floorPD_NavArea_tabbar .Nav li { overflow: visible; } /*.NavArea_tabbar .Nav a { display:inline-block;}*/ .Area_floorPD_NavArea_tabbar.cate-fixed .Nav_box { border-radius: 0; background-color: rgba(255, 255, 255, 1); -webkit-box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2); box-shadow: -1px 0 10px rgba(150, 150, 150, 0.2); } .Area_8pd .Area_swiper_box .PD_layout li { background-color: #fff;} .Area_8pd .Area_swiper_box{background-color: #ffcd2b;} @media screen and (min-width:768px){ .Area_8pd .Area_swiper_box{ padding: 40px 30px 40px;border-radius: 20px;} .Area_8pd .Area_swiper_box .swiper-pagination { bottom: 15.5px !important; } } @media screen and (max-width:767px){ .Area_8pd .Area_swiper_box{padding: 4vw 1px 5vw 1vw;border-radius: 2vw;} } .Areagun .PD_layout{width: 55%;} @media screen and (max-width:767px){ .Areagun .PD_layout{width: 56%;} }