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

body, html {text-rendering:optimizeLegibility !important; -webkit-font-smoothing:antialiased !important; width:100% !important; min-width:320px; min-width:1024 \9; min-height:100%; height:100% !important; margin:0px; padding:0px; -webkit-text-size-adjust:100%; font-family:Helvetica,Arial,'微軟正黑體','Microsoft JhengHei',sans-serif; color:#000000; background-color:#FFFFFF; background-color:#452d1c; background-image:url("../images/bgpattern.png"); background-repeat:repeat; background-size:60px;}

*{box-sizing:border-box; user-select:none;}
a{border:0px;}

#EnterWrapper{width:100%; height:100%; max-width:700px; margin:auto; display:table; overflow-x:hidden;}
#EnterContainer{width:100%; height:100%; display:table-cell; vertical-align:middle; font-size:0px;}
#EnterGraphic{width:100%; display:block; -webkit-animation:ScaleHeadline 2.5s ease-in-out forwards .1s; -moz-animation:ScaleHeadline 2.5s ease-in-out forwards .1s; -o-animation:ScaleHeadline 2.5s ease-in-out forwards .1s; animation:ScaleHeadline 2.5s ease-in-out forwards .1s;}
#EnterGraphic img{width:100%;}
#EnterNav{width:100%; margin:10px 0px; overflow:hidden; list-style:none; font-size:0px;}
#EnterNav a{display:inline-block; vertical-align:top; width:50%; max-width:350px; overflow:hidden;}
#EnterNav a img{width:100%; cursor:pointer;}
#EnterLogo{width:100%; margin-top:10%; overflow:hidden; text-align:center;}
#EnterLogo img{width:100%; max-width:200px;}
#EnterDisclaimer{width:100%; font-size:9px; text-align:justify; padding:5%;}
#EnterSNS{width:100%; display:block; font-size:0px; list-style:none; text-align:center; padding:0px; margin:10% 0px 10% 0px;}
#EnterSNS > li{width:25%; max-width:80px; padding:0px; margin:0.5%; display:inline-block; vertical-align:top; position:relative; cursor:pointer;}
#EnterSNS > li > img{width:100%; z-index:2;}
#EnterSNS > li::after{content:""; width:90%; height:90%; border-radius:50%; background-color:transparent; -webkit-box-shadow:0px 10px 30px -10px rgba(0,0,0,1); box-shadow:0px 10px 30px -10px rgba(0,0,0,1); position:absolute; top:5%; left:5%;}
#EnterSNS > li.ShareMsg{width:100%; max-width:100%; font-size:16px; color:#000000; height:auto; padding:10px;}
#EnterSNS > li.ShareMsg::after{-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,1);box-shadow:0px 0px 0px 0px rgba(0,0,0,1); border-radius:0px;}



#AlbumWrapper{width:100%; height:100%; max-width:1024px; margin:auto;}
#AlbumHeader{width:100%; margin:5% 0%; text-align:center;}
#AlbumHeader img{width:100%; max-width:900px;}
#AlbumMessage{width:100%; margin:5% 00%; font-size:20px; text-align:center;}
#AlbumList{width:100%; display:block; font-size:0px; margin:5% 0%; line-height:0px;padding: 0;}
#AlbumList li{width:50%; display:inline-block; padding:2%; vertical-align:top; text-align:center;}
#AlbumList li img{width:100%; display:block; -webkit-box-shadow:0px 20px 30px -10px rgba(0,0,0,0.6); box-shadow:0px 20px 30px -10px rgba(0,0,0,0.5);}
#AlbumNav{width:100%; margin:10px 0px; overflow:hidden; list-style:none; font-size:0px; text-align:center;}
#AlbumNav a{display:inline-block; vertical-align:top; width:50%; max-width:350px; overflow:hidden;}
#AlbumNav a img{width:100%; cursor:pointer;}
#AlbumLogo{width:100%; margin-top:10%; overflow:hidden; text-align:center;}
#AlbumLogo img{width:100%; max-width:200px;}
#AlbumDisclaimer{width:100%; font-size:9px; text-align:justify; padding:5%;}
#AlbumSNS{width:100%; display:block; font-size:0px; list-style:none; text-align:center; padding:0px; margin:10% 0px 0px 0px;}
#AlbumSNS > li{width:25%; max-width:80px; padding:0px; margin:0.5%; display:inline-block; vertical-align:top; position:relative; cursor:pointer;}
#AlbumSNS > li > img{width:100%; z-index:2;}
#AlbumSNS > li::after{content:""; width:90%; height:90%; border-radius:50%; background-color:transparent; -webkit-box-shadow:0px 10px 30px -10px rgba(0,0,0,1); box-shadow:0px 10px 30px -10px rgba(0,0,0,1); position:absolute; top:5%; left:5%;}
#AlbumSNS > li.ShareMsg{width:100%; max-width:100%; font-size:16px; color:#000000; height:auto; padding:10px;}
#AlbumSNS > li.ShareMsg::after{-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,1);box-shadow:0px 0px 0px 0px rgba(0,0,0,1); border-radius:0px;}



#MainWrapper{width:100%; height:100%; min-width:480px; position:relative; margin:auto; display:flex; flex-wrap:wrap;}
#StageWrapper{width:100%; height:1080px; max-height:1080px; min-height:200px; margin:0px; padding:0px; overflow:hidden; position:relative; background:rgb(251,218,62); background:-moz-linear-gradient(top, rgba(251,218,62,1) 0%, rgba(66,181,214,1) 30%); background:-webkit-linear-gradient(top, rgba(251,218,62,1) 0%,rgba(66,181,214,1) 30%); background:linear-gradient(to bottom, rgba(251,218,62,1) 0%,rgba(66,181,214,1) 30%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#fbda3e', endColorstr='#42b5d6',GradientType=0 ); -webkit-box-shadow:0px 20px 70px -10px rgba(0,0,0,1); box-shadow:0px 20px 80px -10px rgba(0,0,0,1);}
#StageBefore{width:100%; height:auto; margin:0px; padding:0px; background-color:transparent;}
#StagePlayground{width:100%; height:24%; position:absolute; bottom:0%; left:0%; overflow:hidden; background-image:url("../images/playground.png"); background-repeat:repeat-x; background-size:auto 100%; background-position:center bottom; z-index:20;}
#Years25Logo{position:absolute; top:5%; right:5%; overflow:hidden; background-image:url("../images/25yearslogo.png"); background-repeat:no-repeat; background-size:auto 100%; background-position:right top; z-index:1000000; cursor:pointer;}
#StageTree{width:100%; height:28%; position:absolute; bottom:20%; left:0%; overflow:hidden; background-image:url("../images/tree.png"); background-repeat:repeat-x; background-size:auto 100%; background-position:center bottom; z-index:10;}
#StageCloudFront{width:100%; height:46%; position:absolute; bottom:20%; left:0%; overflow:hidden; background-image:url("../images/cloud_front.png"); background-repeat:repeat-x; background-size:auto 90%; background-position:center bottom; z-index:9;}
#StageCloudBack{width:100%; height:48%; position:absolute; bottom:16%; left:0%; overflow:hidden; background-image:url("../images/cloud_back.png"); background-repeat:repeat-x; background-size:auto 100%; background-position:center bottom; z-index:8;}
#StageWheel{height:60%; position:absolute; bottom:20%; left:7%; overflow:hidden; background-image:url("../images/wheel.png"); background-repeat:no-repeat; opacity:0.2; background-size:auto 100%; background-position:left 10% center; z-index:7; -webkit-transform-origin:center center; -moz-transform-origin:center center; -o-transform-origin:center center; transform-origin:center center; -webkit-animation:RotateWheel 60s linear infinite; -moz-animation:RotateWheel 60s linear infinite; -o-animation:RotateWheel 60s linear infinite; animation:RotateWheel 60s linear infinite;}
#Billboard{width:40%; height:100%; position:absolute; bottom:5%; right:10%; overflow:hidden; background-image:url("../images/billboard.png"); background-repeat:no-repeat; background-size:contain; background-position:center bottom; z-index:1;}
#ContentWrapper{width:100%; max-width:1920px; height:86%; position:relative; margin:0% auto; z-index:100; display:table; border-spacing:0px; border-collapse:collapse;}
#Hole{display:table-cell; width:20%; height:100%; background-image:url("../images/hole.png"); background-repeat:no-repeat; background-size:80% auto; background-position:right bottom -5%;}
#Grassland{display:table-cell; width:80%; height:100%; position:relative;}
#DeviceGroup{width:22%; height:100%; position:absolute; bottom:0%; left:35%; overflow:visible; z-index:20;}
#Base{width:44%; position:absolute; bottom:0%; left:29%; overflow:hidden; z-index:3;}
#Device{width:100%; position:absolute; left:0%; bottom:12.3%; z-index:1; -webkit-transform-origin:center bottom; -moz-transform-origin:center bottom; -o-transform-origin:center bottom; transform-origin:center bottom; -webkit-animation:RotateDevice 3s ease-in-out alternate infinite; -moz-animation:RotateDevice 3s ease-in-out alternate infinite; -o-animation:RotateDevice 3s ease-in-out alternate infinite; animation:RotateDevice 3s ease-in-out alternate infinite; transform:rotate(10deg);}
#PigGroupA{width:50%; position:absolute; left:0%; bottom:12.8%; z-index:2; -webkit-transform-origin:right bottom; -moz-transform-origin:right bottom; -o-transform-origin:right bottom; transform-origin:right bottom; -webkit-animation:RotateDevice 3s ease-in-out alternate infinite; -moz-animation:RotateDevice 3s ease-in-out alternate infinite; -o-animation:RotateDevice 3s ease-in-out alternate infinite; animation:RotateDevice 3s ease-in-out alternate infinite; transform:rotate(10deg);}
#PigGroupB{width:50%; position:absolute; right:0%; bottom:12.5%; z-index:2;-webkit-transform-origin:left bottom; -moz-transform-origin:left bottom; -o-transform-origin:left bottom; transform-origin:left bottom; -webkit-animation:RotateDevice 3s ease-in-out alternate infinite; -moz-animation:RotateDevice 3s ease-in-out alternate infinite; -o-animation:RotateDevice 3s ease-in-out alternate infinite; animation:RotateDevice 3s ease-in-out alternate infinite; transform:rotate(10deg);}
#PigA{width:70%; left:18%; bottom:0%; z-index:1;}
#PigB{width:43%; left:0%; bottom:0%; z-index:2;}
#PigC{width:43%; right:0%; bottom:0%; z-index:2;}
#PigD{width:80%; left:10%; bottom:0%; z-index:1;}
#Base img, #Device img{width:100%;}
.Pig{position:absolute; overflow:hidden;}
.Pig > img{width:100%;}
#Pig01{width:12%; left:0%; bottom:5%; z-index:5;}
#Pig02{width:9%; left:6%; bottom:7%; z-index:4;}
#Pig03{width:7.5%; left:15%; bottom:8.2%; z-index:2;}
#Pig04{width:13%; left:45.5%; bottom:4%; z-index:6;}
#Pig05{width:8%; left:55%; bottom:7%; z-index:1;}
#Pig06{width:9.5%; left:60%; bottom:6%; z-index:3;}
#Pig07{width:10.5%; left:65%; bottom:4.2%; z-index:4;}
#Pig08{width:8%; left:70%; bottom:6.8%; z-index:3;}
#Pig09{width:6%; left:74%; bottom:6%; z-index:4;}
#Pig10{width:9%; left:78%; bottom:5%; z-index:6;}
#Pig11{width:7.5%; left:83%; bottom:6%; z-index:5;}
#Pig12{width:6%; left:87%; bottom:5.5%; z-index:6;}
#Pig13{width:5%; left:13%; bottom:8%; z-index:2;}
#Pig14{width:4%; left:11%; bottom:9%; z-index:1;}
#Pig15{width:4%; left:19.5%; bottom:8.5%; z-index:1;}
#Pig16{width:4%; left:25%; bottom:8.5%; z-index:1;}
#Pig17{width:6%; left:28%; bottom:7%; z-index:1;}
#Pig18{width:5%; left:22.3%; bottom:7.5%; z-index:1;}
#Pig19{width:5%; left:35.2%; bottom:7.5%; z-index:2;}
#Pig20{width:3%; left:38.8%; bottom:8%; z-index:1;}
#Pig21{width:6%; left:40.5%; bottom:6.5%; z-index:2;}
#Pig22{width:5%; left:44%; bottom:8%; z-index:1;}
#PigSelected{width:38%; bottom:-15%; left:35%; z-index:10; display:none; opacity:0;}
#ControllButton{width:100%; height:12%; position:absolute; bottom:2%; z-index:1000; text-align:center; font-size:0px;}
#ControllButton .Button{height:100%; display:inline-block; vertical-align:top; margin:0% 1%; position:relative; cursor:pointer;}
#ControllButton .Button::after{content:""; width:98%; height:98%; border-radius:50%; background-color:#000000; -webkit-box-shadow:0px 20px 70px -10px rgba(0,0,0,1); box-shadow:0px 20px 80px -10px rgba(0,0,0,1); position:absolute; top:1%; left:1%;}
#ControllButton .Button div{height:100%; position:absolute; top:0%; left:0%; z-index:1;}
#ControllButton .Button div img{height:100%;width: 100%;}
#ControllButton .Button div.Inner{z-index:2;}
#ControllButton .Button div.Symbol{z-index:3;}

#CarrierWrapper{z-index:10; position:absolute; top:-2px; left:40%; height:100%; width:20%; overflow:hidden;}
#CarrierContainer{position:absolute; top:-80%; left:0%; width:100%; height:100%;}
#CarrierLine{width:6px; background-color:#545454; height:97%; position:absolute; top:0%; left:calc(50% - 2px);}
#CarrierHead{width:40%; height:6px; background-color:transparent; background-color:#545454; position:absolute; top:97%; left:30%; z-index:2;}
#CarrierHead::before{display:block; width:20px; height:20px; background-color:#333333; position:absolute; top:-5px; left:-3px; content:""; border-radius:50%; overflow:hidden;}
#CarrierHead::after{display:block; width:20px; height:20px; background-color:#333333; position:absolute; top:-5px; right:-3px; content:""; border-radius:50%; overflow:hidden;}
.Arm{width:6px; height:80px; position:absolute; top:97%; background-color:#545454; font-size:0px; -webkit-transform-origin:top center; transform-origin:top center;}
#CarrierLeft{-webkit-transform:rotate(35deg); transform:rotate(35deg); left:31%;}
#CarrierRight{-webkit-transform:rotate(-35deg); transform:rotate(-35deg); left:67%;}
#PhotoAlbum{width:22%; position:absolute; top:5%; left:3%; z-index:10000; cursor:pointer;}
#PhotoAlbum img{width:100%; }

#LuckyContainer{display:none; width:100%; height:80%; margin:0%; position:absolute; bottom:10%; left:0%; opacity:0; z-index:100000000; font-size:0px;}
#LuckyCard{display:inline-block; vertical-align:middle; width:50%; height:100%; overflow:visible; margin:0%; }
#LuckyCard > div{display:block; margin:auto 5% auto auto; -webkit-box-shadow:0px 20px 70px -10px rgba(0,0,0,1); box-shadow:0px 20px 80px -10px rgba(0,0,0,1);}
#LuckyGreeting{width:50%; height:auto; overflow:hidden; display:inline-block; vertical-align:middle; padding:5%;}
#LuckyGreeting > div{width:100%; display:block; vertical-align:middle;}
#SNS{width:100%; display:block; font-size:0px; list-style:none; text-align:left; padding:0px; margin:10% 0px 0px 0px;}
#SNS > li{width:25%; max-width:80px; padding:0px; margin:0.5%; display:inline-block; vertical-align:top; position:relative; cursor:pointer;}
#SNS > li > img{width:100%; z-index:2;}
#SNS > li::after{content:""; width:90%; height:90%; border-radius:50%; background-color:transparent; -webkit-box-shadow:0px 10px 30px -10px rgba(0,0,0,1); box-shadow:0px 10px 30px -10px rgba(0,0,0,1); position:absolute; top:5%; left:5%;}
#SNS > li.ShareMsg{width:100%; max-width:100%; font-size:16px; color:#000000; height:auto; padding:10px;}
#SNS > li.ShareMsg::after{-webkit-box-shadow:0px 0px 0px 0px rgba(0,0,0,1);box-shadow:0px 0px 0px 0px rgba(0,0,0,1); border-radius:0px !important;}
#Nav{width:100%; margin:10px 0px; overflow:hidden; list-style:none; font-size:0px;}
#Nav a{display:inline-block; vertical-align:top; width:50%; max-width:350px; overflow:hidden;}
#Nav a img{width:100%; cursor:pointer;}
#EndLogo{width:100%; margin-top:10%; overflow:hidden;}
#EndLogo img{width:100%; max-width:200px;}
#Disclaimer{width:100%; font-size:9px; text-align:justify; margin-top:3%;}
#WhatsApp{display:none !important;}
#ControllerCaption{position:absolute; width:30%; top:15%; left:3.5%; font-size:16px; color:#333333; text-align:left !important;}


@media screen and (-ms-high-contrast:active), (-ms-high-contrast:none) {
	 #Grassland{position:absolute;}
}
@supports (-ms-ime-align:auto) {
  #Grassland{position:relative;}
}

@media only screen and (max-width: 1080px) {
	#LuckyCard > div{margin:auto !important;}
	#ControllerCaption{font-size:15px;}
}

@media only screen and (max-width: 840px){
	#CarrierLine{width:4px;}
	#CarrierHead::before, #CarrierHead::after{width:14px; height:14px;}
	#CarrierHead{height:4px;}
	.Arm{width:4px; height:60px; }
	#ControllerCaption{font-size:10px;}
}

@media only screen and (max-width: 600px){
	#AlbumList li{width:100%;}
	#ControllerCaption{font-size:9px;}
}
@media only screen and (max-width: 480px){
	.Arm{height:40px; }
	#LuckyContainer{height:90%; bottom:5%;}
	#LuckyGreeting{padding-top:2%; padding-bottom:1%;}
	#LuckyCard, #LuckyGreeting{display:block; width:100%;}
	#LuckyCard{overflow:visible; height:auto;}
	#LuckyCard > div{width:80%; margin:0% 10%; overflow:visible;}
	#LuckyCard > div > img{width:100%;}
	#Nav a{width:100%; max-width:250px; display:block; margin:0px auto;}
	#SNS, #SNS li{text-align:center;}
	#EndLogo{text-align:center;}
	#Disclaimer{font-size:8px; line-height:100%; padding:10px 0px;}
}
@media only screen and (orientation: portrait) and (max-device-width: 767px)  and (-webkit-min-device-pixel-ratio: 2) {
	#MainWrapper{min-width:0;}
	#LuckyContainer{height:90%; bottom:5%;}
	#LuckyGreeting{padding-top:2%; padding-bottom:1%;}
	#LuckyCard, #LuckyGreeting{display:block; width:100%;}
	#LuckyCard{overflow:visible; height:auto;}
	#LuckyCard > div{width:80%; margin:0% 10%; overflow:visible;}
	#LuckyCard > div > img{width:100%;}
	#Nav a{width:100%; max-width:250px; display:block; margin:0px auto;}
	#SNS, #SNS li{text-align:center;}
	#EndLogo{text-align:center;}
	#Disclaimer{font-size:8px; line-height:100%; padding:10px 0px;}
	#WhatsApp{display:inline-block !important;}
}
@media only screen and (orientation: landscape) and (max-device-width: 1023px) and (-webkit-min-device-pixel-ratio: 2) {
	#LuckyContainer{height:90%; bottom:5%;}
	#LuckyGreeting{padding-top:0%; padding-bottom:0%;}
	#LuckyCard, #LuckyGreeting{display:inline-block; width:50%; vertical-align:top;}
	#LuckyCard{width:30%;}
	#LuckyGreeting{width:70%;}
	#LuckyCard{overflow:visible;}
	#LuckyCard > div{width:auto; height:100%; margin:0% 10%; overflow:visible; display:inline-block;}
	#LuckyCard > div > img{height:100%;}
	#SNS li{width:50px;}
	#SNS > li.ShareMsg{width:auto; display:inline-block;}
	#EndLogo{text-align:center; width:120px; margin-top:10px;}
	#Nav{margin-top:1%;}
	#Disclaimer{font-size:8px; line-height:100%; margin-top:2px;}
	#EnterContainer{padding-top:5%; padding-bottom:5%;}
	#EnterGraphic{width:60%; display:inline-block; vertical-align:top;}
	#EnterNav{width:40%; display:inline-block; vertical-align:top; padding-top:7%;}
	#EnterNav a{width:100%; display:block; margin:15px 0px;}
	#WhatsApp{display:inline-block !important;}
}

@-webkit-keyframes RotateWheel {
  0%   {-webkit-transform:rotate(0deg); transform:rotate(0deg);}
  100% {-webkit-transform:rotate(360deg); transform:rotate(360deg);}
}
@-moz-keyframes RotateWheel {
  0%   {-moz-transform:rotate(0deg); transform:rotate(0deg);}
  100% {-moz-transform:rotate(360deg); transform:rotate(360deg);}
}
@-o-keyframes RotateWheel {
  0%   {-o-transform:rotate(0deg); transform:rotate(0deg);}
  100% {-o-transform:rotate(360deg); transform:rotate(360deg);}
}
@keyframes RotateWheel {
  0%   {transform:rotate(0deg);}
  100% {transform:rotate(360deg);}
}
@-webkit-keyframes RotateDevice {
  0%  {-webkit-transform:rotate(10deg); transform:rotate(10deg);}
  100% {-webkit-transform:rotate(-10deg); transform:rotate(-10deg);}
}
@-moz-keyframes RotateDevice {
  0%  {-moz-transform:rotate(10deg); transform:rotate(10deg);}
  100% {-moz-transform:rotate(-10deg); transform:rotate(-10deg);}
}
@-o-keyframes RotateDevice {
  0%  {-o-transform:rotate(10deg); transform:rotate(10deg);}
  100% {-o-transform:rotate(-10deg); transform:rotate(-10deg);}
}
@keyframes RotateDevice {
  0%  {transform:rotate(10deg);}
  100% {transform:rotate(-10deg);}
}

@-webkit-keyframes ScaleHeadline {
  0%   {-webkit-transform:scale(0.7,0.7);}
  10%  {-webkit-transform:scale(1.3, 1.3);}
  22%  {-webkit-transform:scale(0.8,0.8);}
  36%  {-webkit-transform:scale(1.1,1.1);}
  60%  {-webkit-transform:scale(0.95,0.95);}
  100% {-webkit-transform:scale(1,1);}
}
@-moz-keyframes ScaleHeadline {
  0%   {-moz-transform:scale(0.7,0.7);}
  10%  {-moz-transform:scale(1.3, 1.3);}
  22%  {-moz-transform:scale(0.8,0.8);}
  36%  {-moz-transform:scale(1.1,1.1);}
  60%  {-moz-transform:scale(0.95,0.95);}
  100% {-moz-transform:scale(1,1);}
}
@-o-keyframes ScaleHeadline {
  0%   {-o-transform:scale(0.7,0.7);}
  10%  {-o-transform:scale(1.3, 1.3);}
  22%  {-o-transform:scale(0.8,0.8);}
  36%  {-o-transform:scale(1.1,1.1);}
  60%  {-o-transform:scale(0.95,0.95);}
  100% {-o-transform:scale(1,1);}
}
@keyframes ScaleHeadline {
  0%   {transform:scale(0.7,0.7);}
  10%  {transform:scale(1.3, 1.3);}
  22%  {transform:scale(0.8,0.8);}
  36%  {transform:scale(1.1,1.1);}
  60%  {transform:scale(0.95,0.95);}
  100% {transform:scale(1,1);}
}