@import url("reset.css");
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC:100,300,400,500,600,700,800,900');

*{
	margin:0;
	padding:0;
	list-style: none;
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
}

img{border:0;}
html,body{
	font-family:"Noto Sans TC","Microsoft JhengHei","微軟正黑體","Helvetica Neue",Arial,sans-serif;
	font-size:18px;
	line-height:160%;
	font-weight:400;
	color:#fff;
	text-decoration:none;
	background:#084570 url('../images/bg.gif') center center fixed no-repeat;
	background-size: cover;
}

@media screen and (max-width:991px) {	
	html,body{
		background:#084570 url('../images/bg.gif') center center fixed repeat-y;
		background-size: 200% auto;
	}
}

#wrap {width:100%;margin:0 auto;overflow:hidden;}

/*PC or Mobile*/
.viewPc{display:block;}
.viewMobile{display:none;}
.viewMobile img{max-width:100%; height:auto; display:block;}
.viewXs{display:block;}
.container-fluid{width: 100%; padding-right:15px; padding-left:15px; margin-right: auto; margin-left: auto;}

@media screen and (min-width:1441px) {
	.container-fluid{max-width: 1440px;}
	.viewXs{display:block;}
}
@media screen and (min-width:992px) {
	.viewMobile{display:none;}
	.viewXs{display:block;}
}
@media screen and (max-width:991px) {	
	.viewPc{display:none;}
	.viewMobile{display:block;}
	.viewXs{display:block;}
}

@media screen and (max-width:360px) {	
	.viewXs{display:none;}
}

