html,body,.container{margin: 0; padding: 0; width: 100%; min-height: 100%;}
.indexWrapper{background-color: #3e7dff; padding: 4vw 4vw 0;  position: relative;}
 *{ box-sizing: border-box;}
a:link,a:visited,a:hover,a:active{ color:#fff;}
a{ text-decoration: none;}
 .indexInnerWrapper{background-color: #1557e0;height: 78vh; position: relative;}
.title{ font-size: 5vw; color: #fff;padding-top: 9vw; text-align: center;}
.photoBtn,.photoInputBtn{ position: fixed; width: 34vw;height: 34vw;bottom: 19vw; font-size: 5vw; color: #fff; text-align: center;  left: 50%; margin-left: -17vw;}
.photoBtn img{ width: 34vw;height: auto;}
.photoShow{display: block; position: fixed; bottom: 10vw; font-size: 5vw; left: 10vw; color: #fff; text-align: center; }
.photoShow img{ width: 6vw;height: 7vw;}
.photoBtn text,.photoShow text{display: inline-block;width: 100%;}
.nagativeBtn{ width: 9vw; height: 21vw;border-radius: 9vw; padding: 3vw 1.5vw;  right:1px;font-size: 3vw;color: #1557e0; background-color: #fff; position: fixed; top: 75vw;}
.nagativeBtn img{width: 5vw; display: block;	height: 5vw; margin-bottom: 1.5vw; margin-left:0.4vw;}
.bottom_wrapper{width: 100vw;	height:47vw;	 position: absolute; margin-left: -4vw; bottom: 0;}
.bgimg{ width: 100vw; height: 100%}
.bbgimg{ width: 66vw; height:108vw; }
.star1,.star2,.cloud{ position: fixed; height: 10vw;width: 10vw;}
.star1{ left: 11vw; top: 25vw;}
.star2{ right: 5vw; bottom: 45vw;}
.cloud{ right: 0; top: 43vw; position: absolute; bottom: 0;  }
.auth_wrapper{ position: fixed; bottom: 0; width: 100%; background: #ffff; padding: 4vw;}
.auth text:first-child{ font-size:3vw; font-weight: bold;}
.auth text:last-child{ font-size:3vw; font-weight: normal; margin-left: 2vw;}
.auth_title{ font-size: 3vw; font-weight: bold; margin: 2vw 0;}
.authbtn_wrapper button{width: 40vw;	height: 11vw;padding: 0; line-height: 11vw;	background-color: #40cb4d; font-size: 4vw;	border-radius: 1vw; color: #fff; font-weight: normal; display: inline-block;}
.auth_choose{ width: 4vw;height: 3vw;}
.auth_perimg{width: 12vw; height: 12vw; vertical-align: middle; margin-right: 2vw; }
.authinfo_wrapper{ padding: 2vw 4vw; font-size: 3vw; position: relative; border-top:1px solid #f2f2f2;border-bottom:1px solid #f2f2f2; margin-bottom: 4vw;}
.auth_info{ display: inline-block;vertical-align: top;}
.auth_info text{ display: block;}
.auth_choose{ position: absolute; right:4vw; top: 4vw;}
.authbtn_wrapper button.at_cancle{ background-color: #f2f2f2; margin-right: 5vw; color: #333;}
.icon{ position: absolute; width: 57vw; height: 57vw; top: 50%; margin-top: -22vw; left: 17vw;}
.touWrapper{ width: 66vw;height: 78vh; margin: 8vw auto; background: url("../images/photo02.png")no-repeat; background-size: 100% 100%;}
.photoInputBtn{  opacity: 0;height: 44vw;    bottom: 10vw;}
.myPhotoWrapper,.photoDetailWrapper{background-color: #f2f2f2; padding-bottom: 6vw; }
.photoList img{ margin-top: 22vw; width: 27vw; height: 20vw; margin-bottom: 6vw; }
.parimy{width: 43vw;	height: 11vw; line-height: 11vw;	background-color: #3e7dff; color: #fff; text-align: center;	border-radius: 1vw; padding: 0;font-size: 5vw;font-weight: normal; margin-top: 7vw;}
.tips{font-size: 4vw;}
.photoList_wrapper .title{color: #333333;font-size: 4vw; margin-bottom: 2vw; text-align: left;    padding-top: 7vw;}
.photoList img{ display: inline-block; width:29.3vw;  border: 1.2vw solid #fff; height: 39vw; margin-top: 0; margin-right: 1vw;margin-bottom: 2vw;}
.adsbox{width: 100%;   	}
.adsbox img{ width: 100%;}
.noDataWrapper{ text-align: center; padding-top: 22vw;}
.photoList_wrapper{ padding: 0 4vw;}
.htit{  margin-bottom: 11vw;font-size: 4vw;color: #333333;}
.timage_wrapper{ position: relative;   text-align: center;}
.del{ position:absolute;  left: 50%; margin-left: 10vw; top: 11vw; width: 6vw; height: 6vw;}
.timage{ width: 30vw; height: 42vw; margin-bottom: 3vw; margin-top: 13vw; border: 1.3vw solid #fff;}
.photoDetailWrapper .tips{ width: 80%; margin: 0 auto 3.2vw;   font-size:3.6vw;color: #666666;}
.tit_nav{font-size: 4vw; color: #333; font-weight: bold; width: 80%; margin-bottom: 4vw; padding-left: 10vw;}
.nloadbtn{	width: 100%; display: block; text-align: center; font-size:4vw;	height: 11vw;line-height: 11vw;padding: 0;font-weight: normal;	background-color: #40cb4d; color: #fff;	border-radius: 1vw; margin-bottom: 10vw; margin-top:10vw;}
.stepWrapper .title{color: #333333;font-size: 5vw; margin-bottom: 10vw; margin-top: 12vw; text-align: center;}
.size_wrapper{ display: flex; padding: 0 0 10vw 19vw;flex-wrap: wrap}
.sizelist{  width: 28vw; margin-bottom: 5vw;	height: 33vw; padding-top:4vw;		box-shadow: 0vw 0vw 1vw 0vw rgba(66, 75, 205, 0.15);margin-right: 5vw; text-align: center;
}
.sizelist:hover{background-color: #fadc62;}
.sizelist img{width: 9vw;	height: 11vw;	 margin-bottom: 3vw; vertical-align: middle; margin-top:1.2vw;
}
.sizelist span{  display: block;}
.type{font-size: 3vw;}
.size{font-size: 2.8vw;color: #666666;}
.wyk8 image{width: 16vw;	height: 16vw;}
.colorlist{width: 92vw; box-sizing: border-box;	height: 21vw;	background-color: #ffffff;	box-shadow: 0vw 0vw 1vw 0vw rgba(66, 75, 205, 0.15);
 border-radius: 1vw; margin: 0 auto; padding: 3vw 6vw; margin-bottom: 5vw;}
.colorlist img:first-child{width: 11vw;	height: 14vw;		border: solid 1vw #f2f2f2;vertical-align: middle;
}
.gobtn{ float: right; margin-right:4vw;width: 3vw;height: 5vw; margin-top:5vw;}
.colorlist span{font-size: 4vw; margin-left: 7vw;}

.timg{ width: 34vw; height: 41vw; display: block;  margin: 4vw auto 7vw;}
.stepWrapper .tips img{ width: 4vw; height: 3vw; margin-right: 2vw;vertical-align: middle;display: inline-block;}
.button_wrapper{ display: flex; margin:18vw auto;padding: 4vw;width: 100%;}
.button_wrapper a{ display:inline-block; position:relative;flex-grow: 1; padding: 0; font-weight:normal;  width: 45vw; font-size: 4vw; text-align: center;	height: 11vw; line-height: 11vw;	background-color: #3e7dff;	border-radius: 1vw;color: #ffffff;}
.button_wrapper a input{ width: 100%; height: 100%; position: absolute; top:0;left:0; opacity: 0;}
.button_wrapper a:first-child{margin-right: 4vw;}
.button_wrapper a.camera{background-color: #40cb4d;}
.stepWrapper .tips{ width: 50vw; margin: 0 auto 4vw; text-align: left;  font-size: 4vw;}
.timage_wrapper .timage{width: 39vw; height: 55vw;}
.layer{ width: 100%; height: 100%;  position: fixed; top:0; left:0; background:rgba(0,0,0,0.3);display: none;}
.layerTipsBox{position: fixed; width: 67vw; left: 50%; margin-left: -33vw; top:50%; margin-top: -22vw; background-color: #fff; border-radius: 2vw;}
.tipsBoxTitle{color: #333333;font-size: 4vw; text-align: center; padding-top: 5vw; margin-bottom: 7vw;}
.tipsBoxCnt{ border-bottom: 1px solid #dbdbdb; padding-bottom: 6vw;color: #999999;font-size: 4vw; text-align: center;}
.tipsBoxBtn a{ display: inline-block; width: 50%;height: 12vw; line-height: 12vw;font-size: 5vw; text-align: center;}
.tipsBoxBtn a:first-child{border-right:1px solid #dbdbdb}
.tipsBoxBtn a.confirmBtn{color: #3e7dff;}
.loadingBox{}
.loading{width: 39vw;height: 35vw;background-color: #ffffff;border-radius: 2vw; opacity: 0.9; position: fixed;left: 50%; margin-left: -20vw; top:50%; margin-top: -17vw;}
.loading p{font-size: 4vw; text-align: center; margin-top: 1vw;}
.spinner {
 margin: 7vw auto 5vw;
 width: 15vw;
 height: 15vw;
 position: relative;
}

.container1 > div, .container2 > div, .container3 > div {
 width:3vw;
 height: 3vw;
 background-color: #333;

 border-radius: 100%;
 position: absolute;
 -webkit-animation: bouncedelay 1.2s infinite ease-in-out;
 animation: bouncedelay 1.2s infinite ease-in-out;
 -webkit-animation-fill-mode: both;
 animation-fill-mode: both;
}

.spinner .spinner-container {
 position: absolute;
 width: 100%;
 height: 100%;
}

.container2 {
 -webkit-transform: rotateZ(45deg);
 transform: rotateZ(45deg);
}

.container3 {
 -webkit-transform: rotateZ(90deg);
 transform: rotateZ(90deg);
}

.circle1 { top: 0; left: 0; }
.circle2 { top: 0; right: 0; }
.circle3 { right: 0; bottom: 0; }
.circle4 { left: 0; bottom: 0; }

.container2 .circle1 {
 -webkit-animation-delay: -1.1s;
 animation-delay: -1.1s;
}

.container3 .circle1 {
 -webkit-animation-delay: -1.0s;
 animation-delay: -1.0s;
}

.container1 .circle2 {
 -webkit-animation-delay: -0.9s;
 animation-delay: -0.9s;
}

.container2 .circle2 {
 -webkit-animation-delay: -0.8s;
 animation-delay: -0.8s;
}

.container3 .circle2 {
 -webkit-animation-delay: -0.7s;
 animation-delay: -0.7s;
}

.container1 .circle3 {
 -webkit-animation-delay: -0.6s;
 animation-delay: -0.6s;
}

.container2 .circle3 {
 -webkit-animation-delay: -0.5s;
 animation-delay: -0.5s;
}

.container3 .circle3 {
 -webkit-animation-delay: -0.4s;
 animation-delay: -0.4s;
}

.container1 .circle4 {
 -webkit-animation-delay: -0.3s;
 animation-delay: -0.3s;
}

.container2 .circle4 {
 -webkit-animation-delay: -0.2s;
 animation-delay: -0.2s;
}

.container3 .circle4 {
 -webkit-animation-delay: -0.1s;
 animation-delay: -0.1s;
}

@-webkit-keyframes bouncedelay {
 0%, 80%, 100% { -webkit-transform: scale(0.0) }
 40% { -webkit-transform: scale(1.0) }
}

@keyframes bouncedelay {
 0%, 80%, 100% {
  transform: scale(0.0);
  -webkit-transform: scale(0.0);
 } 40% {
    transform: scale(1.0);
    -webkit-transform: scale(1.0);
   }
}