@charset "utf-8";
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {
	display: block;
}

html{background:url("../images/bg_fixed.jpg") top center no-repeat fixed;}
header{background:url("../images/header_bg.jpg") top center no-repeat;}
@media screen and ( max-width: 991px ){
html{background:url("../images/bg_color1.jpg");}
header{background:none;}	
		}


/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 991px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; }
.topbox { position: relative; width: 1200px; margin: auto;}
.kv_pc {width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }

/* m */
@media screen and ( max-width: 991px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }
}




/*主視覺動畫*/
img.kv_title {	
	position: absolute;
	top:285px; 
	left: 0px;
	-webkit-animation: bounce-in-bck 1.1s both;
	        animation: bounce-in-bck 1.1s both;
}
img.kv_promotion {	
	position: absolute;
	top:403px; 
	left: 0px;
	-webkit-animation: text-focus-in 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) .6s both;
	        animation: text-focus-in 1.5s cubic-bezier(0.550, 0.085, 0.680, 0.530) .6s both;	
}
img.kv_computer {	
	position: absolute;
	top:0px; 
	left: -360px;	
}
img.kv_ribbon {	
	position: absolute;
	top:0px; 
	left: -360px;	
}
img.kv_pic1 {	
	position: absolute;
	top:120px; 
	left: -180px;
    animation: floating 4s; 
	animation-delay: 0s; 
	animation-iteration-count: infinite; 	
}
img.kv_pic2 {	
	position: absolute;
	top:250px; 
	left: -270px;
    animation: floating 4s; 
	animation-delay: -1s; 
	animation-iteration-count: infinite; 	
}
img.kv_pic3 {	
	position: absolute;
	top:480px; 
	right: 328px;
    animation: floating 4s; 
	animation-delay: 0s; 
	animation-iteration-count: infinite; 	
}
img.kv_pic4 {	
	position: absolute;
	top:605px; 
	right: -360px;
    animation: floating 4s; 
	animation-delay: -1s; 
	animation-iteration-count: infinite; 	
}
img.kv_pic5 {	
	position: absolute;
	top:130px; 
	left: 870px;
    animation: floating 6s; 
	animation-delay: 0s; 
	animation-iteration-count: infinite; 	
}
img.kv_pic6 {	
	position: absolute;
	top:375px; 
	left: 985px;
    animation: floating 2s; 
	animation-delay: -1s; 
	animation-iteration-count: infinite; 	
}
img.kv_6 {	
	position: absolute;
	top:0px; 
	left: 295px;
    animation: floating 3s; 
	animation-delay: 0s; 
	animation-iteration-count: infinite; 	
}
img.kv_1 {	
	position: absolute;
	top:0px; 
	left: 515px;
    animation: floating 3s; 
	animation-delay: 0.5s; 
	animation-iteration-count: infinite; 	
}
img.kv_8 {	
	position: absolute;
	top:0px; 
	left: 668px;
    animation: floating 3s; 
	animation-delay: 1s; 
	animation-iteration-count: infinite; 	
}


/* ----------------------------------------------
 * Generated by Animista on 2022-8-16 10:28:44
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation text-focus-in
 * ----------------------------------------
 */
@-webkit-keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}
@keyframes text-focus-in {
  0% {
    -webkit-filter: blur(12px);
            filter: blur(12px);
    opacity: 0;
  }
  100% {
    -webkit-filter: blur(0px);
            filter: blur(0px);
    opacity: 1;
  }
}

/* ----------------------------------------------
 * Generated by Animista on 2022-6-21 10:45:12
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation bounce-in-bck
 * ----------------------------------------
 */
