@charset "UTF-8";
html, body, div, span, iframe,h1, h2, h3, h4, h5, h6, p,a, em, img,
b, u, i, dl, dt, dd, ol, ul, li,form, label, article, aside, nav {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit; vertical-align: baseline;}
article, aside,footer, header, menu, nav{display: block;}
body {line-height: 1;}
ol, ul { list-style: none;}
blockquote, q { quotes: none;}
table {border-collapse:collapse; border-spacing: 0;}
body { font-family: "微軟正黑體" !important;}
.clearfix {clear: both;}

header{background:url(../images/header.jpg);width: 100%;padding-top: 100px;position: relative;height: 1100px;overflow: hidden;}

header .leafList{position: absolute;top: 0;left: 0;width: 100%;height:100%;}

.leafList li{position: absolute;top:-5%;animation: down 10s linear;animation-iteration-count:4;}
.leafList li:nth-child(1){left:10%;}
.leafList li:nth-child(2){left:75%;animation-delay:4s;}
.leafList li:nth-child(3){left:90%;animation-delay:2s;}
@keyframes down{
0%{top:-5%;opacity:1;}
95%{top:92%;opacity:1;}
100%{top: 100%;opacity:0;}
}

.leafList img{transform-origin: 50% -50%;animation:shakeLeaf 2s linear infinite;}
.leafList li:nth-child(1) img{animation-duration:7s;}
.leafList li:nth-child(2) img{animation-duration:5s;animation-delay:2.3s;}
.leafList li:nth-child(3) img{animation-duration:9s;animation-delay:1.2s;}
@keyframes shakeLeaf{
    0%{transform:rotateZ(0deg) translateX(0);}
    100%{transform:rotateZ(360deg) translateX(10px);}
}
header .flower-1{position: absolute;top:8%;left: 10%;animation:floRo 2s linear;z-index: 5;}
header .flower-1::after{content:'';display: block;background:url(../images/header-leaf-1.png)no-repeat;width: 95px;height: 57px;position: absolute;top: 30%;left:-30%;z-index: -1;background-size:100% 100%;animation:grow 1s linear;animation-delay:2s;animation-fill-mode: both; transform-origin:100% center;}
@keyframes grow{
0%{transform: scaleX(0);}
100%{transform: scaleX(1);}
}
header .flower-2{position: absolute;top:35%;left:32%;animation:floRo 2s linear;}
header .flower-3{position: absolute;top:15%;right:15%;animation:floRo 2s linear;}

@keyframes floRo{
0%{transform: rotateZ(0) scale(0);}
100%{transform: rotateZ(360deg) scale(1);}
}

header h2{font-size: 88px;text-align: center;color: #ffb310;line-height: 1.2;margin-bottom: 50px;}
header h2 span{font-size: 62px;display: block;}
header h2::after{content:'公職王新春敬賀';font-size: 50px;display: block;width: 100%;}

main{text-align: center;}
main{position: relative;background-position: center;}
main::after{content:'';display: block;width: 100%;height: 100%; position: absolute;top: 0;left: 0;background: url(../images/head.png)no-repeat;background-size: cover;background-position: center;}

footer{padding: 20px 0;position: absolute;bottom: 0;left: 0;right: 0;width: 100%;}
footer p{color: #fff;font-size: 15px;text-align: center;}

@media(max-width:1200px){
    header{height: auto;padding:0;}
    header .flower-1{top:3%;left: 10%;}
    header .flower-3{right:5%;top: 11%;}
    main{margin: 80px 0;}
    main img{width: 90%;}
    footer{position: static;}
}

@media(max-width:768px){
    header h2{font-size:70px;}  
    main {
        margin:60px 0;
    }
}

@media(max-width:600px){
    header h2{font-size:34px;}
    header h2 span{font-size: 55px;}
    header h2::after{font-size: 34px;}
    header .flower-1{width: 15%;left: 15%;}
    header .flower-1 img{width: 100%;}
    header .flower-1::after{width:60px;height:30px;top: 16%;left: unset;right:10px;}
    header .flower-2{display: none;}
    main{margin:50px 0;}
    footer p{font-size: 14px;line-height: 1.3;}
}