.wrapper{height:auto; background-size:100% auto; }


/*1-首頁*/
.index1{padding-bottom:98%; background:url(../images/bgM.jpg) center top repeat-y; background-size:100% auto;}
.index1 h2{width:90%; margin: 7% 0 0 -45%;}
.index1 h1 img {width: 20%;}
.index1 h1 img.t1 {margin: 18% 0 0 -32%;}
.index1 h1 img.t2 {margin: 18% 0 0 -10%;}
.index1 h1 img.t3 {margin: 18% 0 0 11%;}
.index1 h1 img.t4 {margin: 39% 0 0 -44%;}
.index1 h1 img.t5 {margin: 39% 0 0 -23%;}
.index1 h1 img.t6 {margin: 39% 0 0 -4%;}
.index1 h1 img.t7 {margin: 39% 0 0 14%;}
.index1 h1 img.t8 {margin: 39% 0 0 29%;}
.index1 a.btnGo {
    width: 84%;
    padding-bottom: 12%;
    margin: 69% 0 0 -43%;
    background-size: contain;}



/*2-25%*/
.progress25{padding-bottom: 225%; background-size: 300% auto;}
.progress h1 {
    margin: 20.5% 0 0 -40%;
    width: 80%;
    font-size: 4.8vw;
}
.progress .pSelect {
    width: 78%;
    margin: 29% 0 0 -39%;
}
.progress .pChoose {
    margin: 113% 0 0 -50%;
    width: 100%;
    background: #f5c656;
    padding: 0% 5% 20%;
}
.progress .pChoose li {
    width: 15%;
    margin: 0.8%;
}
.progress a.btnUpload {
    width: 70%;
    height: 15vw;
    background: url(../images/btnBG.png) no-repeat;
    font-size: 4.5vw;
    margin: 145% 0 0 -35%;
    padding: 3vw 0 0 0;
    background-size: 100% 100%;
}
.progress a.btnUpload small {
    font-size: 70%;
    top: 0px;
}
.progress a.btnNext {
    width: 58%;
    height: 52vw;
    font-size: 4.5vw;
    margin: 168% 0 0 2%;
    padding: 4.5vw 0 0 4.3vw;
}
.progress a.btnNext img , .progress a.btnPrev img{
    width: 4vw;
    height: 4vw;
    top: 0vw;
}
.progress a.btnPrev {
    width: 58%;
    height: 52vw;
    font-size: 4.5vw;
    margin: 168% 0 0 -61%;
    padding: 4.5vw 0 0 20vw;
}

/* 25.html lightbox style*/
.boxContent {
/*    width: 400px;
    height: 605px;
    position: fixed;
    top: 2%;
    left: 2%;*/
    z-index: 51;
    background: white;
    width: 100vw;
    height: 96vh;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-left: -50vw;
    margin-top: -50vh;

}
.bottom {
    margin-top:47px;
}
.upload-msg {
    position: absolute;
    top: 20%;
    left: 15.5%;
}
#upload-result {
    /*margin-top:44px;*/
    height: 14vw;
    /*background: url(../images/btnBG.png) no-repeat;*/
    background-size: cover;
}
#cancel-upload {
    height: 14vw;
    /*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; /*添加底部阴影*/
}



/*3-50%*/
/*.progress50{padding-bottom: 225%; background-size: 300% auto;}*/
.progress50{padding-bottom: 212%; background-size: 300% auto;}
.progress .pSelect #txtcontent{
    font-size: 6vw;
}
.progress .formName {
    margin: 114% 0 0 -45%;
    width: 90%;
}
.progress .formName p , .progress .formDemo p {
    font-size: 4.2vw;
    margin: 0;
    padding: 1.5% 0;
}
.progress .formName p{width: 16%;}
.progress .formDemo p{width: 34%;}
.progress .formName input {
    font-size: 4.2vw;
    width: 70%;
    position: absolute;
    left: 17%;
    top: 0;
    border: 4.2vw 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;
}

