@charset "utf-8";

/* 版頭區 */
.Area_title_top { height: 700px ; }
.Area_hero--title { width: 50% !important ; top: 138px !important ; left: 49px !important ; }
.Area_hero--title ul li { pointer-events: none ; }
.Area_hero--PD { top: 510px ; z-index: 10; width: 90% ; left: 30px ; }
.Area_hero--logo { width: 50% ; top: 427px ; left: 50px ; }
.deco01 { position: absolute ; width: 100% ; top: 54px ; right: 405px ; }
.deco02 { position: absolute ; width: 100% ; top: 511px ; left: 12px ; }
@media screen and (max-width: 767px){
.Area_title_top { height: 75vw ; margin-bottom: 0 ; }
.Area_hero--title { width: 50% !important ; top: 14vw !important ; left: 5vw !important ; }
.Area_hero--PD { top: 53vw ; width: 100% ; left: 0 !important ; }
.Area_hero--logo { width: 50% ; top: 44vw ; left: 5vw ; }
.deco01 { position: absolute ; width: 15% ; top: 5vw ; right: 84vw ; }
.deco02 { position: absolute ; width: 23% ; top: 51vw ; left: 40vw ; }
}


/* 作圖區 */
.PD_layout-CSSBG_01 li:nth-child(even)::after { background-image: url(item_bg1.png?t=1790133340194) !important ; background-size: 100% ; padding-bottom: 170%; }
.layout_item ul { width: 80% !important ; }
.layout_item ul li h3 { color: #208adf !important ; font-size: 30px !important ; max-height: 1.5em !important ; }
.layout_item ul li h4 { font-size: 27px !important ; margin-bottom: 0 !important ; }
.layout_item ul .PD_img { width: 80% ; margin: 0 auto ; }
.layout_item ul li p .Price { color: #f9892a ; }
.layout_item ul li p .money { color: #f9892a ; }
.layout_item ul li p { line-height: 3em !important ; }
.layout_item ul li::after { padding-bottom: 160% !important ; }
@media screen and (max-width:767px){
  .layout_item ul { width: 100% !important ; }
  .layout_item ul li h3 { font-size: 4.5vw !important ; max-height: 1.5em !important ; line-height: 1.9em !important ; }
  .layout_item ul li h4 { font-size: 4vw !important ; }
  .layout_item ul li p { line-height: 1.5em !important ; }
  .layout_item ul li::after { padding-bottom: 160% !important ; }
}



/* 微調 */
.layout_shop li .PD h3 { background-color: #ffea96 ; color: #480a86 ; }
.coupon_btn li { pointer-events: none ; }
.layout_paper_text { margin-bottom: -5px ; }
.layout_paper { padding-top: 20px ; }
.layout_banner { margin-top: 80px ; margin-bottom: 60px ; padding-left: 50px ; }
.layout_banner ul li .PD img { border: solid #e2eeff 5px !important ; }
.layout_sale { background-image: url(paper_bg_top_new.png?t=1790133340194) ; background-size: 100% ; background-repeat: no-repeat ; }
.layout_sale ul { margin: 10px ; }
.layout_sale .PD_layout-D3_02 ul { padding: 0 !important ; margin-top: 40px ; }
.Area_PD1 .Area_swiper { padding-left: 570px ; padding-top: 100px ; }
/* .Area_PD2 .PD_layout[data-pd-btn] .PD_btn { background-color: #a55ef9 !important ; } */
@media screen and (max-width:767px){
  .layout_paper_text { margin-bottom: 0 ; }
  .layout_paper { padding-top: 3vw ; }
  .layout_banner { margin-top: 14vw ; margin-bottom: 6vw ; padding-left: 3vw ; }
  .layout_sale ul { margin: 2vw ; }
  .layout_sale .PD_layout-D3_02 ul { padding: 0 !important ; margin-top: 9vw ; }
  .Area_PD1 .Area_swiper { padding-left: 54vw ; padding-top: 5vw ; }
}



/* 家電主題日 */
.mainday { margin-bottom: 5vw ; background-color: #ffea97 ;  }
.mainday .title_2  { padding: 0 ; }
.mainday .box { margin-top: -1.2vw; display: flex;  flex-direction:row; width: 98%; }
.mainday .box ul { padding: 0;  }
.mainday h2  {  height: 16vw ; }
.mainday h2 span { width: 89%; font-size: 5.5vw; text-align: left; height: 12vw; line-height: 17vw; }
.mainday .box_1 { width: 48%; margin-right: 2.1vw; margin-top: 3vw; }
.mainday .box_2 { width: 48%; }
.mainday .PD_layout-D1_02B[data-pd-style=off] ul { grid-gap:0; }
.mainday .box__ { margin-bottom: 2.1vw; }
.mainday .PD_layout-D1_02B.PD_layout_2 li::after {  content: ""; display: block;  background: #FFF; width: 100%; height: 0.1vw; position: absolute; bottom: -2.5vw; }
.mainday .PD_layout-D1_02B .PD h3 { color: #121212 ; margin-top: 0; font-size: 5vw; line-height: 4.5vw; }
.mainday .PD_layout-D1_02B .PD h4 span { color: #521b93 ; font-size: 5vw; line-height: 8vw; }
.mainday .PD_layout-D1_02B .PD_img { width: 38.2% ;   }
.mainday .PD_layout-D1_02B .PD_img img {  background-image: url(bg001.png?t=1790133340195); background-repeat: no-repeat ; background-size: 100% ; }
.mainday .PD_layout-D1_02B .PD_into { width: 61.8%; }
.mainday .PD_layout-D1_02B .PD_into::after { content: ""; display: block; background: url(go.png?t=1790133340195) left bottom no-repeat; aspect-ratio: 66 / 66; background-size: 100%; width: 3.8vw; position: absolute; bottom: 0vw; left: 1.3vw; }
.mainday .PD_layout-D1_02B .PD_slide { background: #00000000; }
@media screen and (min-width:768px){
  .mainday { margin-bottom: 50px ; height: auto ; padding-bottom: 50px ; }
  .mainday .title_2  {padding: 0;  margin-bottom: 13px;   }
  .mainday .box { margin-top: 0;  width: 98%; }
  .mainday .PD_layout ul { padding: 10px; }
  .mainday h2  {  height: 113px; }
  .mainday h2 span { width: 89%; font-size: 55px;  height: 120px; line-height: 170px; }
  .mainday .box_1 { width: 51.5%; margin-right: 34px; margin-top: 0; }
  .mainday .box_2 { width: 42%;  }
  .mainday .box__ { margin-bottom: 0; }
  .mainday .PD_layout-D1_02B.PD_layout_2 li::after {  height: 2px; bottom: -28px; }
  .mainday .PD_layout-D1_02B .PD h3 {  font-size: 34px; line-height: 45px; }
  .mainday .PD_layout-D1_02B .PD h4 span {  font-size: 40px; line-height: 40px; }
  .mainday .PD_layout-D1_02B .PD_img { width: 32% ;   }
.mainday .PD_layout-D1_02B .PD_into { width: 68%; }
  .mainday .PD_layout-D1_02B .PD_into::after {  width: 28px;  bottom: -13px; left: 15px; }
  }


/* 區標 */
@media screen and (min-width: 768px) {
  .layout_text01 { height: 160px ; margin: auto ; }
  .layout_text01 .PD h3 span{ color: #fff ; margin-top: 10px ;  }
  .layout_text01 .PD_layout ul { padding: 0 ; }
  .layout_text01 .PD_layout.PD_layout-D3_01 .PD img{ width: 100% ;}

  .layout_text02 { height: 160px ; margin: auto ; }
  .layout_text02 .PD h3 span{ color: #fff ; margin-top: 10px ;  }
  .layout_text02 .PD_layout ul { padding: 0 ; }
  .layout_text02 .PD_layout.PD_layout-D3_01 .PD img{ width: 100% ;}
}
@media screen and (max-width:767px){
  .layout_text01 { height: 18vw ; }
  .layout_text01 .PD h3 span{ color: #fff ; font-size: 5vw ; }
  .layout_text01 .PD_layout.PD_layout-D3_01 .PD .PD_img { padding: 0 ; }
  .layout_text01 ul { padding: 0 !important ; margin: 0 !important ; }

  .layout_text02 { height: 18vw ; }
  .layout_text02 .PD h3 span{ color: #fff ; font-size: 5vw ; }
  .layout_text02 .PD_layout.PD_layout-D3_01 .PD .PD_img { padding: 0 ; }
  .layout_text02 ul { padding: 0 !important ; margin: 0 !important ; }
}


/* 今日主打 */
.Area_PD2 .PD_layout[data-pd-btn] .PD_btn { background-color: #ff005d;  background-image: repeating-linear-gradient(45deg, #de9a1a -2%, #ffb722 120%) ;  background-position: right top;  background-size: 100% 100%; }
@media screen and (min-width:768px){
  .Area_PD2 { z-index: 5 ; margin-bottom: 50px ; }
  .Area_PD2 .layout_text { position: absolute ; width: 7% ; left: 0 ; top: 0 ; }
  .Area_PD2 .layout_text ul { padding: 0 !important ; }
  .Area_PD2 .Area_swiper { padding-left: 70px ; padding-top: 20px; }
  }
@media screen and (max-width:767px){
  .Area_PD2 { z-index: 5 ; margin-bottom: 2vw ; margin-top: 2vw ; }
  .Area_PD2 .layout_text { position: absolute ; width: 14% ; left: 0 ;  top: 0 ; }
  .Area_PD2 .Area_swiper { padding-left: 13vw ; }
}



.layout_hot ul { padding: 0 !important ; grid-gap: 0 !important ; }
.layout_hot ul li { background-color: #ffea97 !important ; }
.layout_hot .PD_img { padding: 0 !important ; }
.layout_hot .PD_img img { border-radius: .5em .5em 0 0 !important ; }
.layout_hot .PD_into { padding-bottom: 0 !important ; }
@media screen and (max-width:767px){
  .layout_hot .PD_into { padding-bottom: .5em !important ; }
}


.Area_good02 { margin-bottom: 50px ; }
.layout_good02 ul { padding: 0 !important ; grid-gap: 0 !important ; }
/* .layout_good02 ul li { background-color: #ffea97 !important ; } */
.layout_good02 ul li { background-image: url(good02_bg.jpg?t=1790133340195); background-repeat: no-repeat; background-size: 100% ; background-color: transparent !important ; }
.layout_good02 ul li h3 { color: #985ae4 !important ; line-height: 1em !important ; }
.layout_good02 .PD_img { padding: 0 !important ; }
.layout_good02 .PD_img img { border-radius: .5em .5em 0 0 !important ; background-color: transparent !important ; }
.layout_good02 .PD_into { padding-bottom: 0 !important ; }
@media screen and (max-width:767px){
  .Area_good02 { margin-bottom: 5vw ; }
  .layout_good02 .PD_into { padding-bottom: .5em !important ; }
  .layout_good02 ul li h3 { font-size: 4.7vw !important; }
  .layout_good02 ul li h4 { font-size: 4.5vw !important; }
}


/* AI家電 */
.Area_AI { margin-bottom: 50px ; }
.Area_AI .layout_AI { background-color: #fff1b9 ; padding: 1% ; }
.Area_AI .layout_AI .PD h4 { color: #6d24c4 ; }
.Area_AI .layout_AI .PD h3 { background-color: #6d24c4 ; }
@media screen and (max-width:767px){
  .Area_AI { margin-bottom: 5vw ; }
  .Area_AI .layout_AI { width: 96% ; }
}


.strategy .Area_swiper li { background: #00000000;  }
/* 今日瘋搶攻略 */

  .strategy .Area_swiper_1 { margin-bottom: 21px; }
  .strategy .Area_swiper_1 ul h3 { font-size: 50px; text-align: center; font-weight: 600; height: 55px; line-height: 55px;  background: #fff1b9 ; padding: 21px 55px; height: 89px; padding-left: 34px; border-radius: 21px; }
  .strategy .Area_swiper_1 ul h3::after { content: "GO";  color: #fff ; font-size: 21px; background: #521b93 ; display: block; padding: 3px; text-align: center; width: 34px; height: 34px;  line-height: 34px; border-radius: 50%; position: absolute; top: 28px; right: 8px; }
  .strategy .Area_swiper_1 ul h3 span { margin-right: -8px; }
  .strategy .Area_swiper_1 ul h3 #js-PD_val_1 { color: #121212; }
  .strategy .Area_swiper_1 ul h3 #js-PD_val_2 { color: #521b93; margin-right: 13px; }
  .strategy .Area_swiper_1 ul h3 #js-PD_val_3 { color: #121212;  }
  .strategy .Area_swiper_1 ul h3 #js-PD_val_4 { color: #521b93;  }
  .strategy .box { background-color: #faf5f2 ; padding: 55px 0 20px 0 ; margin: auto ; border-radius: 20px ; }
  .strategy .layout_strategybtn {z-index: 3 ; position: absolute; width: 15%; left: 25px ; }
  .strategy .PD_layout.PD_layout-D1_16 ul li .PD h3 { font-size: 34px; color: #4d198c ; font-weight: 600;  max-height: 180px; line-height: 40px; }
  .strategy .layout_strategybtn ul { padding: 0 !important ; }
  .strategy .layout_strategy { padding: 0 25px 0 185px ;  }
  .strategy .layout_strategy ul { min-height: 150px ; align-items: end; grid-gap:21px }
  .strategy .layout_strategy ul p { font-size: 55px; text-align: left; font-weight: 600; height: 55px; line-height: 55px; padding-left: 34px; margin-bottom: 13px; font-family: sans-serif; }
  .strategy .layout_strategy ul p span { margin-right: -13px; }
  .strategy .layout_strategy ul p::before { content: ""; background: #4d198c ; display: block; width: 21px; height: 21px; border-radius: 50%; position: absolute; top: 21px; left: 0px; }
  .strategy .layout_strategy ul p::after { content: "GO";  color: #fff; font-size: 21px; background: #4d198c ; display: block; padding: 3px; text-align: center; width: 34px; height: 34px;  line-height: 34px; border-radius: 50%; position: absolute; top: 18px; right: 0px; }
  .strategy .layout_strategy ul p #js-PD_val_1 { color: #363636; }
  .strategy .layout_strategy ul p #js-PD_val_2 { color: #4d198c; }
  .strategy .layout_strategy ul p #js-PD_val_3 { color: #363636; font-size: 21px; }
  .strategy .strategyline { height: 50px ; }
  .strategy .strategyline ul { padding: 0 !important ; }
  .strategy .layout_strategylogo { padding: 20px 0 20px 180px;  }
  .strategy .Area_swiper .PD_img img { border-radius: 0 !important; }
  .strategy .layout_strategylogo ul { height: 130px ; }
  .strategy .layout_strategylogo li { background-color: transparent !important ; }

  .strategy .Area_swiper.category-reco  {   margin-left: 175px; }
  .strategy .category-reco .Area_swiper_box {  padding: 0; }
  .strategy .category-reco .layout_strategy {  padding: 0 0vw 0 0vw;  }
  .strategy .category-reco .layout_strategy ul { grid-gap:0; }
  .strategy .category-reco .PD_img {  width: 30%;  }
  .strategy .category-reco .PD_into {  width: 70%; justify-content:center;  }
  .strategy .category-reco .layout_strategy ul p  {  padding: 0;  }
  .strategy .category-reco p#js-PD_val_1 { color: #363636; }
  .strategy .category-reco p#js-PD_val_2 { color: #4d198c; }
  .strategy .category-reco ul p::after { top: 144px; right: 40px; }
@media screen and (max-width:767px){
  .strategy .Area_swiper_1 { margin-bottom: 3.4vw ; width: 96% ; }
  .strategy .Area_swiper_1 ul h3 { font-size: 5vw; height: 5.5vw; line-height: 5.5vw; padding: 2.1vw 5.5vw; height: 8.9vw; padding-left: 3.4vw; border-radius: 2.1vw; }
  .strategy .Area_swiper_1 ul h3::after {  font-size: 2.1vw; padding: 0.3vw; width: 3.4vw; height: 3.4vw;  line-height: 3.4vw;   top: 2.8vw; right: 0.8vw; }
  .strategy .Area_swiper_1 ul h3 span { margin-right: -0.8vw; }
  .strategy .Area_swiper_1 ul h3 #js-PD_val_2 { margin-right: 0.8vw; }
  .strategy .box { background-color: #faf5f2 ; padding: 5vw 0 2vw 0 ; margin: auto ; border-radius: 2vw ; width: 96% ;  }
  .strategy .layout_strategybtn { width: 15% ; position: absolute ; left: 2vw ; }
  .strategy .PD_layout.PD_layout-D1_16 ul { grid-gap: 0;  }
  .strategy .PD_layout.PD_layout-D1_16 .PD_into { padding: 0;  }
  .strategy .PD_layout.PD_layout-D1_16 ul li .PD h3 { font-size: 4.2vw; line-height: 5vw;  max-height: 18vw; }
  .strategy .layout_strategy { padding: 0 2vw 0 16vw ; align-items: end; }
  .strategy .layout_strategy ul { min-height: 16vw ; align-items: end; grid-gap:2.1vw;  }
  .strategy .layout_strategy ul p { font-size: 5.5vw; height: 5.5vw; line-height: 5.5vw; padding-left: 3.4vw; margin-bottom: 1.3vw; }
  .strategy .layout_strategy ul p span { margin-right: -1.3vw; }
  .strategy .layout_strategy ul p::before {  width: 2.1vw; height: 2.1vw; top: 2.1vw; left: 0px; }
  .strategy .layout_strategy ul p::after { font-size: 2.1vw;  padding: 0.3vw;  width: 3.4vw; height: 3.4vw;  line-height: 3.4vw; top: 1.8vw; right: 0px; }
  .strategy .layout_strategy ul p #js-PD_val_3 {  font-size: 2.3vw; }

  .strategy .strategyline { height: 5.5vw ;  }
  .strategy .strategyline ul { padding: 0 !important ; }
  .strategy .layout_strategylogo { padding: 2vw 0 2vw 19vw ; }
  .strategy .layout_strategylogo ul { height: 13vw ; }
  .strategy .Area_swiper .PD_img img { border-radius: 0 !important; }
  .strategy .layout_strategylogo li { background-color: transparent !important ; }

  .strategy .category-reco .layout_strategy {  padding: 0 2vw 0 0vw;  }
  .strategy .Area_swiper.category-reco  {   margin-left: 13vw; }
  .strategy .category-reco ul p::after { top: 13vw; right: 0px; }
  
}





/* 今日主打 */
@media screen and (min-width:768px){
  .Area_PD11 { padding-bottom: 10px ; margin-top: 0 ; }
  .Area_PD11_all .bg_repeat { background-color: #ffeda4 ; border-radius: 30px ; padding-bottom: 20px ; margin-bottom: 50px ; }
  .Area_PD11 .layout_text_PD11 { width: 6% ; position: absolute; left: 25px ; top: 23px ; }
  .Area_PD11 .layout_text_PD11 ul { padding: 0 !important; }
  .Area_PD11 .Area_swiper { padding-left: 100px ; padding-top: 10px ;  }
  .Area_PD11 .layout_PD11 .PD_into {  background: #4b0b81 ;border-radius: 0 0 8px 8px;
    padding-bottom: 2em; }
  .Area_PD11 .layout_PD11 .PD_into h3 { color: #fff; font-size: 28px; }
  .Area_PD11 .layout_PD11 .PD_into { color: #fff !important ; font-size: 15px !important; }
  .Area_PD11 .layout_PD11 .PD_into h4 .js-PD_txt2 { display: none !important; }
  .Area_PD11 .layout_PD11 ul { height: 100% !important ; padding-bottom: 5px !important ;}
  .Area_PD11 .PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn { top: 180px ; }
  .Area_PD11 .PD_layout[data-pd-h3="5"] .PD h3 span { background-color: rgb(218 218 218 / 90%);  }
  .Area_PD11 .Area_swiper_box { padding-bottom: 25px ; }
  .Area_PD11 .PD .PD_into h4 {position: absolute;bottom: -14px;left: 11%;width: 78%;height: 40px;line-height: 2em;color: #fff ;background-color: #ef64ff ;border-radius: 20em;overflow: visible; font-size: 20px;}
  .Area_PD11 .PD:hover h4 { color: #fff !important ; }
  .Area_PD11 .Area_swiper_box .swiper-pagination {    bottom: -4px !important; }
  }
 @media screen and (max-width:767px){
    .Area_PD11_all .bg_repeat { background-color: #ffeda4 ; padding: 1vw 0 3vw ; margin-bottom: 5vw ; }
    .Area_PD11 { padding-bottom: 0 ; margin-top: 0; }
    .Area_PD11 .layout_text_PD11 { width: 14% ; position: absolute; left: 0 ; top: 4vw ; }
    .Area_PD11 .Area_swiper { width: 100%; padding-left: 13vw ; padding-top: 1vw; }
    .Area_PD11 .Area_swiper ul { padding-bottom: 2vw !important ; }
    .Area_PD11 .layout_PD11 .PD_into {  border-radius: 0 0 2vw 2vw ; padding-bottom: 1.4em ;  background: #4b0b81; }
    .Area_PD11 .layout_PD11 .PD_into h3 { color: #fff ; font-size: 4vw ; }
    .Area_PD11 .layout_PD11 .PD_into h4 { bottom: -3.5vw ; height: 8vw ; line-height: 2em ;color: #fff ; background-color: #ef64ff ; border-radius: 20em; overflow: visible ; position: absolute ; left: 11% ; width: 78%; font-size: 4vw ; }
    .Area_PD11 .layout_PD11 .PD_into h4 .js-PD_txt2 { display: none !important; }
    .Area_PD11 .PD_layout[data-pd-btn][data-pd-btn-pdgo] .PD .PD_btn { top: 24vw ; }
    .Area_PD11 .Area_swiper_box .PD_layout .PD p .Price { font-size: 22px ; }
    .Area_PD11 .Area_swiper_box .swiper-pagination { scale: .6 ; bottom: -4px !important ; }
    .Area_PD11 .PD:hover h4 { color: #fff !important ; }
}



/*飄-上下*/
.uptodown-play { -webkit-animation:uptodown-play 2s ease-in-out infinite alternate;
  animation:uptodown-play 2s ease-in-out infinite alternate;}
@-webkit-keyframes uptodown-play { 
0%   { transform: translateY(0); }
50%  { transform: translateY(10px); }
100% { transform: translateY(0); }
}
@keyframes uptodown-play { 
0%   { transform: translateY(0); }
50%  { transform: translateY(10px); }
100% { transform: translateY(0); }
}

/*飄-下上*/
.downtoup-play { -webkit-animation:downtoup-play 2s ease-in-out infinite alternate;
  animation:downtoup-play 2s ease-in-out infinite alternate;}
@-webkit-keyframes downtoup-play { 
0%   { transform: translateY(0); }
50%  { transform: translateY(-10px); }
100% { transform: translateY(0); }
}
@keyframes downtoup-play { 
0%   { transform: translateY(0); }
50%  { transform: translateY(-10px); }
100% { transform: translateY(0); }
}