@charset "utf-8";

/*區塊_all*/
.Area1220 {position: relative;margin:0 auto;width:1220px;}
.Area960 {margin:0 auto;width:960px;}
.Area {position: relative;margin:0 auto;padding:0;border-radius:0;text-align:center; }
.Areaa {position:relative;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);}
 @media screen and (max-width:767px){
  .Area1220 { width:100%;}
  .Area960 {width:100%;}
  .Area .go_bt:hover {  
   -webkit-transform:none;-moz-transform:none;-ms-transform:none;-o-transform:none;transform:none;}
 }
    
/*間距設定*/
.tpspacing { margin: 2% auto; }
@media screen and (max-width:767px){
  .tpspacing { margin: 5vw auto; }
}


/*移除公版設定*/
.Area .remove_box_style ul {background-color: transparent;grid-gap: 10px;}
.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%; }
  .Area .remove_box_style ul { padding: 0; }
}

/*輪播公版移除公版樣式設定*/
/*PD_layout 區塊加上swiper_remove_box_style標籤
css貼上以下語法*/

/*輪播移除公版設定*/
.Area .swiper_remove_box_style ul { background-color: transparent; grid-gap: 0;}
.Area .swiper_remove_box_style ul li { border: none!important; background-color:transparent;}
.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 {}
}


/*提醒我按鈕*/
a.mo_remind_btn {z-index:9999;position: absolute!important;right: 0px;top: 57vw;width: 15%;opacity: .8;}
.momologo { left: -50px; }

/*背景*/
.bgbottom { z-index: -10;position: fixed; top: 750px; left: 50%; transform: translateX(-50%); width: 2000px;aspect-ratio: 2000/680;background: url(Area_bottom.jpg?t=1784022932640) center top / 100% no-repeat; }

