@charset "big5";
body{
	margin: 0;
	padding: 0;
	background-color: #ac2731;
}


.container {
	width: 1200px;
	height: auto;
	float: left;
}

.banner{
	height:570px;
}

.gift_video {
	width: 1200px;
	height: 200px;
	background: url(../images/gift.gif) 0 0 no-repeat;
	position: absolute;
	top: 440px;
	left: 10px;
	display: block;
}

.video_btn {
	width: 162px;
	height: 158px;
	background: url(http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202101new-year/images/51.png) 0 0 no-repeat;
	position: absolute;
	top: 70px;
	left: 780px;
	display: block;
	animation-name: rotate1;
	-webkit-animation-name: rotate1;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.product_img{
	transition: transform 0.5s ease-out;
	border-radius: 10px;
}
.product_img:hover{
	transform: scale(0.9,0.9)
}

.product_img2{
	transition: transform 0.5s ease-out;
}
.product_img2:hover{
	transform: scale(0.9,0.9)
}


@keyframes rotate1 {
	0% {
		transform: rotate(0deg) scale(0);
	}

	25% {
		transform: rotate(0deg) scale(0);
		filter: brightness(115%);
	}

	30% {
		transform: rotate(0deg) scale(0);
	}

	50% {
		transform: rotate(0deg) scale(0);

	}
    70% {
		transform: rotate(0deg) scale(1);

	}
	100% {
		transform: rotate(0deg)scale(1);
		filter: brightness(115%);
	}
}

@-webkit-keyframes rotate1 {
	0% {
		transform: rotate(0deg) scale(0);
	}

	25% {
		transform: rotate(0deg) scale(0);
		filter: brightness(115%);
	}

	30% {
		transform: rotate(0deg) scale(0);
	}

	50% {
		transform: rotate(0deg) scale(0);
	}
	
	70% {
		transform: rotate(0deg) scale(1);

	}

	100% {
		transform: rotate(0deg)scale(1);
		filter: brightness(115%);
	}
}

@keyframes r3 {
	50% {transform: rotate(10deg) scale(1);filter:brightness(120%);}
	100% {transform: rotate(-5deg)scale(1);} }

@-webkit-keyframes r3 {
	50% {transform: rotate(10deg) scale(1);filter:brightness(120%);}
	100% {transform: rotate(-5deg)scale(1);} }




.video_btn:hover {
	background: url(http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202101new-year/images/51.png) 0 0 no-repeat;
	transform: translateY(0.2em);
}

.video_btn2 {
	width: 154px;
	height: 156px;
	background: url(http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202101new-year/images/52.png) 0 0 no-repeat;
	position: absolute;
	top: 90px;
	left: 920px;
	display: block;
	animation-name: rotate1;
	-webkit-animation-name: rotate1;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.video_btn2:hover {
	background: url(http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202101new-year/images/52.png) 0 0 no-repeat;
	transform: translateY(0.2em);
}


/*浮動效果*/
@keyframes floating {
	0% {
		transform: translateY(0%);
	}

	50% {
		transform: translateY(8%);
	}

	100% {
		transform: translateY(0%);
	}
}

@-webkit-keyframes floating {
	0% {
		-webkit-transform: translateY(0%);
	}

	50% {
		-webkit-transform: translateY(8%);
	}

	100% {
		-webkit-transform: translateY(0%);
	}
}

a .video_main {
	width: 762px;
	height: 615px;
	background: url(http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202101new-year/images/new-web.png) 0 0 no-repeat;
	position: absolute;
	top: -5px;
	left: 10px;
	display: block;
	animation-name: floating;
	-webkit-animation-name: floating1;
	animation-duration: 1.5s;
	-webkit-animation-duration: 1.5s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}


/*PC左側黏人精+goTop+回版頭*/
.fixarea_l { z-index:99; position:fixed; left:0px; top:80px; width:165px; text-align: center; font-family:"微軟正黑體", "Microsoft JhengHei", Arial;
			-webkit-transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); transform: rotate3d(0,0,0,0deg) translate3d(150px,0,0); -webkit-transform-origin:top right; transform-origin:top right;
			  -webkit-transition: all 0.2s ease;
				 -moz-transition: all 0.2s ease;
				  -ms-transition: all 0.2s ease;
				   -o-transition: all 0.2s ease;
					  transition: all 0.2s ease;}
.fixarea_l_off { -webkit-transform: rotate3d(0,0,0,0deg) translate3d(0,0,0); transform: rotate3d(0,0,0,0deg) translate3d(0,0,0);}
.fixarea_l .title { position:relative;background-color: #444;width: 70%;color: #FFF;margin: 0 auto;}
.fixarea_l .title img {}
.fixarea_l .footer {width: 108px;height:20px;background: #FFF;border-radius: 0 0 20px 20px;margin: 0 auto;}
.fixarea_l .fixbox_head{position: relative;}
.fixarea_l .fixbox_head::after{content: "好康快訊";position: absolute;bottom:6px;left:50px;font-weight:900;color:#fff;}
.fixarea_l .fixbox_body{position: relative;}
.fixarea_l .fixbox_body::after{content: "精選會場";position: absolute;bottom:6px;left:50px;font-weight:900;color:#fff;}
.fixarea_l .title .icon{position:relative;top:-35px;margin-bottom: -40px;}
.fixarea_l .fix_box { margin:0 auto; }
.fixarea_l ul.fix { margin:0px auto 0;width: 108px; padding:5px 0 5px; list-style:none;overflow: hidden;background: #FFF;border-radius: 0;}
.fixarea_l ul.fix li { position:relative; width: 75%; height:auto;margin:0 0 0 10%; padding:2px 0 0; font-size:15px; line-height:25px;/*border-bottom: 1px solid #ff457e;*/}
.fixarea_l ul.fix li::after {content: "";width: 90px;height: 1px;background: #89b0ff;position: absolute;left: 0px;bottom:-1px; }
.fixarea_l a { display:block; text-decoration:none; color:#222;}
.fixarea_l a:hover{ color:#D30048}
.fixarea_l ul.fix li:nth-child(4) a{line-height: auto; }
.fixarea_l ul.fix li:last-child::after{display: none;}
.fixarea_l .fix_main { }
.fixarea_l .fix_main li { padding:12px 0 8px;  height:40px;}
/*.fixarea_l .fix_main li::before { content: ""; display: block; position: absolute; bottom:0; left:18%; width:64%; height:1px; background-color:#5b0000; background-color:rgba(255,255,255,0.2);}*/
.fixarea_l .fix_other { }
.fixarea_l .fix_other li { padding:5px 0; }
/*.fixarea_l .fix_other li:before { content: ""; display: block; position: absolute; bottom:0; left:18%; width:64%; height:1px; background-color:#5b0000; background-color:rgba(255,255,255,0.2);}
.fixarea_l .fix_other li:last-child::before { display:none;}*/
.fixarea_l  .btn_on a { color:#F8DAA5; }
.fixarea_l .go_bt {
  -webkit-transition: all 0.2s ease;
     -moz-transition: all 0.2s ease;
      -ms-transition: all 0.2s ease;
       -o-transition: all 0.2s ease;
          transition: all 0.2s ease;}
.fixarea_l .go_bt:hover { filter: brightness(105%);}

.fixarea_l ul.fix2 { margin:0px auto 0;width: 108px; padding:5px 0 30px; list-style:none;overflow: hidden;background: #363636;border-radius: 0 0 50px 50px;overflow: hidden;}
.fixarea_l ul.fix2::after {content: "";clear:both}
.fixarea_l ul.fix2 li { position:relative;float: left; width: 30%; height:34px;margin:0 0 0 13%; padding:0; font-size:15px; line-height:34px;/*border-bottom: 1px solid #ff457e;*/}
.fixarea_l ul.fix2 li:nth-child(odd)::after {content: "";width: 1px;height: 34px;background: rgba(255,255,255,0.2);position: absolute;left: 38px;bottom:-2px; box-shadow: 1px 0px 0 rgba(0,0,0,0.2);}
.fixarea_l ul.fix2 li:nth-child(even)::after {content: "";width: 90px;height: 1px;background: rgba(255,255,255,0.3);position: absolute;left: -51px;bottom:-1px;box-shadow: 1px 1px 0 rgba(0,0,0,0.2); }
.fixarea_l ul.fix2 li:last-child::after {display: none; }
.fixarea_l ul.fix2 a { display:block; text-decoration:none; color:#FFF;}
.fixarea_l ul.fix2 a:hover{ color:#FFFF00;}
.fixarea_l ul.fix2 li:last-child::after{display: none;}


/*浮動效果*/
@keyframes floating1 {
	0% {
		transform: translateY(0%);
		transition-delay: 2s;
	}

	50% {
		transform: translateY(10%);
	}

	120% {
		transform: translateY(0%);
	}
}

@-webkit-keyframes floating1 {
	0% {
		-webkit-transform: translateY(0%);
	
	}

	50% {
		-webkit-transform: translateY(10%);
	}

	120% {
		-webkit-transform: translateY(0%);
		
	}
}






.main {
	width: 859px;
	height: 450px;
	background: url(https://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202512-year-end/images/main.png) 0 0 no-repeat;
	position: absolute;
	margin-top: 50px;
	margin-left: 150px;
	z-index: 1;
	display: block;
	animation-name: scale-up-hor-center;
	-webkit-animation-name: scale-up-hor-center;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

}




.main2 {
	width: 988px;
	height: 160px;
	background: url(https://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202512-year-end/images/text.png) 0 0 no-repeat;
	position: absolute;
	margin-top: 590px;
	margin-left: 110px;
	display: block;

}



/*.
.animated {
animation-duration: 2s;
  animation-fill-mode: both;
}*/






@media screen and (min-width: 400px) and (max-width: 1000px){
	

	
.main {
	width: 859px;
	height: 450px;
	background: url(https://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202512-year-end/images/main.png) 0 0 no-repeat;
	position: absolute;
	margin-top: 50px;
	margin-left: 150px;
	z-index: 1;
	display: block;
	animation-name: scale-up-hor-center;
	-webkit-animation-name: scale-up-hor-center;
	animation-duration: 1s;
	-webkit-animation-duration: 1s;
	animation-iteration-count: 1;
	-webkit-animation-iteration-count: 1;

}


.main2 {
	width: 988px;
	height: 160px;
	background: url(https://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202512-year-end/images/text.png) 0 0 no-repeat;
	position: absolute;
	margin-top: 590px;
	margin-left: 110px;
	display: block;

}

}




/*中間擠壓效果*/
@keyframes scale-up-hor-center {
  0% {
    -webkit-transform: scaleX(0.4);
            transform: scaleX(0.4);
  }
  100% {
    -webkit-transform: scaleX(1);
            transform: scaleX(1);
  }
}





/*換照片效果*/
@keyframes root{
	0% {
		filter: brightness(80%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main02.png");
		transform: translate(-10px, 0px);
		opacity: 0;
	}
	
	5% {
		filter: brightness(100%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main02.png");
		transform: translate(-20px, 0px);
		opacity: 1;
	}
	
	20% {
		filter: brightness(100%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main02.png");
		transform: translate(-20px, 0px);
		opacity: 1;
	}
	
	25% {
		filter: brightness(80%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main02.png");
		transform: translate(-30px, 0px);
		opacity: 0;
	}
	
	26% {
		filter: brightness(80%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main03.png");
		transform: translate(-10px, 0px);
		opacity: 0;
	}
	
	30% {
		filter: brightness(100%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main03.png");
		transform: translate(-20px, 0px);
		opacity: 1;
	}
	
	45% {
		filter: brightness(100%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main03.png");
		transform: translate(-20px, 0px);
		opacity: 1;
	}
	
	50% {
		filter: brightness(80%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main03.png");
		transform: translate(-30px, 0px);
		opacity: 0;
	}
	
	51% {
		filter: brightness(80%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main04.png");
		transform: translate(-10px, 0px);
		opacity: 0;
	}
	
	55% {
		filter: brightness(100%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main04.png");
		transform: translate(-20px, 0px);
		opacity: 1;
	}
	
	70% {
		filter: brightness(100%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main04.png");
		transform: translate(-20px, 0px);
		opacity: 1;
	}
	
	75% {
		filter: brightness(80%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main04.png");
		transform: translate(-30px, 0px);
		opacity: 0;
	}
	
	76% {
		filter: brightness(80%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main05.png");
		transform: translate(-10px, 0px);
		opacity: 0;
	}
	
	80% {
		filter: brightness(100%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main05.png");
		transform: translate(-20px, 0px);
		opacity: 1;
	}
	
	
	95% {
		filter: brightness(100%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main05.png");
		transform: translate(-20px, 0px);
		opacity: 1;
	}
	
	100% {
		filter: brightness(80%);
		background-image:url("http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/202205-MonthlyPromotion/images/main05.png");
		transform: translate(-30px, 0px);
		opacity: 0;
	}
	
}




/*小視窗頁面 參考202202-MonthlyPromotion*/
.frame1 {
width:1260px; height:600px;margin-left:4px;
opacity:1;
}

/*.frame3 {
width:1260px; height:600px;margin-left:4px;
opacity:1;
}*/

.frame2 {
width:1260px; height:600px;margin-left:-15px;
}

/*.frame4 {
width:1260px; height:600px;margin-left:-15px;
background-image:url(http://sunfar.blob.core.windows.net/webimage/sf/dc/isunfar/action/MonthlyPromotion/images/activity_11.png);
}*/








/*聚光燈搖擺 向右搖效果*/
@keyframes shake {
  from {
    transform: rotate(-10deg);
transform-origin:0% 100%;
  }
  to {
    transform: rotate(20deg);
transform-origin:0% 100%
  }
}


/*聚光燈搖擺 向左搖效果*/
@keyframes shake02 {
  from {
    transform: rotate(10deg);
transform-origin:100% 100%;
  }
  to {
    transform: rotate(-20deg);
transform-origin:100% 100%
  }
}



/*翻轉效果*/
@keyframes flipInX {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;
  }

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;
  }

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;
  }

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
  }

  to {
    transform: perspective(400px);
  }
}

/*閃爍效果*/
@keyframes play1 {
	0% {
		filter: brightness(100%);


	}

	20% {
		filter: brightness(95%);

	}

	30% {
		filter: brightness(110%);

	}

	50% {
		filter: brightness(95%);

	}

	100% {
		filter: brightness(100%);

	}
}


/*從左滑入效果*/
@keyframes fadeInLeft{
    from{
		opacity: 0;
    transform: translate3d(-20%, 0, 0);}	
    to{
        opacity: 1;
    transform: translate3d(0%, 0, 0);}
}

/*從右滑入效果*/
@keyframes fadeInRight{
    from{
		opacity: 0;
    transform: translate3d(20%, 0, 0);}	
    to{
        opacity: 1;
    transform: translate3d(0%, 0, 0);}
}


/*從下往上滑入效果*/
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 20%, 0);
  }

  to {
    /* opacity: 1; */
    transform: none;
  }
}