.progress .formDemo {
    /*margin: 135% 0 0 -50%;*/
    margin: 117% 0 0 -50%;
    width: 100%;
    background: #f5c656;
    padding: 0 5% 5% 5%;
}
.progress .formDemo textarea {
    font-size: 4.2vw;
    width: 87%;
    height: 12vw;
    margin: 1% 0;
    border: 4.2vw 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;
}
.progress .formDemo select {
    position: absolute;
    left: 37%;
    top: 1%;
    font-size: 4.2vw;
    width: 57%;
    padding: 0 ;
}

.progress50 a.btnPrev{
    /*margin: 171% 0 0 -61%;*/
    margin: 157% 0 0 -61%;
}
.progress50 a.btnNext{
    /*margin: 171% 0 0 2%;*/
    margin: 157% 0 0 2%;
}


/*4-75%*/
.progress75{padding-bottom: 218%; background-size: 300% auto;}
.progress .fontSize {
    width: 100%;
    min-width: inherit;
    margin: 116% 0 0 -50%;
    background: #f5c656;
    padding: 0 4% 4%;
}
.progress .fontSize p {
    font-size: 4.2vw;
    padding: 1.5% 3.5%;
    margin: 0 1.5% 0 0;
}
.progress .fontSize li a {
    font-size: 4.2vw;
    padding: 1.5%;
    margin: 0 1%;
}

.progress .fontStyle {
    width: 100%;
    min-width: inherit;
    margin: 126% 0 0 -50%;
    background: #f5c656;
    padding: 0 4% 4%;
}
.progress .fontStyle p {
    font-size: 4.2vw;
    padding: 1.5% 3.5%;
    margin: 0 1.5% 0 0;
}
.progress .fontStyle select {
    font-size: 4.2vw;
    width: 28%;
}

.progress .fontColor{
    width: 100%;
    min-width: inherit;
    margin: 136% 0 0 -50%;
    background: #f5c656;
    padding: 0 4% 4%;
}
.progress .fontColor p , .progress .fontBorder p{
    font-size: 4.2vw;
    padding: 1.5% 3.5%;
    margin: 0 1.5% 0 0;
}
.progress .fontColor li a , .progress .fontBorder li a{
    padding: 3.4%;
    margin: 0 1%;
}


.progress .fontBorder{
    width: 100%;
    min-width: inherit;
    margin: 146% 0 0 -50%;
    background: #f5c656;
    padding: 0 4% 4%;
}


.progress75 a.btnPrev {
    margin: 162% 0 0 -61%;
}
.progress75 a.btnNext {
    margin: 162% 0 0 2%;
}



/*5-100%*/
.progress100{padding-bottom: 146%; background-size: 300% auto;}
.progress .btn{ width:100%; max-width:inherit; position: absolute; left:50%; top:0; margin: 115% 0 0 -50%; }
.progress .btn a{width: 24%; float: left; margin: 0 0.5%; transition: all 0.2s;}
.progress .btn a:hover{filter: brightness(1.1); transform: scale(0.97);}



/*作品*/
.works{padding-bottom: 146%; background-size: 300% auto;}
img.logo2 {
    margin: 11.5% 0 0 -21%;
    width: 42%;
}
.progress a.btnLine {
    display: block;
    width: 19%;
    margin: 117.5% 0 0 4.5%;
    left: 50%;
    top: 0;
    text-decoration: none;
}
.progress a.btnHome {
    width: 70%;
    height: 15vw;
    background: url(../images/btnBG.png) no-repeat;
    font-size: 4.5vw;
    margin: 117% 0 0 -35%;
    padding: 5.5vw 0 0 0;
    background-size: 100% 100%;
}
.progress a.btnHome small {
    font-size: 70%;
    top: 0px;
}
.progress a.btnHome img{width: auto;
    height: 50%;
    margin: 0 1%;}



 /*製作中*/
.working{padding-bottom: 123%; background-size: 300% auto;}
 .working h2{
    font-size: 6.5vw;
    width: 80%;
    margin: 40% 0 0 -40%;}

.fb-like{margin: 60% 0 0 -55px; }

.working .grandpa{ width: 52%;
        margin: 57% 0 0 -60%;
    transform: scale(0.8);
    background:none;
    animation: paused;
    }
.working .grandma{ width: 52%;
    margin: 57% 0 0 6%;
    transform: scale(0.8);
    background:none;
    animation: paused;
    }