@charset "utf-8";
/* CSS Document */

/*基本*/
body{ margin: 0; padding: 0;}


/*全BOX版面*/
.WRAPPER { position: relative; display: block; margin: 0 auto; padding: 0; width: 100%;  min-width: 1220px; overflow: hidden; font-family: "微軟正黑體","Microsoft JhengHei",Helvetica;}
.WRAPPER img { border: 0; vertical-align: top;}
.WRAPPER a { text-decoration: none;}
@media screen and (max-width:767px){
  .WRAPPER { min-width: inherit; padding-bottom: 5vw; }
  .WRAPPER img {  width: 100%;  height: auto;}
}
	
/*PC背景*/
.bg_01 { z-index:-1; position:absolute; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_02 { z-index:-3; position:absolute; top:0; left:0; width:100%; height:800px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_fix1 { z-index:-4; position:fixed; top:0; left:0; width:100%; height:1400px; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
.bg_fix2 { z-index:-6; position:fixed; top:0; left:0; width:100%; height:100%; background-repeat:no-repeat; background-position: center top; pointer-events:none;}
@media screen and (max-width:767px){
.mbg_02 { z-index:-3; position:absolute; top:13vw; left:0; width:100%; height:150vw; background-repeat:no-repeat; background-position: center top; pointer-events:none;background-size:100%;}
.mbg_fix1 { z-index:-52; position:fixed;top:0vw; left:0; width:100%; height:100%; background-color: #0c314c;}
}


/*區塊背景*/
@media screen and (min-width:768px){
.Area01_bg {z-index: -1;position:absolute;top: 0;width:100%;height: 1440px;background-repeat:no-repeat;background-position: center top;pointer-events:none;}		
	
}
@media screen and (max-width:767px){
.mArea01_bg {z-index: -1;position:absolute;left:0;top: 0;width:100%;height: 233vw;background-repeat: no-repeat;background-position: center top;pointer-events:none;background-size: 100%;}	

}


/*區塊_all*/
.Area { position: relative; margin: 0 auto; padding: 0; border-radius: 0; text-align: center; }
.Area a { display: block;} 
.Area .go_bt {
  -webkit-transition: all 0.4s ease;
     -moz-transition: all 0.4s ease;
      -ms-transition: all 0.4s ease;
       -o-transition: all 0.4s ease;
          transition: all 0.4s ease;}
.Area .go_bt:hover {
  -webkit-transform: scale(0.95);
     -moz-transform: scale(0.95);
      -ms-transform: scale(0.95);
       -o-transform: scale(0.95);
          transform: scale(0.95);}
.Area1220 { margin: 0 auto; width: 1220px;}
.Area960 { margin: 0 auto; width: 960px;}
@media screen and (max-width:767px){
  .Area .go_bt:hover {  
    -webkit-transform: none;
     -moz-transform: none;
      -ms-transform: none;
       -o-transform: none;
          transform: none;}

  .Area1220 { width: 100%;}
  .Area960 { width: 100%;}
  /*區塊_切割*/
  .Area_1bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_1bn a { float: left; margin: 0 0 2% 0; padding: 0; width: 100%; list-style: none;}
  .Area_2bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_2bn a { float: left; margin: 0 1% 2%; padding: 0; width: 48%; list-style: none;}
  .Area_3bn { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_3bn a { float: left; margin: 0 1% 2% ; padding: 0; width: 31.3%; list-style: none;}
  .Area_1bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_1bn_nopadding a { float: left; margin: 0; padding: 0; width: 100%; list-style: none;}
  .Area_2bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_2bn_nopadding a { float: left; margin: 0; padding: 0; width: 50%; list-style: none;}
  .Area_3bn_nopadding { margin: 0 auto; padding: 0; overflow: hidden;}
  .Area_3bn_nopadding a { float: left; margin: 0; padding: 0; width: 33.3%; list-style: none;}
}

/*間距*/
.Area_bottom { margin-bottom: 50px;}
@media screen and (max-width:767px){
  .Area_bottom { margin-bottom: 10vw;}
}

/*momo*/
.Area_top {}
.Area_top .momologo { z-index: 2; position: absolute; top: 15px; left: 20px;}
.Area_top .momologo a { display: block; width: 200px; height: 30px; }
@media screen and (max-width:767px){
  .Area_top { height: auto;}
  .Area_top .momologo { display: none;}
}



/*LOGO*/
.momologo { z-index:99; position: absolute; top: 15px; left:15px;}
.momologo a { display:block; width:140px; height:21px;}
.momologo a svg { width:140px; height:21px; }
.momologo a path { fill:#EA27C2; }
.momologo-pink  a path { fill:#EA27C2; }/*LOGO 桃紅色*/
.momologo-white a path { fill:#ffffff; }/*LOGO 白色*/
	@media screen and (max-width:767px){
		.momologo { display:none;}
	}


/*移除公版設定*/
.Area .remove_box_style ul { background-color: transparent; grid-gap: 10px;}
.Area .remove_box_style ul li { border: none!important;}
@media screen and (max-width:767px){
  .Area .remove_box_style ul { width: 100%; grid-gap: 0.2em;}
  .Area .remove_box_style ul {}
}

/*輪播移除公版設定*/
.Area .swiper_remove_box_style ul { background-color: transparent; grid-gap: 0;}
.Area .swiper_remove_box_style ul li { border: none!important; background-color: #fff;}
.Area .swiper_remove_box_style ul li,
.Area .swiper_remove_box_style ul li .PD_img img { border-radius: 10px;}
@media screen and (max-width:767px){
  .Area .swiper_remove_box_style ul { width: 100%; grid-gap: 0.2em;}
  .Area .swiper_remove_box_style ul {}
}

.Area .PD_layout-add2cart ul { padding: 20px;}
@media screen and (max-width:767px){
  .Area .PD_layout-add2cart ul { padding: 0.2em 0;}
  .Area .PD_layout-add2cart ul li { padding: 0.2em;}
}


/*版頭區塊*/
.Area_title { height:1010px;}
.Area_title .star {z-index:-2;position:absolute;left:0px;top:0px;width:1216px; height:755px;}	
.Area_title .star2 {z-index:-2;position:absolute;left:0px;top:0px;width:1216px; height:755px;}	
@media screen and (max-width: 767px){
	 .Area_title { width:100%;height:160vw;}
     .Area_title .star {z-index:-2;position:absolute;left:0;top:0;width:100%;}	
     .Area_title .star2 {z-index:-2;position:absolute;left:0;top:0;width:100%;}	
		}

/*主標*/
.Area_title .title_swiper {position:absolute;left: 267px;top: 45px;width: 638px;height:371px;text-align: left;z-index: 3;animation-delay:0.2s;}
.Area_title .title_swiper .PD_layout ul li {pointer-events:none;}
.Area_title .title_swiper .PD_layout .PD img {width: 638px;}
	@media screen and (max-width:767px){
    .Area_title .title_swiper {position: absolute;left: 5%;top: -2vw;height: 63vw;width: 91%;margin: 0px auto;list-style: none;z-index: 0;}
    .Area_title .title_swiper .PD_layout .PD img {width: 100%;}

}




/*版頭輪播品*/
.Area_title .box_PD {position:absolute;width: 100%;top: 385px;left: 229px;}
.Area_title .box_PD .Area_swiper .swiper-slide .PD_img img {width: 54%;}
.Area_title .box_PD .Area_swiper ul {margin: 0;padding: 0; display: flex;}
    @media screen and (max-width:767px){
      .Area_title .box_PD  {z-index: 2;position:absolute;left: -1.5vw;top: 63vw;width: 99%;height:46%;}
	  .Area_title .box_PD .Area_swiper  .swiper-slide .PD_img img {width: 110%;}
    }
    /*輪播公板調整*/
    .Area_title .box_PD .PD_layout {}
        @media screen and (max-width:767px){
         .Area_title .box_PD .PD_layout .PD_img { z-index: 5; position: absolute;}
        }
        /*輪播特效*/
        @media screen and (min-width:768px){
            .Area_title .box_PD .Area_swiper .swiper-slide .PD_img { opacity: 0; transform: translate(6%,0);}
            .Area_title .box_PD .Area_swiper .swiper-slide-active .PD_img { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}

        }
        @media screen and (max-width:767px){
            .Area_top .box_PD .Area_swiper .swiper-slide .PD_img { opacity: 0;transform: translate(6%,0);  }
            .Area_top .box_PD .Area_swiper .swiper-slide-active .PD_img { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}

        }



/*版頭TT輪播品*/
.Area_title .box_PD2 {position:absolute;top: 334px;left: 347px;width:45%;z-index: 3; }
.Area_title .box_PD2 .Area_swiper .swiper-slide .PD_img img {width:100%;}
.Area_title .box_PD2 .Area_swiper ul {margin: 0;padding: 0; display: flex;}
    @media screen and (max-width:767px){
      .Area_title .box_PD2  {z-index: 3;position:absolute;left: 7vw;top: 37.5vw;width: 90%;}
	  .Area_title .box_PD2 .Area_swiper  .swiper-slide .PD_img img {width:100%;}
    }
    /*輪播公板調整*/
    .Area_title .box_PD2 .PD_layout {}
        @media screen and (max-width:767px){
         .Area_title .box_PD2 .PD_layout .PD_img { z-index: 5; position: absolute;}
        }
        /*輪播特效*/
        @media screen and (min-width:768px){
            .Area_title .box_PD2 .Area_swiper .swiper-slide .PD_img { opacity: 0; transform: translate(6%,0);}
            .Area_title .box_PD2 .Area_swiper .swiper-slide-active .PD_img { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}

        }
        @media screen and (max-width:767px){
            .Area_top .box_PD2 .Area_swiper .swiper-slide .PD_img { opacity: 0;transform: translate(6%,0);  }
            .Area_top .box_PD2 .Area_swiper .swiper-slide-active .PD_img { opacity: 1; transition: 1s ease-out; transform: translate(0,0);}

        }


/*活動倒數*/
.TimerNick {position:absolute;top: 560px;left: 126px;display: inline-block;z-index:8;text-align: center;color: #FFFFFF;}
.TimerNick .FontStyle {display: inline-block;margin: 0 0 0 5px;padding: 0;border: 0;font: bold 47px/50px Arial;color: #ffb500;letter-spacing: 2px;text-align: center;}
.TimerNick span {padding-left: 2px;font: bold 25px/35px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: 0.05em;}
    @media screen and (max-width:767px){
      .TimerNick  {width:100%;top: 60vw;left: 22vw;}
      .TimerNick .FontStyle {margin: 0;padding: 0;border: 0;font: bold 6vw/5vw Arial;}
      .TimerNick span {padding-left: 1vw;font: bold 4vw/5vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica;letter-spacing: -0.05em;}
    }


/*流星動畫*/
.night {
  position: absolute;
  width: 500px;
  height:500px;
  top:131px;
  left:70px;
  z-index: -3;
  overflow:hidden;
  pointer-events: none;
  -webkit-transform: rotateZ(45deg);
          transform: rotateZ(45deg);
}


@media screen and (max-width:736px){
.night {
  position: absolute;
  width: 60%;
  height:108vw;
  top:14vw;
  left:14vw;
  z-index: -3;    
}
}


.shooting_star {
  position: absolute;
  left: 50%;
  top: 50%;
  height: 2px;
  background: linear-gradient(-45deg, #e4f0ff, rgba(0, 0, 255, 0));
  border-radius: 999px;
  -webkit-filter: drop-shadow(0 0 6px #e4f0ff);
          filter: drop-shadow(0 0 6px #e4f0ff);
  -webkit-animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
          animation: tail 3000ms ease-in-out infinite, shooting 3000ms ease-in-out infinite;
}
.shooting_star::before, .shooting_star::after {
  content: '';
  position: absolute;
  top: calc(50% - 1px);
  right: 0;
  height: 2px;
  background: linear-gradient(-45deg, rgba(0, 0, 255, 0), #95dcfd, rgba(0, 0, 255, 0));
  -webkit-transform: translateX(50%) rotateZ(45deg);
          transform: translateX(50%) rotateZ(45deg);
  border-radius: 100%;
  -webkit-animation: shining 3000ms ease-in-out infinite;
          animation: shining 3000ms ease-in-out infinite;
}
.shooting_star::after {
  -webkit-transform: translateX(50%) rotateZ(-45deg);
          transform: translateX(50%) rotateZ(-45deg);
}
.shooting_star:nth-child(1) {
  top: calc(50% - -153px);
  left: calc(50% - 262px);
  -webkit-animation-delay: 8057ms;
          animation-delay: 8057ms;
}
.shooting_star:nth-child(1)::before, .shooting_star:nth-child(1)::after, .shooting_star:nth-child(1)::after {
  -webkit-animation-delay: 8057ms;
          animation-delay: 8057ms;
}
.shooting_star:nth-child(2) {
  top: calc(50% - -99px);
  left: calc(50% - 271px);
  -webkit-animation-delay: 1107ms;
          animation-delay: 1107ms;
}
.shooting_star:nth-child(2)::before, .shooting_star:nth-child(2)::after, .shooting_star:nth-child(2)::after {
  -webkit-animation-delay: 1107ms;
          animation-delay: 1107ms;
}
.shooting_star:nth-child(3) {
  top: calc(50% - 160px);
  left: calc(50% - 341px);
  -webkit-animation-delay: 5571ms;
          animation-delay: 5571ms;
}
.shooting_star:nth-child(3)::before, .shooting_star:nth-child(3)::after, .shooting_star:nth-child(3)::after {
  -webkit-animation-delay: 5571ms;
          animation-delay: 5571ms;
}

@-webkit-keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}

@keyframes tail {
  0% {
    width: 0;
  }
  30% {
    width: 100px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@keyframes shining {
  0% {
    width: 0;
  }
  50% {
    width: 30px;
  }
  100% {
    width: 0;
  }
}
@-webkit-keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@keyframes shooting {
  0% {
    -webkit-transform: translateX(0);
            transform: translateX(0);
  }
  100% {
    -webkit-transform: translateX(300px);
            transform: translateX(300px);
  }
}
@-webkit-keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}
@keyframes sky {
  0% {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }
  100% {
    -webkit-transform: rotate(405deg);
            transform: rotate(405deg);
  }
}


/*好康攻略*/
@media screen and (min-width:768px){
.Area01 {height: auto;padding-top: 160px;padding-bottom: 60px;}
.Area01 .Areabnbrand {position: relative;flex-wrap: nowrap;box-sizing: border-box;padding: 60px 60px 25px;}
  .Area01 .Areabnbrand  ul { display: flex;list-style: none;margin: 0 auto;padding: 0;width: 100%;gap: 20px;justify-content: center;}

.Area01 .Areabnbrand2{width: 80%;}
.Area01 .Areabnbrand2 ul li{padding: 10px;}
}
@media screen and (max-width:767px){
  .m_Area01_bg{background-color: #134061;}
  .Area01 {height: auto; padding-top: 0vw; padding-bottom: 3vw;}
  .Area01 .Areabnbrand {position: relative; flex-wrap: wrap; box-sizing: border-box;}
  .Area01 .Areabnbrand  ul { display: flex;list-style: none;margin: 0 auto;padding: 0;width: 94%;gap: 0.5em;}
  .Area01 .Areabnbrand2 ul li{padding: 1.7vw;}

}

/*大小網吃不同張*/
@media screen and (min-width:768px){
.Area01 .Areabnbrand  .PD_layout[data-pd-pdlogo] .PD .PD_logo { display: none!important;}
}
@media screen and (max-width:767px){
.Area01 .Areabnbrand .PD_layout[data-pd-pdlogo] .PD .PD_img { display: none!important;}
}




/*爆品區(線上入搞)*/
@media screen and (min-width:768px){
	.Area_item2 {width: 70%;padding-bottom: 90px;}
	.Area_item2 .layout_item ul {width:100%;margin: -30px 0;padding:0;gap: 0;}
	.Area_item2 .layout_item ul li {padding:0 0 0 0;margin:10px 0;}
	.Area_item2 .layout_item ul li img {width:90%;}
}
@media screen and (max-width:767px){
  .Area_item2 {padding-bottom:3vw;}
  .Area_item2 .layout_item{ width:100%;margin:0 auto;padding:0;}
  .Area_item2 .layout_item ul {margin:0;padding:0;}
  .Area_item2 .layout_item ul li {width:100%;margin: 0 0 5vw 0}
}


/*4p公版01*/
@media screen and (min-width:768px){
    .Area02  {height: 550px;padding-bottom: 80px;}

}
@media screen and (max-width:767px){
    .Area02  {height: auto;padding-bottom: 10vw;}
    .Area02 .PD_layout {padding-top: 1vw;}
}

/*4p公版02*/
@media screen and (min-width:768px){
    .Area03  {height: 500px; padding-bottom: 80px;}
}
@media screen and (max-width:767px){
    .Area03  {height: auto; padding-bottom:8vw;}
    .Area03 .PD_layout {padding-top: 3vw;}
}

/*4p公版03*/
@media screen and (min-width:768px){
    .Area04  {height: 500px; padding-bottom: 80px;}
}
@media screen and (max-width:767px){
    .Area04  {height: auto; padding-bottom:8vw;}
    .Area04 .PD_layout {padding-top: 3vw;}
}




/*推薦品牌*/
@media screen and (min-width: 768px) {
  .Area_logo{margin: -30px auto 100px auto;padding: 0px 0 0 0;height: auto;}
  .Area_logo .PD_layout{width: 100%;margin: 0 auto 0 auto;padding: 0 0 0 0;height: auto;}	
  .Area_logo .PD_layout ul{width: 100%;display: flex;padding: 0;margin: 0 auto;justify-content: center;flex-wrap: wrap;gap: 25px;}
  .Area_logo .PD_layout ul li{width: calc(100%/6);min-width: inherit;}

  .Area_logo .PD_layout ul li:nth-child(11) { left: 5px; }	
  .Area_logo .PD_layout ul li:nth-child(12) { left: 5px; }	
  .Area_logo .PD_layout ul li:nth-child(13) { left: 5px; }	
  .Area_logo .PD_layout ul li:nth-child(14) { left: 5px; }	
  .Area_logo .PD_layout ul li:nth-child(15) { left: 5px; }	
}
@media screen and (max-width:767px){
  .Area_logo{height: auto;padding-top: 0;margin: -3vw auto 8vw auto;padding: 0 0 0 0;}
  .Area_logo .PD_layout ul{width: 100%;display: flex;justify-content: center;flex-wrap: wrap;grid-gap: 0vw 7vw;margin-left: -1vw;margin-top: -2vw;}	
  .Area_logo .PD_layout ul li{width: calc(100%/4);min-width: inherit;}	
  .Area_logo .PD_layout ul li img{width: 115%;}
  
  .Area_logo .PD_layout ul li:nth-child(13) { left: 3.5vw; }	
  .Area_logo .PD_layout ul li:nth-child(14) { left: 3.5vw; }	
  .Area_logo .PD_layout ul li:nth-child(15) { left: 3.5vw; }	
}



/*影片*/
.Area05 {height: 960px;padding: 0 0 0 0;}
.Area05 .video {width: 1220px; margin: 0 auto;z-index:5; position: relative;overflow: hidden;margin-top: -20px;}
@media screen and (max-width:767px){
.Area05 { height: 75vw; padding: 0vw 0 8vw 0;}
.Area05 .video {position: relative;width: 100%;height: 72vw;margin: 0;z-index: 10;}
}



.box_youtube .youtubeArea {position:relative;margin:0 auto;width: 85%;top: 8%;padding-bottom: 49%;}
.box_youtube .youtubeArea * { margin:0; padding:0;}
.box_youtube .youtubeArea iframe { position:absolute; top:0px; left:0px; width:100%; height:100%;}
.box_youtube .youtubeArea .youtubeDiv { background-color: transparent!important;}

@media screen and (min-width:768px){
   .box_youtube {position: relative;width: 1147px!important;height: 701px;padding: 2%;left: 20px;top: -10px;background: url("box_youtube_bg.png?t=1751286751107") center top / 100% no-repeat scroll;}
}
@media screen and (max-width:767px){
   .box_youtube { position: relative;width: 90%!important; height: 53vw; padding: 2%; left: 3vw;background: url("box_youtube_bg.png?t=1751286751107") center top / 100% no-repeat scroll;}
   .box_youtube .youtubeArea { position:relative; margin:0 auto;width: 90%;top: 7%;  padding-bottom: 49%; }
}




/*BN*/
.Area_sale {position:relative;width:1220px;height:auto;margin:0 auto;padding: 50px 0 10px 0;}
@media screen and (max-width:767px){
.Area_sale { width:100%; padding:0vw;margin-bottom: 2vw;}
.Area_sale .PD_layout {height:auto; }
}


/*旗艦館*/
.Area_more {position:relative;width:1220px;height:auto;margin:0 auto;padding: 0px 0 80px 0;}
.Area_more .PD_layout { width:70%; height:auto; }
.Area_more .PD_layout ul li { padding: 0 5px; }
@media screen and (max-width:767px){
.Area_more { width:100%; padding:0 0 5vw 0;}
.Area_more .PD_layout { width:95%; height:auto; }
.Area_more .PD_layout ul li { padding: 0 1vw; }
}


/*隱鑶*/
.for_pc {}
.for_phone { display: none !important;}
	@media screen and (max-width:767px){
		.for_pc { display: none !important;}
		.for_phone { display: inherit !important;}
	}