/* prefixed by https://autoprefixer.github.io (PostCSS: v7.0.26, autoprefixer: v9.7.3) */

@charset "utf-8";
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
body,html{margin:0;height:100%}
body{height:100%;width:100%;margin:0;padding:0}
body{font-size:100%;line-height:1.5;font-family:Arial,"Noto Sans TC","LiHei Pro",Gotham,"Helvetica Neue",Helvetica,sans-serif;color:#393939;position:relative;background:#fcfdfe}
a:focus{outline:0}
a{text-decoration:none;color:#000}
a:hover{text-decoration:none;color:#fff}
img{border:0 none;line-height:0;display:block}
form{margin:0;padding:0}
ol,ol li,ul,ul li{margin:0;padding:0;list-style-type:none}
dd,dl,dt{margin:0;padding:0}
dl{height:1%}
button{border:0 none;cursor:pointer;padding:0;margin:0;background:0 0}
.clearfix:after,.clearfix:before{content:"";display:table;height:0;overflow:hidden}
.clearfix:after{clear:both}
.clearfix{zoom:1}
h1,h2,h3,h6,p{margin:0;padding:0}
/*----------------------------------------------*/
.Wrapper{width:950px;margin:auto;position:relative}
.Header{background:url(../images/kv.jpg) no-repeat center top;height: 549px;}
.WordBlock{padding: 80px 0 0 295px;width: 70%}
.Date{font-size: 1.25rem; text-align: center;margin-bottom: 5%;}
.DateBlock{font-size: 0.938rem;color:#fff;background-image: -moz-linear-gradient( 112deg, rgb(77,67,71) 0%, rgb(126,108,110) 100%);background-image: -webkit-linear-gradient( 112deg, rgb(77,67,71) 0%, rgb(126,108,110) 100%);background-image: -ms-linear-gradient( 112deg, rgb(77,67,71) 0%, rgb(126,108,110) 100%); display: inline-block;padding:.5% 3%; border-radius: 50px;margin-left: 3px;vertical-align: middle;}
h1{color: #7e6c6e;font-size: 4.875rem; text-align: center;line-height: 1.2; font-weight: 400; letter-spacing: 3px;margin-bottom: 2%;}
h2{text-align: center;font-size: 2rem;letter-spacing: 3px;font-weight: 400;line-height: 1.3;}
.Dollor{font-size: 3.125rem;letter-spacing: -1px;color: #db2a21;font-weight: bold;}
#ImgBlock{background-color: #db2a21; color: #fff;}
#ImgBlock .Wrapper{padding: 2% 1%;}
.Wording{text-align: center;font-size: 1.5rem; margin-bottom: 5%;}
.Yellow{color: #fff150;font-weight: bold; }
.Fllow{display: -webkit-box;display: -ms-flexbox;display: flex;margin-bottom: 2%;}
.Fllow li{font-size: 1.5rem; text-align: center;margin:auto;}
.Fllow li i{margin-bottom: 5%; width: 213px; height: 213px;display: block;}
.Fllow li:nth-child(1) i{background:url(../images/Icon01.png) no-repeat;background-size: 100%; }
.Fllow li:nth-child(2) i{background:url(../images/Icon02.png) no-repeat;background-size: 100%; }
.Fllow li:nth-child(3) i{background:url(../images/Icon03.png) no-repeat;background-size: 100%; }
.Fllow li:nth-child(4) i{background:url(../images/Icon04.png) no-repeat;background-size: 100%; }
.Total{text-align: center; font-size: 3.438rem; letter-spacing: 10px}
.Total span{letter-spacing: -1px;font-weight: bold;font-size: 5.438rem}
#Form .Wrapper{padding: 2% 1%; text-align: center;-webkit-box-sizing: border-box;box-sizing: border-box;}
.FormBlock{font-size: 1.5rem;letter-spacing: 3px;line-height: 1.8;}
.FormTitle{ color: #db2a21;}
.FridayDoll{position: relative;width: 182px;height: 0;margin: 5% auto 0;padding-bottom: 29%;}
.Dollbg1{ background:url(../images/doll.png) no-repeat;background-size: 100%; z-index: 2;}
.Doll{position: absolute; left: 0;right: 0;bottom: 0;top: 0;}
.FormTitle{position: relative;z-index: 4;margin-top: -7%;}
#iframe{position:relative;z-index: 4;}
.jump {	-webkit-transform-origin: 50% 50%;	-ms-transform-origin: 50% 50%;	transform-origin: 50% 50%;	-webkit-animation: jump 2s linear alternate infinite;	animation: jump 2s linear alternate infinite;}
.Desc{display: block;}
.Mobile{display: none;}
.wow:first-child{visibility:hidden}
.wow+.wow{visibility:hidden}
@-webkit-keyframes jump {
	0%   {-webkit-transform: translate3d(0,0%,0) scale3d(1,1,1);transform: translate3d(0,0%,0) scale3d(1,1,1);}
	10%  {-webkit-transform: translate3d(0,-5%,0) scale3d(.9,1.1,1);transform: translate3d(0,-5%,0) scale3d(.9,1.1,1);}
	25% {-webkit-transform: translate3d(0,-15%,0) scale3d(1.1,.9,1);transform: translate3d(0,-15%,0) scale3d(1.1,.9,1);}
	40% {-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);transform: translate3d(0,0,0) scale3d(1,1,1);}
}
@keyframes jump {
	0%   {-webkit-transform: translate3d(0,0%,0) scale3d(1,1,1);transform: translate3d(0,0%,0) scale3d(1,1,1);}
	10%  {-webkit-transform: translate3d(0,-5%,0) scale3d(.9,1.1,1);transform: translate3d(0,-5%,0) scale3d(.9,1.1,1);}
	25% {-webkit-transform: translate3d(0,-15%,0) scale3d(1.1,.9,1);transform: translate3d(0,-15%,0) scale3d(1.1,.9,1);}
	40% {-webkit-transform: translate3d(0,0,0) scale3d(1,1,1);transform: translate3d(0,0,0) scale3d(1,1,1);}
}


@media screen and (max-width:905px){
	.Wrapper{width: 100%;}
	#iframe{height: 1860px;}
	.Header{height: 0;padding-bottom: 71%;background-size: 250%;background-position: center bottom;}
	.WordBlock{padding:6% 0 0 25%;width: 100%;-webkit-box-sizing: border-box;box-sizing: border-box;}
	.Date{font-size: 4vmin;}
	.DateBlock{font-size: 3vmin;display: block;width: 50%;margin: auto;}
	h1{font-size: 8vmin;letter-spacing: 1px;}
	h2{font-size: 4vmin;line-height: 1.2;}
	.Dollor{font-size: 7vmin;}
	#ImgBlock .Wrapper{padding: 5% 2%;-webkit-box-sizing: border-box;box-sizing: border-box;}
	.Wording{font-size: 4vmin;}
	.Fllow li{width: 23%;font-size: 4vmin;margin:1%;}
	.Fllow li i{width: 100%;height: 0;padding-bottom: 100%;}
	.Total{font-size: 5vmin;letter-spacing: inherit;}
	.Total span{font-size: 7vmin;}
	.FridayDoll{width: 91px; height: 91px;padding-bottom: 10%;}
	.Desc{display: none;}
	.Mobile{display: block;}
}
/*----------------------------------------------*/
@media screen and (max-width:608px){
	h1{font-size: 11vmin;letter-spacing: 1px;}
	h2{font-size: 4vmin}
	.Dollor{font-size: 6vmin;}
	.Fllow{-ms-flex-flow: wrap;flex-flow: wrap;}
	.Wording{font-size: 4vmin;}
	.Fllow{-ms-flex-flow: wrap;flex-flow: wrap;}
	.Fllow li{width: 50%;font-size: 4vmin;margin:2% 0;}
	.Fllow li i{width: 80%;height: 0;padding-bottom: 83%;margin: auto;}
	.Total{font-size: 7vmin;letter-spacing: inherit;}
	.Total span{font-size: 11vmin;}
	.FormBlock{font-size: 4vmin;letter-spacing: inherit}
	.FormTitle{margin-top: -15%;}
	.FridayDoll{padding-bottom: 20%;}
	.FormWording{margin: 3%;}
	.Fllow li:nth-child(3){animation-delay: 0.2s!important}
	.Fllow li:nth-child(4){animation-delay: 0.4s!important}
}
@media screen and (max-width:321px){
	#iframe{height: 1955px;}


}