@-webkit-keyframes bounce-in-bck {
  0% {
    -webkit-transform: scale(7);
            transform: scale(7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(1.24);
            transform: scale(1.24);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}
@keyframes bounce-in-bck {
  0% {
    -webkit-transform: scale(7);
            transform: scale(7);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
    opacity: 0;
  }
  38% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
    opacity: 1;
  }
  55% {
    -webkit-transform: scale(1.5);
            transform: scale(1.5);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  72% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  81% {
    -webkit-transform: scale(1.24);
            transform: scale(1.24);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  89% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
  95% {
    -webkit-transform: scale(1.04);
            transform: scale(1.04);
    -webkit-animation-timing-function: ease-in;
            animation-timing-function: ease-in;
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
    -webkit-animation-timing-function: ease-out;
            animation-timing-function: ease-out;
  }
}

/*區塊*/
.block_2 {background: url("../images/bg_color3.jpg"); padding: 5px 0 10px; margin-bottom: 60px;}
.side_deco {background: url("../images/side_deco5.png")top center repeat-y;}

/*滾動裝飾*/
.bg_deco{width: 100%;  position: relative; text-align:center; display: flex;justify-content: center;max-width: 1920px; margin: auto;flex-wrap: wrap-reverse;}
.rellax-01{ position: absolute;top:0px;left:-360px;z-index: -1;}
.rellax-02{ position: absolute;top:150px;right:-360px;z-index: -1;}
.rellax-03{ position: absolute;top:950px;left:-360px;z-index: -1;}
.rellax-04{ position: absolute;top:1400px;right:-360px;z-index: -1;}
.rellax-05{ position: absolute;top:1700px;left:-360px;z-index: -1;}
.rellax-06{ position: absolute;top:2500px;right:-360px;z-index: -1;}
.rellax-07{ position: absolute;top:2100px;left:-360px;z-index: -1;}

/*標題*/
.btt{
	background: url("../images/btt_bg.png")top center no-repeat;
	width: 100%;
	height: 105px;
}
.btt h2 {
	font-family: 'Noto Sans TC', sans-serif;
	font-weight: 900;
	font-size: 3.2rem;
	color: #fff;
	text-shadow: 0 0 15px #5d3d9e;
	letter-spacing: 3px;
	padding-top: 18px;
}

/*元件調整*/
.banner{padding: 0;}
.half ul {background:#876bc280; border-radius: 10px;}
.hightlight .font h4 {background: url("../images/bg_color3.jpg");}
.hightlight li, .banner img, .hightlight .inner-bn img {border-radius: 10px;}
.hightlight li img {border-radius: 10px 10px 0 0 ;}

/*broadwise挖空*/
.broadwise_sp li:nth-child(2){ margin-left: 386px;}
.broad1 {background:url("../images/sp7p_bg1.png")top center no-repeat, #876bc280; border-radius: 10px; padding: 10px;}
.broad2 {background:url("../images/sp7p_bg2.png")top center no-repeat, #876bc280; border-radius: 10px; padding: 10px;}

/*promotion三塊*/
.block_00 {margin-bottom: 60px;}
.block_00 ul {
    width: 1210px;
    margin: 20px auto;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}
.a1 {animation: floating 3s; animation-delay: 0s; animation-iteration-count: infinite; }
.a2 {animation: floating 3s; animation-delay: 0.5s; animation-iteration-count: infinite;}
.a3 {animation: floating 3s; animation-delay: 1s; animation-iteration-count: infinite; }

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

/*五品圓改六品*/
.block_2 .round_5p{width: 1160px; margin:20px auto 40px; }
.block_2 .round_5p ul{ display: flex; justify-content: space-around; flex-wrap: wrap;}
.block_2 .round_5p li{ width: 180px; margin: 6px; padding: 0; position: relative;}
.block_2 .round_5p a { display: flex; flex-wrap: wrap;}
.block_2 .round_5p .font {  margin: 0 auto;padding: 10px 0px 10px;text-align: center;}
.block_2 .round_5p .font h4 { }
.block_2 .round_5p .font p {color: #fff; font-size: 1.1rem; font-weight: 500;}
.block_2 .round_5p img {width: 180px; height: 180px; object-fit: contain; margin: auto; border-radius: 180px; box-shadow: 0 0 20px #fff; border: 2px solid #fff;}

/*--------------------------------m版--------------------------------*/

@media screen and (max-width: 991px) {
	
/*區塊*/
.block_2 {padding: 2vw 0 2vw; margin-bottom: 6vw;}	
	
/*標題*/
.btt{
	background: url("../images/btt_bg.png")top center no-repeat;
	background-size: contain;
	width: 95%;
	height: 105px;
	margin-bottom: -12vw;
}
.btt h2 {
	font-size: 2.3rem;
	padding-top: 2.8vw;
	letter-spacing: 2px;
}	
	
/*元件調整*/
.half ul { border-radius: 8px;}
.hightlight li, .banner img, .hightlight .inner-bn img {border-radius: 8px;}
.hightlight li img {border-radius: 8px 8px 0 0 ;}
	
/*broadwise挖空*/	
.broadwise_sp{width: 96%; background: none;}
.broadwise {width: 100%;margin: 2vw auto;}
.broadwise .broadwise_sp  li {width: 97vw;}
.broadwise ul {display: grid;}
.broadwise li {width: 60vw; padding: 2vw; margin: 0.5vw;}
.broadwise_sp{ margin-left: 0px; width:100%;}
.broadwise_sp li:nth-child(2){ margin-left:auto;}
.broadwise_sp ul li{ width: 96vw; display:inline-block;}
.broadwise .broadwise_sp  li{ width: 97vw;}
.broadwise .broadwise_sp  li img{width: 40vw; height: 40vw; padding: 0;}
.broadwise .broadwise_sp  li .font{ width: 40vw;}
.broad1 {background:#876bc280; border-radius: 10px; padding: 2vw;}
.broad2 {background:#876bc280; border-radius: 10px; padding: 2vw;}	
	
/*promotion三塊*/
.block_00 {width: 100%; margin-bottom: 6vw;}
.block_00 ul {
    width: 100%;
    margin: 2vw auto;
}
.block_00 ul li img {width: 50vw;}	
.a1 {animation: none; }
.a2 {animation: none; }
.a3 {animation: none; }
	
/*五品圓改六品*/	
.block_2 .round_5p {width: 100%; margin: 3vw auto;}
.block_2 .round_5p li{ width: 44vw; margin: 0 auto 3vw; padding: 0;}
.block_2 .round_5p a { flex-wrap: wrap; }
.block_2 .round_5p .font { width: 100%; padding: 0;margin:2vw auto 0; text-align: center;}
.block_2 .round_5p .font p { font-size: 1.2rem; }
.block_2 .round_5p img { height: 44vw; width: 44vw;margin:0;}
.block_2 .round_5p li:nth-child(even) .font {  text-align: center;}
.block_2 .round_5p li:nth-child(even) img { order: 0;}	
	
	
	
}

















 /*--goto top--*/          
 #gotop {display: inline-block;background-color: #000;opacity:0.3;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 0px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;opacity: 0;visibility: hidden;z-index: 1000;margin: 30px;}          
 #gotop::after {font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff;  opacity:0.5;background: url(../images/top.png) center no-repeat; background-size:50%;background-position:50% 20%;}         #gotop:hover {cursor: pointer;background-color: #666;}          
 #gotop:active {background-color: #ccc;}          
 #gotop.show {opacity: 0.4;visibility: visible;}          
 @media screen and ( max-width: 991px ){          
 #gotop {bottom: 70px;right: 0;margin: 2vw;}
 }         
 /* share url */          
 #share{display: inline-block;background-color: #000;opacity:0.4;width: 40px;height: 40px;text-align: center;border-radius: 100%;position: fixed;bottom: 50px;right: 0px;transition: background-color .3s, opacity .5s, visibility .5s;z-index: 1000;margin: 30px;}
 #share::after{font-family: FontAwesome;content:'　';font-weight: normal;font-style: normal;font-size: 2em;line-height: 50px;color: #fff; opacity:0.5;background: url(../images/share.png) center no-repeat; background-size:20px;background-position:50% 30%;}
 #share:hover{cursor: pointer;background-color: #666;}
 #share:active{background-color: #666;}
 @media screen and ( max-width: 991px ){
 #share{bottom:115px;right: 0;margin: 2vw;}
 }                    
 @media screen and ( max-width: 991px ){          
 html{padding-bottom: 80px;}          
 }