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

#slider1{display:block;}
#slider2{display:none;}


/*jSliderAnimation*/
.jSlider.pc >div a{display: block; position: absolute; bottom: 30px;  background: linear-gradient(to right, rgba(249,173,160,0) 0%,rgba(249,173,160,0) 9%,rgba(249,173,160,1) 100%); padding: 0 0 0 40px;}
.jSlider.pc >div a img{ width:490px; max-width:100%; }
.jSlider.pc >div a:hover{ background: linear-gradient(to right, rgba(249,173,160,0) 0%,rgba(249,176,163,0) 9%,rgba(247,204,197,1) 100%); }
.jSlider.mob >div a{display: block; position: absolute; bottom: 20px;  background: linear-gradient(to right, rgba(249,173,160,0) 0%,rgba(249,173,160,0) 9%,rgba(249,173,160,1) 100%); padding: 0 0 0 40px; width: 58%;}
.jSlider.mob >div a:hover{ background: linear-gradient(to right, rgba(249,173,160,0) 0%,rgba(249,176,163,0) 9%,rgba(247,204,197,1) 100%); }
.jSlider.pc >div a.fade-left, .jSlider.mob >div a.mob-fade-left{opacity: 0; /* 預設隱藏 */}
.fade-left.active , .mob-fade-left.active { animation: fadeLeft 1.8s ease forwards; }
@keyframes fadeLeft{
    0% { opacity: 0; right:-700px; }
  100% { opacity: 1; right:0px; }
}


@media (max-width: 767px) {
#slider1{display:none;}
	#slider2{display:block;}
	
}