/*版頭*/
  .Area_top{position: relative;height: 600px;margin:0 auto;box-sizing:border-box;padding: 0 0 0;}
  /*大標*/ 
  .Area_top .title01 {width: 80%;position:absolute;top: 0px;left: 120px;height: auto;z-index: 35; /*pointer-events: none;*/ }
  .Area_top .title01 ul {grid-gap:0; padding: 0; }
  .Area_top .title01 img {width: 100%;}
    /*副標輪播*/
    .Area_top .title02{z-index: 11;position:absolute;top: 190px;left: 152px;width: 600px;height: 100px;overflow: hidden;}
    .Area_top .title02 .PD_layout ul { display: flex; width: 100%;height: 100px; padding: 0; } 
    .Area_top .title02 .PD_layout .PD h3 { color: #fff; text-align: left; font-size: 4.5em; font-weight: 800; font-family: "Arial" ,"Noto Sans CJK TC"; line-height: 1; } 
    .Area_top .title02 .PD_layout ul.swiper-wrapper .PD_slide.swiper-slide { margin-right: 0!important; } 
@media screen and (max-width:767px){
  .Area_top {width:100%;position: relative;height: 74vw;padding:0;}
  /*date*/
  .Area_top .date{width: 35%;position: absolute;top: 20vw;left: 32vw;z-index: 1;}
  /*大標*/ 
  .Area_top .title01 {width: 106%;position:absolute;top: -3vw;left: 1vw;height: auto;z-index: 11;}
  .Area_top .title01 ul{grid-gap:0;}
  .Area_top .title01 img {width: 100%; aspect-ratio: 960 / 190; }
  .Area_top .title01  ul li .PD .PD_img{display: block!important;}
    /*副標輪播*/
    .Area_top .title02 .PD_layout ul { height: 15vw; } 
    .Area_top .title02 { z-index: 10;position: absolute;width: 70%;height: 15vw;margin: 0 auto;top: 19vw;left: 4vw; }
    .Area_top .title02 .PD_layout .PD h3 {font-size: 2.15em; font-family: "Arial" ,"Noto Sans CJK TC"; font-weight: 800; letter-spacing: -0.035em; } 
  }


/*---版頭品輪播---*/
    .top_pd p {  }
    .top_pd {position: absolute;top: 85px;right: 90px;width: 1000px;height: 600px;overflow: hidden;z-index: 12;}
    .top_pd .ly {width: 100%;height: 100%;}
    .top_pd .ly ul{width: 100%;height: 550px;padding: 0; grid-gap: 0;}
    /*圖片*/	
    .top_pd .ly  ul li .PD_img{position: absolute;padding: 0;top: 0px;right: 0px;width: 50%;}
    /*文字*/	
    .top_pd .ly ul li .PD_into {position: absolute;top: 285px;left: 55px;padding: 0;width: 45%;text-align: left;}
    .top_pd .ly ul li .PD_into::after {z-index: -5;position: absolute;top: -35px;left: 0px;content: "";width: 100%;background: url(PD_txt_bg.png?t=1784022932641) no-repeat center top;aspect-ratio: 420/230;background-size: 100%; }
    .top_pd .ly ul li .PD_into h3{color: #ffffff;width: 100%;position: relative;left: 0;top: 0px;padding: 0;margin: 0;font-size: 1.8em;background-color: transparent; text-align: center; }
    .top_pd .ly ul li .PD_into h4{color: #ffffff;position: relative;width: 100%;top: 0;left: 0;font-size: 1.6em;line-height: 1.8;text-align: center;}
    .top_pd .ly ul li .PD_into p{color: #f92e4b;width: 96%;font-size: 1.2em;position: relative;top: 5px;left: 0;text-align: center;overflow: visible;}
    .top_pd .ly ul li .PD_into p del{color: #bfbfbf;font-size: 1.3em;}
    .top_pd .ly ul li .PD_into p .Price,.top_pd  .ly .PD_layout .PD p b,.top_pd  .ly .PD_layout .PD p .money{ color: #f92e4b; font-weight: 900; font-size: 2.5em; }	  
@media screen and (max-width:767px){
    .top_pd{ width: 100%; height: 58vw; top: 12.5vw;right: 0vw; overflow: hidden;}
    .top_pd .ly{padding: 0;}
    .top_pd .ly ul{width: 100%;padding: 0;display: flex;grid-gap: 0; height: initial; }
    /*圖片*/	
    .top_pd .ly ul li { height: 50vw; }
    .top_pd .ly ul li .PD_img {width: 44%;top: 0vw;right: 0vw;}
    /*文字*/	
    .top_pd .ly ul li .PD_into { top: 26vw;left: 2vw; width: 50%; }
    .top_pd .ly ul li .PD_into::after { top: -1vw;left: 0vw;width: 107%; }
    .top_pd .ly ul li .PD_into h3{ font-size: 1.15em;  }
    .top_pd .ly ul li .PD_into h4{ font-size: 0.95em;}
    .top_pd .ly ul li .PD_into p{ font-size: 0.9em; }
    .top_pd .ly ul li .PD_into p del{ font-size: 0.95em;}
    }

/*活動倒數*/
.TimerNick {position: absolute;top: 280px;left: 160px;display: inline-block;z-index:8;text-align: center;letter-spacing: 0.2em; font-family: "Noto Sans CJK TC", "Arial"; }
.TimerNick .FontStyle {display: inline-block;margin: 0 0 0 5px;padding: 0;border: 0;font-size: 30px;color: #fff;font-weight: normal;letter-spacing:1px;text-align: center;}
.TimerNick span {padding-left: 2px;font-size: 32px;letter-spacing: 0.1em;color: #fff;}
.TimerNick b { font-weight: normal;}
@media screen and (max-width:767px){
  .TimerNick  {width:100%;top: 30.5vw;left: 5.3vw;display: flex; align-items: end; letter-spacing: 0;column-gap: 0.3em;text-align: left;}
  .TimerNick .FontStyle {margin: 0;padding: 0;border: 0;font-size: 1.05em;letter-spacing: 0.05em;}
  .TimerNick span {padding-left: 0;font-size: 1em;letter-spacing: -0.05em;margin-left: 0.1em;margin-right: 0.3em;}
  .TimerNick span:first-child{ margin-top: -0.1em; }
}    

/*隱藏區塊*/
.ts_close { display: none; }


/*第一區*/
.Area01 .Area_title { margin-bottom: 0px; }

/*背景調整*/
.Areabg02 .Area_pd-grid-4x2--bg { background-color: #afafaf!important; }

/*品類區*/
.Area02 ul { gap: 10px; }
@media screen and (max-width:767px){
  .Area02 ul { gap: 2vw!important; }
}

/*旗艦館*/
.Area03 { height: 520px; margin: 5% auto 0; }
.Area03::after {content:"";z-index: -9;position: absolute;top: -100px;left: 50%;transform: translateX(-50%);width: 2000px;height: calc(100% - -220px);background: #0b0b0d repeat-y center top;aspect-ratio: 2000/1000;background-size: 100%;}
.Area03 .Area_bn-grid-1x1--bg { width: 110%; top: -90px; }
.Area03 .Area_content { width: 80%; margin: 0 auto; }
@media screen and (max-width:767px){
  .Area03 { height: 43vw; margin: 5% auto 0; }
  .Area03 .Area_bn-grid-1x1--bg { width: 80%; top: -5vw; }
  .Area03 .Area_content { width: 80%; margin: 0 auto; }
}