@charset "utf-8";

/* 版頭區 */
.Area_title_top { height: 1100px; }
.Area_hero--title { width: 80% !important ; top: 70px !important ; left: 97px !important ; }
.Area_title_top .date { width: 22% ; top: 400px ; left: 20px ; z-index: 5 ; }
.Area_title_top .deco01 { position: absolute ; top: 290px ; left: 790px ; width: 11% ; z-index: 4 ;  }
.Area_hero--PD { top: 480px ; z-index: 10; width: 90% ; left: 20px ; }
@media screen and (max-width: 767px){
.Area_title_top { height: 116vw ; margin-bottom: 0 ; }
.Area_hero--title { width: 80% !important ; top: 7vw !important ; left: 11vw !important ; }
.Area_title_top .deco01 { position: absolute ; top: 29vw ; left: 82vw ; width: 11% ; z-index: 4 ;  }
.Area_title_top .date { width: 23% ; top: 41vw ; left: 1vw ;  }
.Area_hero--PD { top: 50vw ; }
}

/* 副標 */
.Area_title_top .subtitle ul li { background-color: transparent ; }
.Area_title_top .subtitle { position: absolute ; top: 340px ; left: 0 ; z-index: 1 ; width: 100% ; }
.Area_title_top .subtitle .PD h3 { color: #fff ; font-size: 52px ; font-family: source-han-sans-cjk-tc, sans-serif; font-weight: 600 ; transform: rotate(2deg) ; }
.Area_title_top .subtitle .PD h3 span { font-weight: 600 ;  }
@media screen and (max-width:767px){
  .Area_title_top .subtitle { position: absolute ; top: 34vw ; left: 1vw ; z-index: 10 ; width: 100%;}
  .Area_title_top .subtitle .PD h3 { color: #fff ; font-size: 6vw; font-family: source-han-sans-cjk-tc, sans-serif; font-weight: 600; transform: rotate(2deg) ; }
}


/** 倒數 **/
.TimerNick { z-index:0; display:inline-block; padding-right:14px; height:46px ;text-align:right;}
.TimerNick .FontStyle { display:inline-block; margin:0px 0 0 0 ; padding:0; border:0px; width:40px; font: 400 35px/38px Century Gothic; color:#d93125 ; /*text-shadow:1px 1px 0px #fff;*/ letter-spacing:-1px; text-align:right; background:transparent; }
.TimerNick div:nth-of-type(2),
.TimerNick div:nth-of-type(3) { width:60px;}
.TimerNick span { padding-left:2px; font: bold 22px/38px "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #232323 ; }
    @media screen and (max-width:767px){
        .TimerNick { z-index:2; position: relative ; top: 0vw ; left: 0 ; display:inline-block; margin:0; padding-right:0%; margin-top: -2vw ; }
        .TimerNick .FontStyle { display:inline-block; margin:0px 0 0 0 ; padding:0; border:0px; width:20px ; font: 400 5.5vw/11vw Century Gothic; color:#d93125 ; /*text-shadow:1px 1px 0px #fff;*/ letter-spacing:-1px; text-align:right; background:transparent;}
        .TimerNick div:nth-of-type(2),
        .TimerNick div:nth-of-type(3) { width:9vw;}
        .TimerNick span { padding-left:1vw; font: bold 4vw/11vw "微軟正黑體","Microsoft JhengHei", Arial, Helvetica; letter-spacing: -0.05em;color: #232323 ;}
    }

    

/* logo */
.Area_logo .layout_logo { width: 90% ; margin-bottom: 30px ; }
.Area_logo .layout_logo ul { background-color: transparent ; grid-gap: .5em ; }
.Area_logo .layout_logo ul li { background-image: url( logo_bg.png?t=1786699616687 ); background-size: 100%;  background-repeat: no-repeat ;    background-position: center top; background-color: transparent; border: none ; }
.Area_logo .layout_logo ul li .PD_img { margin-top: -2px !important; padding: 0 ; }
.Area_logo .layout_logo ul li .PD_img img { width: 237px; padding: 0 ; }
@media screen and (max-width:767px){
    .Area_logo .layout_logo { width: 90% ; margin-bottom: 4vw; }
    .Area_logo .layout_logo ul { background-color: transparent ; grid-gap: .2em ; }
    .Area_logo .layout_logo ul li { background-image: url( logo_bg.png?t=1786699616687 ); background-size: 100%;  background-repeat: no-repeat ;    background-position: center top; background-color: transparent; border: none ;  }
    .Area_logo .layout_logo ul li .PD_into { padding: 0 ; }
    .Area_logo .layout_logo ul li .PD_img { margin-top: 0 ; padding: 0 ; }
    .Area_logo .layout_logo ul li .PD_img img { width: 30vw ; padding: 0 ; }
}


/* 作圖區 */
.layout_item ul li { padding-bottom: 90px !important ; }
.layout_item .PD_into { text-align: left; padding-left: 30px; }
.layout_item .PD { padding-top: 20px ; }
.layout_item .PD h3 { color: #000 ; font-size: 45px !important ; font-weight: 600 ;  }
.layout_item .PD h4 { color: #0077e5 ; font-size: 48px !important ; margin-top: -22px ; font-weight: 800 ; }
.layout_item .PD p { height: 3em ; line-height: 3em ; }
.layout_item .PD p del { font-size: 27px ; }
.layout_item .PD p .money { font-size: 27px ; color: #e13123 ; }
.layout_item .PD p .Price { font-size: 55px !important ; color: #e13123 ; }
.layout_item .PD img { width: 85% ; }
@media screen and (max-width:767px){
    .layout_item { width: 90% ; }
    .layout_item ul li { margin-bottom: 3vw ; padding-bottom: 5vw !important ; }
    .layout_item .PD_into { text-align: left; padding-left: 1vw ; }
    .layout_item .PD { padding-top: 2vw ; }
    .layout_item .PD h3 { color: #000 ; font-size: 5vw !important ; font-weight: 600 ;  }
    .layout_item .PD h4 { color: #0077e5 ; font-size: 5.5vw !important ; margin-top: -2vw ; font-weight: 800 ; margin-bottom: 0 ; }
    .layout_item .PD p { height: 3em ; line-height: 3em ; }
    .layout_item .PD p del { font-size: 4vw ; }
    .layout_item .PD p .money { font-size: 4vw ; }
    .layout_item .PD p .Price { font-size: 8vw !important ; }
}


/* 頁籤公版1 */
@media screen and (min-width:768px){ 
    .Area_buy .box_buy { padding-bottom: 20px ; background-size: 100% ; background-repeat: repeat-y;  background-image: url(blue_bg.jpg?t=1786699616687); margin-bottom: 120px ;}
    .Area_buy .layout_text ul { padding: 0 !important ; grid-gap: 0 !important ; }
  }
  @media screen and (max-width:767px){
    .Area_buy { width: 100% ; margin: auto ; }
    .Area_buy .box_buy { padding-bottom: 4vw ; padding-top: 2vw ; background-size: 100% ; background-repeat: repeat-y;background-image: url(blue_bg.jpg?t=1786699616687); margin-bottom: 10vw ; }
    .Area_buy .layout_text ul{ padding: 0 !important ; grid-gap: 0 !important ;}
  }
  
  
  /* 頁籤公版all */
  .Area_page h3 { color: #fff; margin: 0; padding: 0}
    @media screen and (min-width:768px){ 
      .Area_page { overflow: hidden; border-radius: 1em ; width: 100% ; margin: auto ;  } 
      .Area_page h3 { color: #fff; margin: 0 auto 20px; padding: 0}
      .Area_page .PD_layout { width: 96%}
    }
    @media screen and (max-width:767px){
      .Area_page { width: 96% ; overflow: hidden; padding: 0 ; border-radius: 1em ; margin: auto ; } 
      .Area_page h3 { color: #fff; margin: 0 auto 2vw; padding: 0}
      .Area_page .NavArea .Nav a { padding: 0 ; }
    }


/* 區標 */
@media screen and (min-width: 768px) {
  .layout_text01 { height: 130px ;  width: 90% ; 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% ;}
}
@media screen and (max-width:767px){
  .layout_text01 { height: 14.5vw ; }
  .layout_text01 .PD h3 span{ color: #fff ; font-size: 5vw ; }
  .layout_text01 .PD_layout.PD_layout-D3_01 .PD .PD_img { padding: 0 ; }
}



 /* --------------------------------------
     * 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; }
      /*頁籤高亮顏色設定 */  
     .NavArea_tabbar_page .Nav .swiper-slide-active a { color:#fff;}
     .NavArea_tabbar_page .Nav .swiper-slide-active i {display:block;border: 1px solid #3d84e8 !important;background-color: #3d84e8 !important; }
      /*推編輯按鈕 */  
     .NavArea_tabbar_page .Nav input { position: fixed; left: 30%}
       @media screen and (min-width:768px){ 
         .NavArea_tabbar_page { display: block; }
       }


/* 微調 */
.layout_text { margin-top: -40px ; }
.layout_text2 { margin-bottom: 20px ; }
.btn_bottom { margin-bottom: 80px ; margin-top: -20px ; }
@media screen and (max-width:767px){
.layout_text { margin-top: -6vw ; }
.layout_text2 { margin-bottom: 2vw ; }
.btn_bottom { margin-bottom: 7vw ; }
}


/*飄-上下*/
.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); }
}



/*心跳A*/
.heartbeat-play {-webkit-animation-duration: 1s;  animation-duration: 1s;  -webkit-animation-name: heartbeat-play;  animation-name: heartbeat-play;  -webkit-animation-iteration-count: infinite;    animation-iteration-count:infinite;/* -webkit-animation-direction: alternate;animation-direction: alternate;*/}
	@-webkit-keyframes heartbeat-play {   
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);} 
		}
	@keyframes heartbeat-play { 
		0%   { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);} 
		40%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);} 
		60%  { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);} 
		80%  { -webkit-transform: scale(0.95); transform: scale(0.95); filter:brightness(100%);}
		100% { -webkit-transform: scale(1); transform: scale(1); filter:brightness(100%);} 
	}