@charset "utf-8";
/*基本*/




.WRAPPER { background-color: #383838;}

.Area_hero .PD_layout li .PD_img img {border-radius:0 ;}

.Area_hero-visual_003 .Area_hero { overflow: inherit; }
.Area_pd-carousel2 ul { z-index:12 ; }
/*日期*/
.TIMER_DAY {display:flex; justify-content: center; flex-wrap:wrap; position: absolute; top:129px; left: 42px; width:15%; height: 70px;   
  padding: 0 ; font-size:57px; font-weight: bold; font-family: "Century Gothic"; z-index: 3;  transform: rotate(-15deg) scale(0.75);
   box-sizing: border-box;color: #000;/* background: url(datebg.png?t=1791861338137)no-repeat center / 88% ;*/} 
.TIMER_DAY small {font-size: 40px; font-weight: 100; position: relative;}
.TIMER_DAY #sendMonth { display: inline-block; text-align: right; letter-spacing: -2px;font-style: italic;} 
.TIMER_DAY #sendToday { display: inline-block; text-align: left;  letter-spacing: -2px;font-style: italic;}
.TIMER_DAY .sendtxt { font-size: 0.7em; font-weight: 700; margin:-109px 0 0 201px; text-align: left; width: 100%;font-style: italic;}
.TIMER_DAY .box{ width: 100%; display: flex; justify-content: center; align-items: center;height: 67px; }
@media screen and (max-width: 736px){ 
.TIMER_DAY { position: absolute;width: 20%;top: 11vw;left: 2vw;font-size: 6vw;letter-spacing: 0; padding: 0 ; text-align: left;margin: 0;font-weight: 900; height:19vw;  transform: rotate(-15deg) scale(0.7);}
.TIMER_DAY small {font-size: 4vw;}    
.TIMER_DAY #sendMonth {display: inline-block; font-size: 1.2em;font-style: italic; }
.TIMER_DAY #sendToday {display: inline-block; font-size: 1.2em;font-style: italic; }
.TIMER_DAY .sendtxt {font-weight: 700;font-size: 0.8em;  margin:-13vw 0 0 35vw;font-style: italic;}	
.TIMER_DAY .box{ height: 8vw; }
}


/*mb ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (max-width:767px){


.Area .warningTxt h3 {font-size: 1em ;}
.PD_layout.PD_layout-D3_02 ul li .PD h3 {font-size: 7vw ;}


.Area--bg { --top: 0vw ; margin:0 auto ; width:100%; border-radius:0vw ; }

.Area_hero--dog {position: absolute;z-index:10; top: 33vw ;left: 2vw; ; width:26%; border-radius:0vw ; }

.Area_hero--cat {position: absolute;z-index:10; top: 39vw ;left: 80vw; ; width:26%; border-radius:0vw ; }

.Area_hero--stylus {position: absolute;z-index:10; top: 28vw ;left: 68vw; ; width:20%; border-radius:0vw ; }

}

/*pc ------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@media screen and (min-width: 768px) {

  .Area_hero .PD img {width:100%;} 

   /* ===== 限定標(輪播) ===== */
  .Area_hero-visual_003 .Area_hero--tag {width: 153px!important;left:46px!important ;}

  .Area--bg { --top: 0px;width:960px;border-radius:0px; }

  .Area_hero--dog {position: absolute;z-index:10; top: 330px ;left: 40px ; width:230px; border-radius:0 ; }

  .Area_hero--cat {position: absolute;z-index:10; top: 352px ;left: 706px ; width:273px; border-radius:0 ; }

  .Area_hero--stylus {position: absolute;z-index:9; top: 248px ;left: 638px ; width:194px; border-radius:0 ; }
  
}


/*作圖區客製設定*/
.Area_drawing-area-2x1 .PD_layout[data-pd-h3="5"] .PD h3 span {  color: #000000;background-color: #dfdfdf; }
.Area_drawing-area-2x1 .PD_layout .PD:hover h4 { color: #fff ;}
.Area_drawing-area-2x1 .PD_layout a {  color: #ffffff; }
.Area_drawing-area-2x1 .PD_layout .PD p { color: #fff;}
.Area_drawing-area-2x1 .PD_layout .PD p del { color: #575757;}


/* 下方公版 */
@media screen and (min-width:768px){
  .layout_text01 { height: 106px ;  width: 800px ; margin: auto ;  }
  .layout_text01 .PD h3 span{ color: #012a63 ; margin-top: 20px ; font-size: 43px; }
  .layout_text01 .PD_layout ul { padding: 0 ; }
  .layout_text01 .PD_layout.PD_layout-D3_01 .PD img{ width: 100% ;} 

  .Area_below .layout_below { padding-bottom: 50px ; }
}
 @media screen and (max-width:767px){
  .layout_text01 { height: 13vw ; }
  .layout_text01 .PD h3 span{ color: #012a63 ; font-size: 24px ; font-family: "Microsoft JhengHei", sans-serif; margin-top: 2.5vw ; }
  .layout_text01 .PD_layout.PD_layout-D3_01 .PD .PD_img { padding: 0 ; }

  .Area_below .layout_below { padding-bottom: 5vw ; width: 96% ; margin: auto ; }
}




/*Phone錨點*/
.Area_floorPD_NavArea_tabbar {
  margin: 0 auto 5vw ;
  width: 94%;
}
.Area_floorPD_NavArea_tabbar.cate-fixed {
  width: 100%;
}
.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;
}
.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);
}





/*動畫----------------------------------------------------------------------------------------------------------------------------------------------------------*/


/*跳跳跳*/
.uptodown {-webkit-animation-duration: 1.5s;  animation-duration: 1.5s;  -webkit-animation-name: uptodown;  animation-name: uptodown;  -webkit-animation-iteration-count: infinite; /*animation-iteration-count:infinite;*/ -webkit-animation-direction: alternate;animation-direction: alternate;}
@-webkit-keyframes uptodown { 

 0%    { transform: translate(0,0px) ;}
 10%    { transform: translate(0,0px) ;}
 15%    { transform: translate(0,-10px) ;}
 20%    { transform: translate(0,0px) ;}
 100%  { transform: translate(0,0px) ;}
	
}

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

.uptodown-play2 { -webkit-animation:uptodown-play 1.8s ease-in-out infinite alternate;
  animation:uptodown-play 1.8s ease-in-out infinite alternate;}
@-webkit-keyframes uptodown-play { 
0%   { -webkit-transform: translate(0,10px); } 
100% { -webkit-transform: translate(0,0);}
}
@keyframes uptodown-play { 
0%   { transform: translate(0,-10px);} 
100% { transform: translate(0,0);}
}

/*飄-左右*/
.rf-play { -webkit-animation:rf-play 1.8s ease-in-out infinite alternate;
  animation:rf-play 1.8s ease-in-out infinite alternate;}
@-webkit-keyframes rf-play { 
0%   { -webkit-transform: translate(-30px,15px); } 
100% { -webkit-transform: translate(0,0);}
}
@keyframes rf-play { 
0%   { transform: translate(-30px,15px);} 
100% { transform: translate(0,0);}
}

/*順時鐘轉轉*/
.rotate-play1 { -webkit-animation:rotate3-play 80s linear infinite ;
  animation:rotate3-play 80s linear infinite ;}
@keyframes rotate3-play {
100% { 
transform: rotate(360deg);
}
}

.rotate-play2 { -webkit-animation:rotate3-play 20s linear infinite ;
  animation:rotate3-play 20s linear infinite ;}
@keyframes rotate3-play {
100% { 
transform: rotate(-360deg);
}
}

.rotate-play3 { -webkit-animation:rotate3-play 10s linear infinite ;
  animation:rotate3-play 10s linear infinite ;}
@keyframes rotate3-play {
100% { 
transform: rotate(360deg);
}
}

/*逆時鐘轉轉*/
.rotate-playa { -webkit-animation:rotate-playa 80s linear infinite ;
  animation:rotate-playa 80s linear infinite ;}
@keyframes rotate-playa {
100% { 
transform: rotate(-360deg);
}
}

.rotate-playb { -webkit-animation:rotate-playb 50s linear infinite ;
  animation:rotate-playb 50s linear infinite ;}
@keyframes rotate-playb {
100% { 
transform: rotate(-360deg);
}
}

.rotate-playc { -webkit-animation:rotate-playc 25s linear infinite ;
  animation:rotate-playc 25s linear infinite ;}
@keyframes rotate-playc {
100% { 
transform: rotate(-360deg);
}
}