/********* navbar **********/
.navbar {height:60px;font-size:1.1rem;letter-spacing:.12em;font-weight:450;color:#fff57d;padding:0;}
.navbar-light .navbar-nav {margin:0 auto;padding:.2rem 1rem;text-align:center;}
.navbar-toggler{border:0;padding:.25rem .5rem;font-size:1.2rem;line-height:1;}
.navbar-toggler-icon {display:inline-block;width:1.25em;height:1.25em;vertical-align: middle;content: "";background: no-repeat center center;background-size: 100% 100%;}
.navbar-light .navbar-toggler{border:0;}
.m-container{width:100%;height:auto;margin:0 auto;text-align:right;}
.bg-red{background-color:#eb6130;}



@media screen and (max-width: 991px){
  .navbar{padding:.5rem 1rem 0 1rem;font-size:1.25rem;letter-spacing:1.25px;font-weight:500;}
  .navbar-collapse{margin:1rem auto 1.25rem auto; padding:0;}
  .navbar-light .navbar-nav .nav-link {color:#eb6130;text-align:center;margin:.5em 0;padding:.8em 0;background-color:#fff57d;}
  .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
    color:#084571;font-size:1.25rem;
  }
}

@media screen and (max-width: 767px){
  .navbar {font-size:1rem;letter-spacing:1px;font-weight:600;}
  .navbar-collapse{margin:.5rem 0 0rem 0;padding:0;}
  .navbar-light .navbar-nav .nav-link {padding:.65em 0;}
  .navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus{font-size:1rem;}
}


@media (max-width: 575.98px) {
  .nav-bar-pc{display: none !important;visibility: hidden;}
  .nav-bar{top:80% !important;right:1%;}    
}

@media (min-width: 576px) {
  .nav-bar-pc{display:none;visibility: hidden;}  
}

@media (max-width: 991px) {
  .nav-bar-pc{display:none;visibility: hidden;}
}
@media (min-width: 992px) {
  .nav-bar-pc{display:block;visibility:visible;}
  .nav-bar{bottom:1%; right:0; margin:0 auto;}
  .nav-bar a{display:block !important;cursor:pointer;width:45px;text-align:center;margin:0 auto;}
  .nav-bar ul, .nav-bar ol, .nav-bar li{margin:0; padding:0; list-style:none;}

  .nav-bar ul{background: url("../images/right-menu_01.png") no-repeat;padding-top:56px;width:80px;margin-bottom:.25rem}
  .nav-bar ul .menu-a{background: url("../images/right-menu_02.png") no-repeat; width:80px;height:62px;}
  .nav-bar ul .menu-b{background: url("../images/right-menu_03.png") no-repeat; width:80px;height:83px;}
  .nav-bar ul .menu-c{background: url("../images/right-menu_04.png") no-repeat; width:80px;height:62px;}
  .nav-bar ul .menu-d{background: url("../images/right-menu_05.png") no-repeat; width:80px;height:46px;}
  .nav-bar ul .menu-a:hover{background: url("../images/right-menu_02h.png") no-repeat;}
  .nav-bar ul .menu-b:hover{background: url("../images/right-menu_03h.png") no-repeat;}
  .nav-bar ul .menu-c:hover{background: url("../images/right-menu_04h.png") no-repeat;}
  .nav-bar ul .menu-d:hover{background: url("../images/right-menu_05h.png") no-repeat;}
  .menu-a a, .menu-c a{width:80px;height:62px;}
  .menu-b a{width:80px;height:83px;}
  .menu-d a{width:80px;height:46px;}
}

@media (min-width: 1200px) {
  .nav-bar{bottom:3%;right:0;margin:0 auto;}
}

@media (min-width: 1441px) {
  .nav-bar{bottom:10%; right:1%; margin:0 auto;}
}

/********************* header *********************/
.kv {
	width: 100%;
	margin: 0 auto;
	padding-bottom:34.2%;
    background:url('../images/kv_bg.png') top center no-repeat;
    background-size:cover;
}
.kv > .container {position:relative;padding-top:2rem;}
.hd-t2{position:absolute;right:2.2%;top:10%;z-index:3;}
.hd-t3{margin-top:20px;}
.kv_M{display: none;}

@media screen and (min-width:1441px) {
	.kv{padding-bottom:25.7%;background-size:cover;}
	.kv > .container {padding-top:2.15rem;}
}
@media screen and (max-width:1199px) {
   .kv{padding-bottom:43%;background-position:52% center;}
   .kv > .container {padding-top:1.6rem;}
   .hd-t2{right:-4%;top:8%;}
   .hd-t2 img {max-width: 90%;}
}

@media screen and (max-width:991px) {
  .kv{display:none;}
  .kv_M{display:block;}
}

#intro, #method, #lifecycle, #bv, #lifead, #curve_bg2{width:100%; margin:0 auto; display:block;}

/********************* intro *********************/
#intro{height:auto;background-color:#f0f9fe;position:relative;}
/*圓弧bg*/
#curve_bg{position:absolute;bottom:0;left:0;width:100%;transform:translateY(98%);}
#curve_bg path{fill:#f0f9fe;}

#intro > .container-fluid {padding-bottom:.8rem;}
.intro-cover{width:100%;margin:.25em auto;text-align: center;}
.intro-cover img{max-width:85%;vertical-align:middle;}
.intro-title{width:100%;margin:1em auto .65em auto;display:flex;align-items:center;}
.intro-title > h2{color:#eb6130;font-size:1.5rem;font-weight:700;line-height:1.65em;letter-spacing:.1rem;margin-bottom:.25em;margin-right:1.25em;}
.intro-title > img{max-width:80%;vertical-align: middle;}
#intro .container-fluid h3{color:#008c88;font-size:1.25rem;font-weight:600;line-height:1.6em;letter-spacing:.13rem;margin:.55em 0;}
#intro .container-fluid p{color:#000;font-size:1rem;text-align:justify;letter-spacing:.07rem;margin-bottom:.75rem;}

@media screen and (min-width:1441px) {
	.intro-cover img{max-width: 80%;}
}
@media screen and (max-width:1199px) {
	.intro-cover img{max-width: 95%;}
	.intro-title{margin:1em auto 0 auto;}
	.intro-title h2{font-size:1.35rem;letter-spacing:1px; margin-bottom:0;}
	#intro .container-fluid p{letter-spacing:.5px; margin-bottom:.5rem;padding-right:1rem;}
}
@media screen and (max-width:991px) {
	.intro-cover img{max-width: 80%;}
	#intro .container-fluid h2{color:#eb6130;font-size:1.65em;font-weight:700;line-height:1.5em;text-align:center;letter-spacing:1.25px;margin:1.25em auto 1em auto;}
	#intro .container-fluid h3{text-align:center;margin:.65em 0;letter-spacing:.02rem;}
	#intro .container-fluid p{line-height:1.55em;margin-bottom:.85rem;padding:0 1.5rem;}
}
@media screen and (max-width:767px) {
	#intro > .container-fluid {padding-bottom:.25rem;}
	#intro img{max-width: 80%;}
	#intro .container-fluid h2{color:#eb6130;font-size:1.45em;font-weight:700;line-height:1.5em;letter-spacing:1px;margin:1.25em auto 1em auto;}
	#intro .container-fluid h3{font-size:1.3em;padding:0 .5rem;}
	#intro .container-fluid p{line-height:1.55em;padding:0 .75rem;}
}
@media screen and (max-width:567px) {
	#intro .container-fluid h2{font-size:1.05em;line-height:1.5em;letter-spacing:0;}
	#intro .container-fluid h3{font-size:1.02em;padding:0;letter-spacing:0;}
	#intro .container-fluid p{line-height:1.6em;padding:0 .75rem;}
}

/********************* method *********************/
#method{height:auto;padding-top:50px;}
.iconimg2{max-width:100%;display:block;margin:0 auto;}
.guide{width:100%;margin:0 auto;background:url('../images/method_bg.png') top center no-repeat;background-size:cover;}
.kindtxt{color:#fff;font-size:1rem;line-height:1.5rem;letter-spacing:.02rem;text-align:left;margin-bottom:1rem;}
.kindtxt2{color:#fcba9c;font-size:1.5rem;font-weight:600;letter-spacing:.25rem;vertical-align:text-bottom;}
.spacebox{width:100%;height:35px;display:block;margin:0 auto;}

@media screen and (max-width:1199px){
	.kindtxt2{font-size:1.4rem;letter-spacing:.12rem;}
}

@media screen and (max-width:991px){
	#method{padding-top:25px;}
	#method > .container{width:95%;max-width:95%;}
	.iconimg2 {max-width:58%;margin-bottom:.5rem;}
	.guide{background: 0;}	
}
@media screen and (max-width:812px){
	.iconimg2 {max-width:55%;}
}
@media screen and (max-width:414px){
	.iconimg2 {max-width:90%;}
}

/********************* curve_bg2 ********************/
#curve_bg2{padding-bottom:6%;background:url('../images/curve_bg2.png') top center repeat-y;background-size:cover;}

@media screen and (max-width:812px){
	#curve_bg2{padding-top:8%;padding-bottom:0;}
}

/********************* lifecycle ********************/
#lifecycle{height:auto;background:#34aebb url('../images/bg2.gif') top center repeat-y;background-size:100% auto;padding-bottom:1rem;}
.content{display:block;width:100%;margin:0 auto;padding-top:.65rem;padding-bottom:1.5rem;}
.content_M{display:none;width:100%; margin:0 auto;padding-top:.5rem;padding-bottom:1.2rem;}
.theme1, .theme2, .theme3, .theme4{width: 100%;margin: 0 auto;background-size:cover;}
.theme1{height:413px;background:url('../images/life_01.png')top center no-repeat;z-index:10;/* top: 0; */}
.theme2{height:455px;background:url('../images/life_02.png')top center no-repeat;z-index:9;margin-top:0;}
.theme3{height:510px;background:url('../images/life_03.png')top center no-repeat;z-index:8;margin-top:0;}
.theme4{height:502px;background:url('../images/life_04.png')top center no-repeat;z-index:7;margin-top:0;}
/*more*/
.theme_wrapper{width:100%;max-width:1200px;margin:0 auto;height:100%;position:relative;}
.morebtn{display:block;max-width:100%;}
/*moreb1-10定位*/
.moreb1{position:absolute;bottom:16%;left:29%;z-index:3;}
.moreb2{position:absolute;bottom:5%;right:8%;z-index:4;}
.moreb3{position:absolute;bottom:5%;left:18%;z-index:2;}
.moreb4{position:absolute;bottom:23%;left:49%;z-index:3;}
.moreb5{position:absolute;bottom:8%;right:2%;z-index:4;}
.moreb6{position:absolute;bottom:3%;left:14%;z-index:1;}
.moreb7{position:absolute;bottom:16%;left:57%;z-index:2;}
.moreb8{position:absolute;bottom:2%;right:0;z-index:3;}
.moreb9{position:absolute;bottom:0;left:19%;z-index:3;}
.moreb10{position:absolute;bottom:5%;right:14%;z-index:4;}

@media screen and (max-width:1200px){
	.theme1{height:331px;background:url('../images/life_01m.png')top center no-repeat;}
	.theme2{height:367px;background:url('../images/life_02m.png')top center no-repeat;}
	.theme3{height:410px;background:url('../images/life_03m.png')top center no-repeat;}
	.theme4{height:406px;background:url('../images/life_04m.png')top center no-repeat;}
	.theme_wrapper{max-width: 1000px;}
	.moreb1{left:31%;}
	.moreb2{bottom:3%;right:7%;}
	.moreb3{bottom:3%;left:20%;}
	.moreb4{bottom:20%;left:49%;}
	.moreb5{bottom:4%;right:3%;}
	.moreb6{bottom:1%;left:15%;}
	.moreb7{bottom:13%;}
	.moreb8{right:1%;}
	.moreb9{left:20%;}
	.moreb10{bottom:4%;}

}
@media screen and (max-width:991px){
	.content{display:none;}
	.content_M{display:block;}
	.m-theme1 img,.m-theme2 img,.m-theme3 img,.m-theme4 img,.m-theme5 img{max-width: 100%;}
	.m-theme1, .m-theme2, .m-theme3, .m-theme4, .m-theme5{width:100%;margin:0 auto;background-size:cover;}
	.m-theme1{background:url('../images/life_m1_bg.png')top center no-repeat;}
	.m-theme2{background:url('../images/life_m2_bg.png')top center no-repeat;}
	.m-theme3{background:url('../images/life_m3_bg.png')top center no-repeat;}
	.m-theme4{background:url('../images/life_m4_bg.png')top center no-repeat;}
	.m-theme5{background:url('../images/life_m5_bg.png')top center no-repeat;}
	.m-theme_wrapper{width:89%; margin:0 auto;display:flex;align-items:center;}
	.iconimg3{max-width:95%;margin-bottom:1rem;}
}

@media screen and (max-width:812px){
	#lifecycle{background-size:150% auto;}
	.content_M{padding-top:.05rem;padding-bottom:0;}
	.m-theme1, .m-theme2, .m-theme3, .m-theme4, .m-theme5{background-size:105% 100%;}
	.m-theme_wrapper{width:93%;}
	.iconimg3{max-width:98%;margin-bottom:.75rem;}
}

@media screen and (max-width:767px){
	.m-theme1, .m-theme2, .m-theme3, .m-theme4, .m-theme5{background-size:101% 100%;}
	.m-theme_wrapper{width:95%;}

}


/********************* bv + expert *********************/
#bv{height:auto;background-color:#f0f9fe;padding-top:1.15rem;padding-bottom:1.25rem;}
#expert{height:auto;background-color:#f0f9fe;position:relative;padding-top:15px;}
#expert > .container{width:90%;max-width:1220px;}

.iconimg {max-width:100%;display:block;margin:0 auto .65em auto;}

.p-txt{color:#000;font-size:1rem;line-height:1.75em;text-align:justify;letter-spacing:.09rem;margin-bottom:.75rem;padding:0;}
.txt1, .txt2{color:#008c88;font-size:1.5rem;font-weight:700;letter-spacing:.05rem;text-align: center; margin-bottom:.25rem;}
.txt2{font-size:1.3rem;font-weight:450;line-height:2.2em;letter-spacing:.1rem;margin-bottom:12px;}

@media screen and (min-width:1441px) {
	#expert > .container{max-width:1366px;}
	.p-txt{padding:0 1.25em;}
}

@media screen and (max-width:1199px) {
	#expert > .container{width:95%;max-width:95%;}
}
@media screen and (max-width:991px) {
	.txt1, .txt2{font-size:1.35rem;line-height:1.35em;margin-bottom:.25rem;}
	.txt2{font-size:1.15rem;line-height:2.2em;letter-spacing:.06rem;margin-bottom:5px;}
	.p-txt{line-height:1.55em;padding:0 .25em;}
}

@media screen and (max-width:812px){
	#bv{padding-top:.75rem;padding-bottom:.75rem;}
	.iconimg {max-width:50%;}
}


/********************* lifead *********************/
#lifead{height:auto;padding-top:50px;overflow:hidden;}
.adtitle{margin:0 auto;text-align:center;}
.staricon{width:13%; display:block; margin:0 auto;}
.adtxt{font-size:2.2rem;line-height:2em;font-weight:700;text-align:center;color:#fef627;letter-spacing:.12em;margin-bottom:.5rem;}
.adbox{width:100%;margin:.25em auto 0 auto;position:relative;padding-bottom:55px;display:flex;align-items:flex-start;}
.adcover{width:25%; margin-right:3%;}
.txtbox{width:63%;}
.txtbox-p{width:100%;font-size:1.2rem;line-height:2rem;font-weight:500;letter-spacing:.13rem;margin-bottom:1rem;}

.adbuy{display:flex;justify-content:flex-start;align-items:center;}
.adbuy .bname{font-size:2rem;font-weight:600;line-height:1.35em;color:#fffbc5;letter-spacing:.1em;}
.adbuy .txt3{color:#bcdad3;font-size:1.5rem;font-weight:500;line-height:1.8em;letter-spacing:.08em;margin-bottom:0;}
.viewbuy{display:block;}
.viewbuy_M{display:none;}
.viewbuy_S{display:none;}
.viewbuy_XS{display:none;}

.buybtn{margin-left:1rem;}
.buybtn span{display:block;width:90px;height:90px;font-size:2rem;text-align:center;line-height:90px;color:#fff;background-color:#e8374b;border-radius:50%;}
.sale_price_n{font-family:"Georgia";font-size:1.75rem;font-weight:600;color:#fffbc5;letter-spacing:.05em;vertical-align:text-bottom;margin:0 8px;}

.godread{position:absolute;width:40%;bottom:0;right:-7%;z-index:0;}
.staricon img, .godread img{max-width:100%;}/* img*/

@media screen and (max-width:1440px) {	
	.staricon{width:12%;}
	.adcover{width:25%; margin-right:2%;}
	.txtbox{width:58%;}
	.godread{width:33%;right:-3.5%;}
	.buybtn{margin-left:.65rem;}
}

@media screen and (max-width:1300px) {	
	.staricon{width:16%;}
	.adcover{width:26%;}
	.txtbox{width:60%;}
	.godread{width:31%;right:-5%;}
	.buybtn{margin-left:.65rem;}
}

@media screen and (max-width:1024px) {
	.viewbuy{display:none;}
	.viewbuy_M{display: block;}
	.adtxt{font-size:1.85rem;letter-spacing:.05em;margin-bottom:.5rem;}
	.txtbox{width:65%;}
	.adbox{padding-bottom:0;}
	.adbox2{width:100%;position:relative;padding-bottom:25px;}
	.adbuy{width:70%;margin-left:7%;}
	.adbuy .bname{letter-spacing:.1em; margin-right:2rem;}
	.sale_price_n{font-size:2rem;letter-spacing:1.2px;}
	.godread{width:25%;right:-1%;}
}

@media screen and (max-width:991px) {
	#lifead{padding-top:20px;}
	.adcover{width:25%;}
	.txtbox{width:65%;margin:0;text-align:left;}
	.txtbox-p{letter-spacing:.06rem;margin-bottom:.5rem;}
	.adbuy{margin-left:5%;}
	.adbuy .bname{font-size:1.75rem;margin-right:.5rem;}
	.adbuy .txt3{font-size:1.3rem;line-height:1.55em;}
	.buybtn span{width:72px;height:72px;font-size:1.75rem;line-height:72px;}	
}

@media screen and (max-width:812px){
	.adcover{width:26%;}
	.txtbox{width:65%;}
	.txtbox-p{width:100%;font-size:1rem;line-height:1.7rem;/* letter-spacing:.1rem;margin-bottom:1rem; */}
	.adbuy{width:85%;margin-left:5%;}
	.adbuy .bname{font-size:1.6rem;margin-right:.65rem;}
	/* .adbuy .txt3{font-size:1.3rem;line-height:1.55em;} */
}

@media screen and (max-width:667px) {
	.viewbuy_M{display:none;}
	.viewbuy_S{display:block;}
	.adbox{padding-bottom:10px;}
	.adcover{width:36%;margin-right: 3%;}
	.txtbox{width:55%;margin:0;text-align:left;}
	.adtxt{font-size:1.55rem;letter-spacing:.1rem;margin-bottom:0;}
	.txtbox-p{font-size:.95rem;line-height:1.3rem;letter-spacing:.1em;margin-bottom:.5rem;}
	.adbuy .bname{font-size:1.45rem;margin-right:.75rem;}
	.sale_price_n{font-size:1.65rem;letter-spacing:.5px;margin:0 5px;}	
	.godread{width:32%;right:0;bottom:-5%;}
}

@media screen and (max-width:414px) {
	.staricon{width:22%;}
	.adtxt{font-size:1.02rem;letter-spacing:0;margin-bottom:0;}
	.adbox{padding-bottom:5px;}
	.adcover{width:37%;margin-right:3%;}
	.txtbox{width:58%;}
	.txtbox-p{font-size:.6rem;line-height:.85rem;letter-spacing:.05em;margin-bottom:.5rem;}
	.adbox2{padding-bottom:20px;}
	.adbuy{margin-left:3%;}
	.adbuy .bname{font-size:1rem;margin-right:.75rem;}
	.adbuy .txt3{font-size:.75rem;line-height:1.55em;}
	.sale_price_n{font-size:1.2rem;letter-spacing:.5px;vertical-align:unset;margin:0 2px;}
	.buybtn{margin-left:.15rem;}
	.buybtn span{width:60px;height:60px;font-size:1.5rem;line-height:60px;}
	.godread{width:33.5%;right:-5%;bottom:-3%;}
}

@media screen and (max-width:320px) {
	.viewbuy_S{display:none;}
	.viewbuy_XS{display:block;}
	.adtxt{font-size:1rem;line-height:1.2em;letter-spacing:0;margin:.65rem auto;}
	.adbox2{margin:0 auto;padding-bottom:15px;display:flex;flex-direction:column;justify-content:center;}
	.adbox{padding-bottom:0;}
	.adcover{width:66%;margin-right:0;}
	.txtbox{width:96%;margin:0 auto;}
	.txtbox-p{text-align:center;line-height:1rem;}
	.adbuy{margin:0 auto; justify-content: center;}
	.buybtn{margin-left:.3rem;}
	.godread{width:35%;right:-10%;bottom:0;}

}



/********************* 動態 *********************/
.animated {
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

/* zoomIn */
@-webkit-keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -25%, 0);
    transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -25%, 0);
  }

  50% {opacity:1;}
}
@keyframes zoomIn {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -25%, 0);
    transform: scale3d(0.3, 0.3, 0.3) translate3d(0, -25%, 0);
  }

  50% {opacity:1;}
}
.zoomIn {
  -webkit-animation-name: zoomIn;
  animation-name: zoomIn;
}

/* fadeIn */
@-webkit-keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}
@keyframes fadeIn {
  from {opacity:0;}
  to {opacity:1;}
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

/* fadeInRight */
@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(25%, 0, 0);
    transform: translate3d(25%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight {
  -webkit-animation-name: fadeInRight;
  animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRight-s {
  from {
    opacity: 0;
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInRight-s {
  from {
    opacity: 0;
    -webkit-transform: translate3d(5%, 0, 0);
    transform: translate3d(5%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.fadeInRight-s {
  -webkit-animation-name: fadeInRight-s;
  animation-name: fadeInRight-s;
}

/* 區塊移動用fadeInUp */
@-webkit-keyframes blockUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes blockUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 15%, 0);
    transform: translate3d(0, 15%, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.blockUp {
  -webkit-animation-name: blockUp;
  animation-name: blockUp;
}

/* pulse */
@-webkit-keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(0.95, 0.95, 0.95);
    transform: scale3d(0.95, 0.95, 0.95);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}

@keyframes pulse {
  from {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
  50% {
    -webkit-transform: scale3d(0.95, 0.95, 0.95);
    transform: scale3d(0.95, 0.95, 0.95);
  }
  to {
    -webkit-transform: scale3d(1, 1, 1);
    transform: scale3d(1, 1, 1);
  }
}
.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}


/* pigmove */
@-webkit-keyframes pigmove {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes pigmove {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-25%, 0, 0);
    transform: translate3d(-25%, 0, 0);
  }
  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
.pigmove {
  -webkit-animation-name: pigmove;
  animation-name: pigmove;
}