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


/*------共用--區塊_all------*/
.WRAPPER {position:relative; display:inline-block; margin:0; padding:0; overflow:hidden; width:100%;}
.WRAPPER * {-webkit-box-sizing:border-box; box-sizing:border-box;}
.WRAPPER img {  width:100%;  height:auto;}
.mainKv{max-width: 1220px; margin: 0 auto; position: relative;}

.forWeb{display: block;}
.forPhone {display:none;}
@media screen and (max-width:767px){ 
	.WRAPPER{background-size:100%;} 
	.forWeb{display: none;}
	.forPhone {display: block;}
	.mobile{ display: block; }
	.mainKv { width: 100%;}
	.mainKv img {max-width:100%;height:auto !important;}
}


/* --------------------------------------
 *                背景
 * -------------------------------------- */
/*PC背景*/
.bg1240{ position: relative; background: url() no-repeat top center; }
.bg01 { position: relative; background:url("../../images/bg_01.jpg") no-repeat  center 50px #f8f6eb;padding-top: 50px;}
.bg02 { position: relative; background:url("") no-repeat top center #ffe562;}
.bg03 { position: relative; background:url("../../images/bg_02.jpg") no-repeat top center #47a75b;}

.sectionBg{/*底下套版背景*/
	text-align:center;
	padding: 0 0 0px;
	background: url(../../images/bg_03.jpg) #0f0950 repeat top center ;
}

/*Phone背景*/
@media screen and (max-width:767px){ 
	.bg01{ 

		padding-top: 42px;
	}
	
	.bg02{ 

		background-size:100%;
	}

}



/* 招牌動畫 */
/*閃光*/
.lightSweepa {  pointer-events: none;
	-webkit-filter: brightness(1.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(1.3);
	-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(1.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(1.9);
	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 2s ease-out infinite;
  }

.lightSweepa2 {  pointer-events: none;display: 1s;
	-webkit-filter: brightness(1.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(1.3);
	-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(1.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(1.9);
	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 2s 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;
	}
  }


.seoPic {display: flex}

@media screen and (max-width:767px){ 
.seoPic img {max-width: 50% !important;}

}