@charset "utf-8";

/* 版頭區 */
.deco01 { position: absolute ; top: 350px ; left: 120px ; }
.deco02 { position: absolute ; top: 350px ; left: 990px ; }
@media screen and (max-width: 767px){
.deco01 { position: absolute ; width: 15% ; top: 40vw ; left: 0 ; margin-left: -6vw ; }
.deco02 { position: absolute ; width: 17% ; top: 42vw ; left: 90vw ; }
}


/* 微調 */
.layout_item { width: 800px ; }
.layout_item ul li p { overflow: visible !important ; }
.layout_item ul li .PD .PD_img { padding: 0px 22px 63px !important  ; }
.layout_banner { padding: 40px 0 ; }
.layout_guan ul { grid-gap: 1.5em !important ; }
@media screen and (max-width:767px){
  .layout_item { width: 100% ; }
  .layout_item ul li .PD .PD_img { padding: 0 3vw 5vw !important ; }
  .layout_banner { padding: 8vw 0 ; }
  .layout_guan ul { grid-gap: .5em !important ; }
}



/*閃光*/				  
.brightness-play { -webkit-animation:brightness-play 3s infinite ;
  animation:brightness-play 3s infinite ;}
@-webkit-keyframes brightness-play {
0% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
92% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
94% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(120%); 
filter:brightness(200%);
}
96% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
98% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(120%); 
filter:brightness(120%);
}
100% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/1500/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
}
@keyframes brightness-play {
0% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
92% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
94% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(120%); 
filter:brightness(120%);
}
96% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
98% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="2" /><feFuncG type="linear" slope="2" /><feFuncB type="linear" slope="2" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(120%); 
filter:brightness(120%);
}
100% { 
filter:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg"><filter id="filter"><feComponentTransfer color-interpolation-filters="sRGB"><feFuncR type="linear" slope="1" /><feFuncG type="linear" slope="1" /><feFuncB type="linear" slope="1" /></feComponentTransfer></filter></svg>#filter'); 
-webkit-filter:brightness(100%); 
filter:brightness(100%);
}
}



/*閃光*/
.lightSweep { position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0); overflow: hidden; z-index: 9; pointer-events: none;
  -webkit-filter: brightness(2.5);
  -webkit-mask-size: 300% 200%;
  -webkit-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  -webkit-transition: -webkit-mask-position;
  -webkit-animation-timing-function: linear;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-filter: brightness(2.5);
  -moz-mask-size: 300% 200%;
  -moz-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  -moz-transition: -webkit-mask-position;
  -moz-animation-timing-function: linear;
  -moz-transform: translate3d(0, 0, 0);
  -o-filter: brightness(2.5);
  -o-mask-size: 300% 200%;
  -o-mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  -o-transition: -webkit-mask-position;
  -o-animation-timing-function: linear;
  -o-transform: translate3d(0, 0, 0);
  filter: brightness(2.5);
  mask-size: 300% 200%;
  mask-image: -webkit-linear-gradient( -45deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
  transition: -webkit-mask-position;
  animation-timing-function: linear;
  transform: translate3d(0, 0, 0);
  transition-duration: 3s;
  animation: move 3.0s ease-out infinite;
}

@keyframes move {
  from {
    -webkit-mask-position: 150% 0px;
    -moz-mask-position: 150% 0px;
    -o-mask-position: 150% 0px;
    mask-position: 150% 0px;
  }
  to {
    -webkit-mask-position: 0% 0px;
    -moz-mask-position: 0% 0px;
    -o-mask-position: 0% 0px;
    mask-position: 0% 0px;
  }
}




.ribbon-left {
  animation: ribbonLeft 1.5s ease-in-out infinite;
}

.ribbon-right {
  animation: ribbonRight 1.5s ease-in-out infinite;
}

@keyframes ribbonLeft {
  0% {
      transform: translate(0, 0);
  }
  50% {
      transform: translate(-8px, -12px);
  }
  100% {
      transform: translate(0, 0);
  }
}

@keyframes ribbonRight {
  0% {
      transform: translate(0, 0);
  }
  50% {
      transform: translate(8px, -12px);
  }
  100% {
      transform: translate(0, 0);
  }
}