@charset "big5";
{
	margin: 0;
	padding: 0;
	background-color: #e479a4;
	/* background: linear-gradient(to bottom left, #54B791, #166154); */
}

.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://images.sunfar.com.tw/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.3s 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://images.sunfar.com.tw/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://images.sunfar.com.tw/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://images.sunfar.com.tw/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://images.sunfar.com.tw/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�����H�H��+goTop+�^���Y*/
.fixarea_l {
	z-index: 99;
	position: fixed;
	left: 0px;
	top: 80px;
	width: 165px;
	text-align: center;
	font-family: "�L�n������", "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: "�n�d�ְT";
	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: #5DBAEA;
}

.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%);
		
	}
}

.floating1 {
	width: 392px;
	height: 601px;
	background: url(http://images.sunfar.com.tw/sf/dc/isunfar/action/202108-MonthlyPromotion/images/main02.png) 0 0 no-repeat;
	position: absolute;
	top: 100px;
	left: 0px;
	display: block;
	animation-name: floating1;
	-webkit-animation-name: floating1;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;

}




.main {
	width: 818px;
	height: 573px;
	background: url(https://images.sunfar.com.tw/sf/dc/isunfar/action/202506-MonthlyPromotion/images/main.png) 0 0 no-repeat;
	position: absolute;
	margin-top: 160px;
	margin-left: 250px;
	z-index: 1;
	display: block;
	animation-name: floating1,play1;
	-webkit-animation-name: floating1,play1;
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}

.main2 {
	width: 361px;
	height: 411px;
	background: url(https://images.sunfar.com.tw/sf/dc/isunfar/action/202506-MonthlyPromotion/images/main2.png) 0 0 no-repeat;
	position: absolute;
	margin-top: 1600px;
	margin-left: 1800px;
	z-index: 1;
	display: block;
	/* animation-name: floating1,play1; */
	/* -webkit-animation-name: floating1,play1; */
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}





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

.frame1 {
width:1260px; height:600px;margin-left:4px;
opacity:0.1;
}

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

.frame2 {
width:1260px; height:600px;margin-left:-15px;
background-image:url(http://images.sunfar.com.tw/sf/dc/isunfar/action/202506-MonthlyPromotion/images/activity_11.png);
}

/*.frame4 {
width:1260px; height:600px;margin-left:-15px;
}*/


@media screen and (min-width: 400px) and (max-width: 1000px){
	
.main {
width: 818px;
height: 573px;
background: url(https://images.sunfar.com.tw/sf/dc/isunfar/action/202506-MonthlyPromotion/images/main.png) 0 0 no-repeat;
position: absolute;
margin-top: 210px;
margin-left: 150px;
z-index: 1;
display: block;

}}

.main2 {
	width: 361px;
	height: 411px;
	background: url(https://images.sunfar.com.tw/sf/dc/isunfar/action/202506-MonthlyPromotion/images/main2.png) 0 0 no-repeat;
	position: absolute;
	margin-top: 580px;
	margin-left: 840px;
	z-index: 1;
	display: block;
	/* animation-name: floating1,play1; */
	/* -webkit-animation-name: floating1,play1; */
	animation-duration: 2s;
	-webkit-animation-duration: 2s;
	animation-iteration-count: infinite;
	-webkit-animation-iteration-count: infinite;
}






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


	}

	20% {
		filter: brightness(95%);

	}

	30% {
		filter: brightness(110%);

	}

	50% {
		filter: brightness(95%);

	}

	100% {
		filter: brightness(130%);

	}
}



/*動態*/
/*螢幕*/
.TV{
	width:381px;height:418px;float:left;margin:0px 0px 0px 800px;
	top: 180px;
	left: 530px;
	position:absolute;
	animation-name: Snowp;
    animation-duration:3s;
    animation-iteration-count:1;
    animation-timing-function:linear;
	background-image:url(http://images.sunfar.com.tw/sf/dc/isunfar/action/202201-MonthlyPromotion/images/main02.png);}

@keyframes Snowp{
    from{
		-webkit-transform: translate(0px, 0px);
                transform: translate(200px, 0px);	             
		        opacity: 1;}	
    to{
        -webkit-transform: translate(0px, 200px);
                transform: translate(0px, 0px);
	             opacity: 0;}		
}



.box{
	width:1000px;
	height:600px;}
	
.box2{
	width:1000px;
	height:1000px;}