@charset "utf-8";
html,body{
  -webkit-text-size-adjust: none;
}
html{
  font-size: 100PX;
}
body{
  height:auto;
}
#page{
  width:7.50000rem;
  height:12.45000rem;
  background: url(../images/bg.jpg) no-repeat 0 0;
  background-size: 7.50000rem 13.34000rem;
  padding-top: 0.89000rem;
}
.tit_diy{
  position: absolute;
  width: 2.47000rem;
  top: 0.63000rem;
  left: 2.52000rem;
  z-index: 1;
}
.page-title{
  /*height: 0.89000rem;
  line-height: 0.89000rem;
  text-align: center;*/
  /*color: #533927; /* text color */
  /*font-size: 0.60000rem;*/
 display: none;
}
.main-canvas{
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  width:7.49000rem;
  height:7.02000rem;
  padding-left: 0.12000rem;
  padding-top: 0.50000rem;
  margin: 0 auto;
  margin-bottom: 0.28000rem;
  background: url(../images/main_canvas_frame.png) no-repeat 0 0;
  background-size: 7.49000rem;
  -webkit-user-select: none;
  -moz-user-select: none;
  -o-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
.main-canvas canvas{
  display: block;
  position: relative;
  width:6.41000rem;
  height:6.37000rem;
  margin: 0 auto;
}
.main-canvas .result-canvas{
  width:6.00000rem;
  border:1PX solid #ccc;
  margin: 0 auto;
  margin-top: 0.16000rem;
}
.adjust-panel{
/*
  position: absolute;
  left:5.24000rem;
  top:4.05000rem;
*/
  width:1.70000rem;
  height:3.69000rem;
  border: 2PX solid #51c5e6; /* stroke */
  border-radius: 0.20000rem; /* border radius */
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #d8f3ff; /* layer fill content */
/*  z-index: 2;*/
  overflow: hidden;
}
.adjust-panel-wrapper{
  position: absolute;
  left:5.24000rem;
  top:4.05000rem;
  width:1.70000rem;
  height:3.69000rem;
  z-index: 9999;
  outline: none;
  -webkit-transform: translate3d(0,0,0);
  transform: translate3d(0,0,0);
}
.adjust-panel-wrapper::after{
  position: absolute;
  left:50%;
  bottom:-0.50000rem;
  display: block;
  width:3.04000rem;
  height:1.58000rem;
  margin-left:-1.48000rem;
  content:'';
  background: url(../images/adjust_panel_bottom.png) no-repeat 0 0;
  background-size: 100%;
  z-index: -3;
}
.adjust-panel .wrapper{
  padding-bottom: 0.10000rem;
  background-color: #d8f3ff;
}
.adjust-panel h3{
  height:0.70000rem;
  line-height: 0.66000rem;
  background: #99e0ff;
  color: #000; /* text color */
  font-size: 0.30000rem;
  text-align: center;
}
.adjust-panel h3:last-child{
/*  margin-top: 0.10000rem;*/
}
.adjust-panel h3:last-child span:first-child{
  height:100%;
  border-right:1PX solid #fff;
  padding-right: 0.08000rem;
  margin-right: 0.08000rem;
}
.adjust-panel ul{
  margin-top: 0.08000rem;
  margin-left: 0.16000rem;
  width:0.76000rem;
  height:2.10000rem;
  border-radius: 0.10000rem; /* border radius */
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #fff; /* layer fill content */
  overflow: hidden;
}
.adjust-panel li{
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding:0 0.16000rem;
  height:50%;
  padding-top: 0.22000rem;
  color: #000; /* text color */
  font-size: 0.30000rem;
  line-height: 1em;
  text-align: center;
}
.rangeslider.rangeslider--vertical,
.value-slider{
  position: absolute;
  top:0.68000rem;
  margin-top: 0.10000rem;
  margin-left: 0.12000rem;
  width:0.54000rem;
  height:2.08000rem;
  border: 2PX solid #51c5e5; /* stroke */
  border-radius: 0.07000rem; /* border radius */
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #99e0ff; /* layer fill content */
}
.rangeslider__fill{
  height: 100%;
}
.rangeslider__handle,
.value-slider i{
  position: absolute;
  left: 50%;
  margin-left: -0.24000rem;
  /*width:0.38000rem;
  height:0.34000rem;*/
  width:0.50000rem;
  height:0.50000rem;
  background: url(../images/slider_handler.png) no-repeat center;
  background-size: 0.54000rem;
  -webkit-transform-origin: 0 0;
  transform-origin: 0 0;
}
.adjust-panel .actived{
  background: #99e0ff;
}


.bottom-panel{
  position: relative;
  width:7.49000rem;
  height:4.41000rem;
  margin: 0 auto;
  background: url(../images/bottom_panel.png) no-repeat 0 0;
  background-size: 7.49000rem;
}
.item-tab{
  width:6.67000rem;
  padding-top: 0.26000rem;
  margin: 0 auto;
  background:url(../images/tab_container_bg.png) no-repeat 0 0.26000rem;
  background-size: 6.67000rem;
}
.item-tab .tab-header{
  position: relative;
  text-align: center;
}
.item-tab .tab-header li{
  position: relative;
  width:1.23000rem;
  height:0.60000rem;
  line-height: 0.60000rem;
  text-align: center;
  color: #533927; /* text color */
  font-size: 0.28000rem;

}
.item-tab .tab-header li:first-child{
  margin-left: 0;
}
.item-tab .tab-header span{
  position: absolute;
  bottom: 0;
  display: block;
  width:1.23000rem;
  height:0.60000rem;
  background: url(../images/tab-head-item.png) no-repeat 0 0;
  background-size: 1.23000rem;
}
.item-tab .tab-header .actived span{
  color: #533927; /* text color */
  background: none;
  z-index: 1;
}
.tab-container{
  width:6.26000rem;
  height:2.46000rem;
  margin:0 auto;
}
.tab-container .tab-content{
  display: none;
  height: 2.46000rem;
/*   background: #fff; */
/*   border: 1PX solid #dfc19d; */
}
.tab-container .tab-content.actived{
  display: block;
}
.item-list{
  position: relative;
  width:100%;
}
.item-inner{
  width:100%;
  overflow: hidden;
}
.item-wrapper{
  padding-top: 0.20000rem;
  width:1000.00000rem;
}
.item-list li{
}
.item-list li .img-wrapper{
  width:6.15000rem;
}
.item-list li img{
  float: left;
  display: block;
  width:1.00000rem;
  height:1.00000rem;
  padding-left: 0.22000rem;
  padding-bottom: 0.06000rem;
/*  background: #ccc;*/
}

.item-list .next-btn,
.item-list .prev-btn{
  position: absolute;
  display: block;
  top:1.24000rem;
  width:0.59000rem;
  height:0.56000rem;
  background: url(../images/arrows.png) no-repeat 0 0;
  background-size: 1.25000rem 0.56000rem;
}
.item-list .next-btn{
  right: -0.50000rem;
  background-position: -0.69000rem 0;
}
.item-list .prev-btn{
  left:-0.50000rem;
}
.bottom-panel .btn-wrapper{
  text-align: center;
  padding-top: 0.18000rem;
}
.bottom-panel .btn-wrapper a{
  width:2.01000rem;
  height:0.69000rem;
/*  background: url(../images/btn.png) no-repeat -1.70000rem 0;*/
/*  background-size: 3.92000rem 0.73000rem;*/
  border-radius: 0.06000rem; /* border radius */
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #f7f7f7; /* layer fill content */ /* drop shadow */
  -webkit-box-shadow: 0 0.02000rem 0 #79a9b3; /* drop shadow */
  box-shadow: 0 0.02000rem 0 #79a9b3; /* drop shadow */
  color: #125771; /* text color */
  font-size: 0.32000rem;
  text-shadow: 0 0.01000rem 0.01000rem rgba(163,225,254,.75); /* drop shadow */
  line-height: 0.69000rem;
}
.bottom-panel .btn-wrapper a:first-child{
  width:1.35000rem;
  margin-right: 0.82000rem;
  background-position: 0 0;
}
.text-panel{
  padding-top: 0.16000rem;
  padding-left: 0.20000rem;
}
.text-panel textarea{
  width:4.74000rem;
  height:1.49000rem;
  padding: 0.10000rem;
  outline: none;
  border: 1PX solid #cda97f;
  border-radius: 0;
  font-size: 0.38000rem;
}
.text-panel textarea::-webkit-input-placeholder{
  color: #a7a7a7; /* text color */
  font-size: 0.38000rem;
}
.text-panel textarea:-ms-input-placeholder{
  color: #a7a7a7; /* text color */
  font-size: 0.38000rem;
}
.text-panel textarea::placeholder{
  color: #a7a7a7; /* text color */
  font-size: 0.38000rem;
}
.text-panel span{
  position: relative;
  display: block;
  width:0.84000rem;
  height:0.59000rem;
  color: #533927; /* text color */
  font-size: 0.26000rem;
  text-align: 0.20000rem;
  text-indent: 0.10000rem;
  border: 1PX solid #cda97f; /* stroke */
  border-radius: 0.08000rem; /* border radius */
  line-height: 0.59000rem;
  -moz-border-top-left-radius: 0;
  border-top-left-radius: 0; /* border radius */
  
  -moz-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0; /* border radius */
  border-left: none;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #f0fbff /* layer fill content */
}
.text-panel span:first-child{
  margin-bottom: 0.12000rem;
}
.text-panel span.actived{
  background-color: #fff; /* layer fill content */
}
.text-panel span.actived::before{
  content: '';
  position: absolute;
  left:-1PX;
  width:1PX;
  height:100%;
  background: #fff;
}
.text-panel .colors{
  padding-top: 0.10000rem;
}
.text-panel .colors li{
  width:0.55000rem;
  height:0.28000rem;
  margin-left: 0.06000rem;
  border-radius: 0.08000rem; /* border radius */
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  -webkit-box-shadow: 2PX 2PX rgba(0,0,0,0.5);
  box-shadow: 2PX 2PX rgba(0,0,0,0.5);
}
.text-panel .colors li:first-child{
  margin-left: 0;
}
.text-panel .colors .color1{background-color: #000;}
.text-panel .colors .color2{background-color: #999999;}
.text-panel .colors .color3{background-color: #fff;}
.text-panel .colors .color4{background-color: #fc0102;}
.text-panel .colors .color5{background-color: #feef00;}
.text-panel .colors .color6{background-color: #02ff01;}
.text-panel .colors .color7{background-color: #00ffff;}
.text-panel .colors .color8{background-color: #0001fb;}
.text-panel .colors .color9{background-color: #ff00fe;}
.text-panel .colors .actived{
/*  border:1PX solid #f90;*/
}
.page-result{
  height: 13.34000rem !important;
  padding-top: 0 !important;
}
.page-result .tit_diy{
  display: none;
}
.page-result .page-title{
  display: block;
}
.page-result .page-title{
  position: relative;
  top:0.63000rem;
  text-indent: -99.99000rem;
  height:1.01000rem;
  background: url(../images/result_title.png) no-repeat center 0;
  background-size: 3.20000rem 0.67000rem;
}
.page-result .main-canvas{
  margin-top: -0.10000rem;
}
.result-panel{
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0.25000rem;
/*  padding-left: 0.66000rem;*/
}
.result-panel p{
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  width:5.40000rem;
  height:1.45000rem;
  padding-left: 1.52000rem;
  padding-top: 0.32000rem;
  margin: 0 auto;
  margin-bottom: 0.15000rem;
  border-radius: 0.16000rem; /* border radius */
  border:2PX solid #46badf;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #f2e0cc; /* layer fill content + color overlay */
  color: #533927; /* text color */
  font-size: 0.42000rem;
  line-height: 1em;
  background: url(../images/rose.png) no-repeat 0.40000rem 0.20000rem;
  background-size: 1.05000rem 1.07000rem;
}
.result-panel a{
  -webkit-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  padding-left: 0.68000rem;
  padding-top: 0.32000rem;
/*  margin-left: 1.20000rem;*/
  color: #533927; /* text color */
  font-size: 0.42000rem;
}
.result-panel .btn_upload{
  position: absolute;
  left:0.66000rem;
  bottom:0.88000rem;
  background: url(../images/upload_btn.png) no-repeat 0 0;
  background-size: 2.83000rem 0.91000rem;
  width:2.83000rem;
  height:0.91000rem;
}
.result-panel .btn_continue{
  position: absolute;
  left:0.66000rem;
  bottom:0.88000rem;
  background: url(../images/continue_btn.png) no-repeat 0 0;
  background-size: 2.84000rem 0.90000rem;
  width:2.84000rem;
  height:0.90000rem;
}
.result-panel .btn_upload{
  left: auto;
  right:0.66000rem;
}
.status-bar{
  position: absolute;
  width:100%;
  bottom:-0.60000rem;
  color: #533a27; /* text color */
  font-size: 0.28000rem;
  text-align: center;
}

.myface{background: url(../images/main_canvas_frame.png) no-repeat;background-size: 100%;width: 6.85000rem;height: 6.76000rem;margin-left: 0.32000rem;}
.mf_tit{margin: 0 auto;margin-top: 0.60000rem;font-size: 0.50000rem;width: 6.00000rem;text-align: center;}
.mf_back{background: url(../images/continue_btn.png) no-repeat;background-size: 2.63000rem 1.12000rem;width: 2.63000rem;height: 1.12000rem;position: absolute;bottom: 1.00000rem;left: 2.15000rem;text-align: center;font-size: 0.42000rem;color: #533927;padding-left: 0.55000rem;padding-top: 0.32000rem;-webkit-box-sizing: border-box;box-sizing: border-box;display: block}
.mf_li{-webkit-box-sizing: border-box;box-sizing: border-box;list-style: none;width: 6.85000rem;padding:0.10000rem}
.mf_pic{width: 6.02000rem;height: 6.10000rem;margin-top: 0.10000rem;margin-left: 0.30000rem;-o-object-fit: cover;object-fit: cover;}
.myface .item-wrapper{padding-top: 0;}
.myface .next-btn,
.myface .prev-btn{
  position: absolute;
  display: block;
  top:3.80000rem;
  width:0.59000rem;
  height:0.56000rem;
  background: url(../images/arrows.png) no-repeat 0 0;
  background-size: 1.25000rem 0.56000rem;
}
.myface .next-btn{
  right: 0rem;
  background-position: -0.69000rem 0;
}
.myface .prev-btn{
  left:0rem;
}