@import url(https://fonts.googleapis.com/earlyaccess/cwtexkai.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
@import url(https://fonts.googleapis.com/earlyaccess/cwtexming.css);

.wrapper{ position:relative; width:100%; text-align:left;  overflow: hidden; font-family:"Microsoft JhengHei","Apple LiGothic Medium"; height:942px; background:url(../images/bgM.jpg) center top repeat; }
.wrapper img{ border:0; vertical-align:top; width: 100%; }


/*1-首頁*/
.index1{background:url(../images/bg.jpg) center top no-repeat; padding-bottom: 100%;}
.index1 h2{width:869px; position: absolute; left:50%; top: 0;
    margin: 95px 0 0 -434px;}
.index1 h1 img{width: 190px; position: absolute; left:50%; }
.index1 h1 img.t1{margin: 196px 0 0 -272px; animation: t1 2.2s 1;}
.index1 h1 img.t2{margin: 196px 0 0 -92px; animation: t2 2.2s 1;}
.index1 h1 img.t3{margin: 196px 0 0 89px; animation: t3 2.2s 1;}
.index1 h1 img.t4{margin: 389px 0 0 -391px; animation: t4 2.2s 1;}
.index1 h1 img.t5{margin: 389px 0 0 -206px; animation: t5 2.2s 1;}
.index1 h1 img.t6{margin: 389px 0 0 -48px; animation: t6 2.2s 1;}
.index1 h1 img.t7{margin: 389px 0 0 104px; animation: t7 2.2s 1;}
.index1 h1 img.t8{margin: 389px 0 0 243px; animation: t8 2.2s 1;}
.index1 a.btnGo{display: block; width: 603px; padding-bottom:6.4%; background:url(../images/btnGo.png) no-repeat; position: absolute; left:50%; margin: 656px 0 0 -303px; transition: all 0.2s; animation: btnGo 0.4s linear infinite alternate;
    text-indent: -9999px;
    filter: drop-shadow(0px 7px 0px rgba(0,0,0,0.2));}
.index1 a.btnGo:hover{ filter: brightness(1.1) drop-shadow(0px 7px 0px rgba(0,0,0,0.2));}

@keyframes btnGo {
0% { transform: scale(1); }
100% {transform: scale(0.97);}
}

@keyframes t1 {
0% {opacity: 0; transform: scale(2);}
15% {opacity: 1; transform: scale(1);}
}
@keyframes t2 {
0% {opacity: 0; }
10% {opacity: 0; transform: scale(2);}
30% {opacity: 1; transform: scale(1);}
}
@keyframes t3 {
0% {opacity: 0; }
25% {opacity: 0; transform: scale(2);}
45% {opacity: 1; transform: scale(1);}
}
@keyframes t4 {
0% {opacity: 0; }
40% {opacity: 0; transform: scale(2);}
60% {opacity: 1; transform: scale(1);}
}
@keyframes t5 {
0% {opacity: 0; }
55% {opacity: 0; transform: scale(2);}
75% {opacity: 1; transform: scale(1);}
}
@keyframes t6 {
0% {opacity: 0; }
70% {opacity: 0; transform: scale(2);}
85% {opacity: 1; transform: scale(1);}
}
@keyframes t7 {
0% {opacity: 0; }
80% {opacity: 0; transform: scale(2);}
95% {opacity: 1; transform: scale(1);}
}
@keyframes t8 {
0% {opacity: 0; }
80% {opacity: 0; transform: scale(2);}
95% {opacity: 1; transform: scale(1);}
}



/*2-25%*/
.progress{background:url(../images/bg2.jpg) center top no-repeat; padding-bottom: 100%;}
.progress h1{position: absolute; left:50%; top:0; margin: 130px 0 0 -271px; width:540px; font-size: 30px; font-weight: bold; color: #fff; text-align: center;}
.progress h1 small{font-size: 65%;
    position: relative;
    top: -5px;}
    
.progress .pSelect{ width: 500px; position: absolute; left:50%; top:0; margin: 185px 0 0 -253px;}
.progress .pSelect img{width: 100%; height: 100%;}
.progress .pSelect img.setlogo{position: absolute; left:0; bottom:0; z-index: 99; width: 100%; height: auto;}

.progress .pChoose{position: absolute; left:50%; top:0; margin: 724px 0 0 -466px;}
.progress .pChoose li{display: block; position:relative; width: 70px; float: left;  margin: 0 0 0 7px; background:#000; transition: all 0.3s; }
.progress .pChoose li img{opacity: 0.5;}
.progress .pChoose li:hover img{opacity: 1; }
.progress .pChoose li.on img{opacity: 1; border:solid 4px #000; box-sizing: border-box;}

.progress a.btnUpload{display: block; width: 459px; height: 68px; background: url(../images/btnBG.png) no-repeat; text-align: center; font-size: 25px; color: #fff; position: absolute; left:50%; top:0; margin: 810px 0 0 -230px; text-decoration: none; letter-spacing: 0.1em; padding: 12px 0 0 0;}
.progress a.btnUpload small{font-size: 60%; letter-spacing:normal; position: relative;
    top: -6px;}
.progress a.btnUpload:hover{ filter: brightness(1.1); }

.progress a.btnNext{display: block; width: 309px; height: 265px; background: url(../images/btnNext.png) no-repeat; font-size: 25px; color: #fff; position: absolute; left:50%; top:0; margin: 427px 0 0 288px; text-decoration: none; padding:22px 0 0 19px; animation:btnNext 0.3s steps(3) infinite alternate; animation-play-state:paused;}
.progress a.btnNext:hover{animation-play-state:running;}
@keyframes btnNext {
   from { background-position: 0px; transform:translate(0,0) translate3d(0,0,0);}
     to { background-position: -927px; transform:translate(10px,-10px);}
}
.progress a.btnNext img{width: 24px; height: 21px; position: relative;
    top: 4px;}


.progress a.btnPrev{display: block; width: 309px; height: 265px; background: url(../images/btnPrev.png) no-repeat; font-size: 25px; color: #fff; position: absolute; left:50%; top:0; margin: 427px 0 0 -600px; text-decoration: none; padding:22px 0 0 101px; animation:btnPrev 0.3s steps(3) infinite alternate; animation-play-state:paused;}
.progress a.btnPrev:hover{animation-play-state:running;}
@keyframes btnPrev {
   from { background-position: 0px; transform:translate(0,0) translate3d(0,0,0);}
     to { background-position: -927px; transform:translate(-10px,-10px);}
}
.progress a.btnPrev img{width: 24px; height: 21px; position: relative;
    top: 4px; transform:scaleX(-1);}

/* 25.html lightbox style*/
.boxContent {
    width: 500px;
    height: 625px;
    position: fixed;
    top: 10%;
    left: 33%;
    z-index: 51;
    background: white;
    border-radius: 0 0 21px 21px;
    text-align: center;
    left: 50%;
    top: 50%;
    margin-left: -256px;
    margin-top: -360px;
    z-index: 99999;
}
.bottom {
    margin-top:50px;
}
.upload-msg {
    position: absolute;
    top: 20%;
    left: 25%;
}
#upload-result {
    width:100%;
    height:72px;
    background: url(../images/btnBG.png) no-repeat;
    background-size: cover;
}
#cancel-upload {
    width:100%;
    height:72px;
    background: url(../images/btnBG.png) no-repeat;
    background-size: cover;
}
input[type=range] {
    padding-top:0;
}
input[type=range]::-webkit-slider-runnable-track {
    height: 15px;
    background:#C2F9BB;
    /*background:#9AD1D4;*/
    border-radius: 10px; /*将轨道设为圆角的*/
    box-shadow: 0 1px 1px #def3f8, inset 0 .125em .125em #0d1112; /*轨道内置阴影效果*/
}
input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    height: 25px;
    width: 25px;
    margin-top: -6px;
    background: #ffffff; 
    border-radius: 50%; /*外观设置为圆形*/
    border: solid 0.125em rgba(205, 224, 230, 0.5); /*设置边框*/
    box-shadow: 0 .125em .125em #3b4547,0 .125em .125em black; /*添加底部阴影*/
}



/*media*/
@media screen and (max-width:1055px){
	.progress a.btnPrev {
    width: 235px;
    height: 210px;
    background: url(../images/btnPrevM.png) no-repeat;
    font-size: 20px;
    margin: 487px 0 0 -528px;
    padding: 17px 0 0 77px;
    background-size: contain; animation:btnPrevM 1s infinite alternate; animation-play-state:paused;}
    .progress a.btnPrev img {
    width: 18px;
    height: 17px;
    top: 3px;}

    @keyframes btnPrevM {
    0% { transform:translate(0,0) translate3d(0,0,0);}
    20% { transform:translate(-6px,-6px);}
    40% { transform:translate(0,0) translate3d(0,0,0);}
    60% { transform:translate(-6px,-6px);}
    80% { transform:translate(0,0) translate3d(0,0,0);}
    100% { transform:translate(-6px,-6px);}
 	}

 	.progress a.btnNext {
    width: 235px;
    height: 210px;
    background: url(../images/btnNextM.png) no-repeat;
    font-size: 20px;
    margin: 487px 0 0 289px;
    padding: 17px 0 0 12px;
    background-size: contain; animation:btnNextM 1s infinite alternate; animation-play-state:paused;}
    .progress a.btnNext img {
    width: 18px;
    height: 17px;
    top: 3px;}

    @keyframes btnNextM {
    0% { transform:translate(0,0) translate3d(0,0,0);}
    20% { transform:translate(6px,-6px);}
    40% { transform:translate(0,0) }
    60% { transform:translate(6px,-6px);}
    80% { transform:translate(0,0) }
    100% { transform:translate(6px,-6px);}
 	}

}/*media*/





/*3-50%*/
.progress .pSelect #txtcontent{
	/*width: 80%;
    height: 80%;*/
    width:100%;
    height:100%;
    padding:25px;
    position: absolute;
    /*left: 50%;*/
    left: 0;
    top: 0;
    /*margin: 5% 0 0 -39%;*/
    background: transparent;
    border: none;
    color: #fff;
    font-size: 40px;
    font-family:'cwTeXKai';
    letter-spacing: 0.05em;
    line-height: 1.3em;
    font-weight: bold;
    box-sizing: border-box;
    word-wrap:break-word;
}
#BG_txt{
    width:100%;
    height:100%;
    padding:15px;
    position: absolute;
    left:0;
    top:0;
    background: transparent;
    border: none;
    color: #fff;
    font-size: 40px;
    font-family:'cwTeXKai';
    letter-spacing: 0.05em;
    line-height: 1.3em;
    font-weight: bold;
    box-sizing: border-box;
}
.progress .formName {
    position: absolute;
    left: 50%;
    top: 0;
    margin: 730px 0 0 -346px;
}
.progress .formName p {
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    background: #000;
    border-radius: 40px;
    width:80px;
    margin: 5px 0;
}
.progress .formName input {
    font-size: 20px;
    width: 148px;
    border: 20px solid #fff;
    -moz-border-image: url(../images/border.png) 30 30 round;
    -webkit-border-image: url(../images/border.png) 30 30 round;
    -o-border-image: url(../images/border.png) 30 30 round;
    border-image: url(../images/border.png) 30 30 round;
    box-sizing: content-box;
    background: #fff;
}

.progress .formDemo {
    position: absolute;
    left: 50%;
    top: 0;
    /*margin: 730px 0 0 -128px;*/
    margin: 730px 0 0 -240px;
}
.progress .formDemo p {
    font-size: 20px;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    background: #000;
    border-radius: 40px;
    width: 160px;
    margin: 5px 0;
}
.progress .formDemo textarea {
    font-size: 20px;
    width: 435px;
    height: 55px;
    border: 20px solid #fff;
    -moz-border-image: url(../images/border.png) 30 30 round;
    -webkit-border-image: url(../images/border.png) 30 30 round;
    -o-border-image: url(../images/border.png) 30 30 round;
    border-image: url(../images/border.png) 30 30 round;
    box-sizing: content-box;
    background: #fff;
}

.progress .formDemo select {
    position: absolute;
    left: 170px;
    top: 5px;
    font-size: 20px;
    border-radius: 5px;
    width: 300px;
    border: 1px solid #000;
    padding: 0 5px;
}



/*4-75%*/
.progress .fontSize{ width: 27%; min-width: 300px; position: absolute; left:50%; top:0; margin: 757px 0 0 -396px;
	}
.progress .fontSize p{text-align: center; font-size: 20px; color: #fff; padding: 4px 15px; background: #000; border-radius: 20px; float: left; margin: 0 6px 0 0;}
.progress .fontSize li a{text-align: center; font-size: 24px; color: #fff;  padding: 8px; background: #a50707; border-radius: 5px; float: left; margin: -7px 5px; transition: all 0.2s;}
.progress .fontSize li a:hover{background: #000; transform: scale(0.95);}

.progress .fontColor{ width: 45%; min-width: 510px; position: absolute; left:50%; top:0; margin: 757px 0 0 -85px;
	}
.progress .fontColor p , .progress .fontBorder p{text-align: center; font-size: 20px; color: #fff; padding: 4px 15px; background: #000; border-radius: 20px; float: left; margin: 0 6px 0 0;}
.progress .fontColor li a , .progress .fontBorder li a{text-align: center; font-size: 24px; color: #fff;  padding: 19px; background: #a50707; border-radius: 5px; float: left; margin: -7px 5px; transition: all 0.2s;}
.progress .fontColor li a:hover , .progress .fontBorder li a:hover{ filter: brightness(1.2); transform: scale(0.95);}
.progress .fontColor li a.red , .progress .fontBorder li a.red{ background:#a50707;}
.progress .fontColor li a.orange , .progress .fontBorder li a.orange{ background:#cd8024;}
.progress .fontColor li a.yellow , .progress .fontBorder li a.yellow{ background:#fcff00;}
.progress .fontColor li a.green , .progress .fontBorder li a.green{ background:#2aa17e;}
.progress .fontColor li a.blue , .progress .fontBorder li a.blue{ background:#4d65dd;}
.progress .fontColor li a.pink , .progress .fontBorder li a.pink{ background:#dd2c90;}
.progress .fontColor li a.white , .progress .fontBorder li a.white{ background:#fff;}
.progress .fontColor li a.black , .progress .fontBorder li a.black{ background:#000;}
.progress .fontColor li a.trans , .progress .fontBorder li a.trans{ background:transparent; border:solid 1px #000;}

.progress .fontStyle{ width: 27%; min-width: 300px; position: absolute; left:50%; top:0; margin: 821px 0 0 -396px;
	}
.progress .fontStyle p{text-align: center; font-size: 20px; color: #fff; padding: 4px 15px; background: #000; border-radius: 20px; float: left; margin: 0 6px 0 0;}
.progress .fontStyle select{
    font-size: 18px;
    border-radius: 5px;
    width: 147px;
    border: 1px solid #000;
    padding: 0 5px;
}

.progress .fontBorder{ width: 45%; min-width: 510px; position: absolute; left:50%; top:0; margin: 821px 0 0 -85px;
	}


/*5-100%*/	
.progress .btn{ width:100%; max-width: 782px; position: absolute; left:50%; top:0; margin: 730px 0 0 -390px; }
.progress .btn a{width: 23%; float: left; margin: 0 1%; transition: all 0.2s;}
.progress .btn a:hover{filter: brightness(1.1); transform: scale(0.97);}


.progress .grandma {
    width: 309px;
    height: 265px;
    background: url(../images/grandma.png) left top no-repeat;
    position: absolute;
    left: 50%;
    top: 0;
    margin: 430px 0 0 293px;
    animation:grandma 0.5s steps(5) infinite alternate;
}
@keyframes grandma {
   from { background-position: 0px; }
     to { background-position: -1545px; transform: translate(10px,-10px);}
}

.progress .grandpa {
    width: 309px;
    height: 265px;
    background: url(../images/grandpa.png) left top no-repeat;
    position: absolute;
    left: 50%;
    top: 0;
    margin: 430px 0 0 -610px;
    animation:grandpa 0.5s 0.5s steps(5) infinite alternate;
}
@keyframes grandpa {
   from { background-position: 0px; }
     to { background-position: -1545px; transform: translate(-10px,-10px);}
}



/*作品*/
img.logo2{ position: absolute; left:50%; top:0; margin: 82px 0 0 -125px; width: 240px; }

.progress a.btnHome{display: block; width: 459px; height: 68px; background: url(../images/btnBG.png) no-repeat; text-align: center; font-size: 25px; color: #fff; position: absolute; left:50%; top:0; margin: 745px 0 0 -230px; text-decoration: none; padding: 20px 0 0 0;}
.progress a.btnHome small{font-size: 60%; letter-spacing:normal; position: relative;
    top: -6px;}
.progress a.btnHome:hover{ filter: brightness(1.1); }
.progress a.btnHome img{width: auto;
    height: 50%;
    margin: 0 1%;}


 /*製作中*/
.working{background:url(../images/bg3.jpg) center top no-repeat; padding-bottom: 100%;}
.working h2{text-align: center; font-weight: bold; letter-spacing: 0.02em; font-size: 42px; width: 520px; position: absolute; left:50%; top:0; margin: 242px 0 0 -263px;}

.fb-like{left:50%; top:0; margin: 358px 0 0 -55px; }

.working .grandpa{margin: 378px 0 0 -363px;}
.working .grandma{margin: 373px 0 0 51px;}