@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.89rem;
}
.tit_diy{
	position: absolute;
	width: 3.8rem;
	top: 0.13rem;
	left: 1.82rem;
}
.page-title{
  /*height: 0.89000rem;
  line-height: 0.89000rem;
  text-align: center;*/
  /*color: #533927; /* text color */
  /*font-size: 0.60000rem;*/
 display: none;
}
.main-canvas{
  width:6.56000rem;
  height:6.60000rem;
  padding-left: 0.12000rem;
  padding-top: 0.12000rem;
  margin: 0 auto;
  margin-bottom: 0.05000rem;
  background: url(../images/main_canvas_frame.png) no-repeat 0 0;
  background-size: 6.68000rem 6.60000rem;
  -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;
}
.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.39000rem;
  height:3.69000rem;
  border: 2PX solid #cda97f; /* stroke */
  -moz-border-radius: 0.08000rem;
  -webkit-border-radius: 0.08000rem;
  border-radius: 0.08000rem; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #f5efe5; /* layer fill content */
  z-index: 2;
  overflow: hidden;
}
.adjust-panel h3{
  height:0.70000rem;
  line-height: 0.66000rem;
  background: #dfc19e;
  color: #533927; /* text color */
  font-size: 0.42000rem;
  text-align: center;
}
.adjust-panel h3:last-child{
  margin-top: 0.10000rem;
}
.adjust-panel ul{
  margin-top: 0.08000rem;
  margin-left: 0.16000rem;
  width:0.56000rem;
  height:2.10000rem;
  -moz-border-radius: 0.10000rem;
  -webkit-border-radius: 0.10000rem;
  border-radius: 0.10000rem; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  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;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  widows: 100%;
  height:50%;
  padding-top: 0.10000rem;
  color: #533927; /* text color */
  font-size: 0.42000rem;
  line-height: 1em;
  text-align: center;
}
.rangeslider.rangeslider--vertical,
.value-slider{
  position: absolute;
  top:0.68000rem;
  margin-top: 0.10000rem;
  margin-left: 0.16000rem;
  width:0.32000rem;
  height:2.08000rem;
  border: 2PX solid #cda97f; /* stroke */
  -moz-border-radius: 0.07000rem;
  -webkit-border-radius: 0.07000rem;
  border-radius: 0.07000rem; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #dfc19d; /* layer fill content */
}
.rangeslider__fill{
  height: 100%;
}
.rangeslider__handle,
.value-slider i{
  position: absolute;
  left: 50%;
  margin-left: -0.25000rem;
  /*width:0.38000rem;
  height:0.34000rem;*/
  width:0.50000rem;
  height:0.50000rem;
  background: url(../images/slider_handler.png) no-repeat center;
  background-size: 0.38000rem 0.39000rem;
  -webkit-transform-origin: 0 0;
  -moz-transform-origin: 0 0;
  -o-transform-origin: 0 0;
  -ms-transform-origin: 0 0;
  transform-origin: 0 0;
}
.adjust-panel .actived{
  background: #dfc19e;
}


.bottom-panel{
  position: relative;
  width:6.68000rem;
  height:5.43000rem;
  margin: 0 auto;
  background: url(../images/bottom_panel.png) no-repeat 0 0;
  background-size: 6.68000rem 5.43000rem;
}
.item-tab{}
.item-tab .tab-header{
  position: relative;
  text-align: center;
}
.item-tab .tab-header li{
  position: relative;
  width:1.60000rem;
  height:0.60000rem;
  line-height: 0.60000rem;
  text-align: center;
  color: #533927; /* text color */
  font-size: 0.42000rem;

}
.item-tab .tab-header li:first-child{
  margin-left: 0;
}
.item-tab .tab-header span{
  position: absolute;
  bottom: 0;
  display: block;
  width:1.60000rem;
  height:0.60000rem;
  background: url(../images/tab-head-item.png) no-repeat 0 0;
  background-size: 1.62000rem 1.70000rem;
}
.item-tab .tab-header .actived span{
  color: #533927; /* text color */
  text-decoration: underline;
  bottom:-0.10000rem;
  background-position: 0 -0.92000rem;
  z-index: 1;
}
.tab-container{
  padding-left: 0.15000rem;
  padding-right: 0.15000rem;
}
.tab-container .tab-content{
  display: none;
  height: 3.14000rem;
  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.40000rem;
  width:1000.00000rem;
}
.item-list li{
}
.item-list li .img-wrapper{
  width:6.15000rem;
}
.item-list li img{
  float: left;
  display: block;
  width:1.30000rem;
  height:1.30000rem;
  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.57000rem;
}
.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.23000rem;
  height:0.73000rem;
  background: url(../images/btn.png) no-repeat -1.70000rem 0;
  background-size: 3.92000rem 0.73000rem;
  color: #533927; /* text color */
  font-size: 0.42000rem;

}
.bottom-panel .btn-wrapper a:first-child{
  width:1.60000rem;
  margin-right: 0.82000rem;
  background-position: 0 0;
}
.text-panel{
  padding-top: 0.25000rem;
  padding-left: 0.14000rem;
}
.text-panel textarea{
  width:4.78000rem;
  height:2.08000rem;
  padding: 0.10000rem;
  outline: none;
  border: 1PX solid #cda97f;
  -webkit-border-radius: 0;
  -moz-border-radius: 0;
  -o-border-radius: 0;
  -ms-border-radius: 0;
  border-radius: 0;
  font-size: 0.38000rem;
}
.text-panel textarea::placeholder{
  color: #a7a7a7; /* text color */
  font-size: 0.38000rem;
}
.text-panel span{
  position: relative;
  display: block;
  width:1.12000rem;
  height:0.59000rem;
  color: #533927; /* text color */
  font-size: 0.38000rem;
  text-align: 0.20000rem;
  text-indent: 0.10000rem;
  border: 1PX solid #cda97f; /* stroke */
  -moz-border-radius: 0.08000rem;
  -webkit-border-radius: 0.08000rem;
  border-radius: 0.08000rem; /* border radius */
  
  -moz-border-top-left-radius: 0;
  -webkit-border-top-left-radius: 0;
  border-top-left-radius: 0; /* border radius */
  
  -moz-border-bottom-left-radius: 0;
  -webkit-border-bottom-left-radius: 0;
  border-bottom-left-radius: 0; /* border radius */
  border-left: none;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  background-color: #f5efe5; /* 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.61000rem;
  height:0.32000rem;
  margin-left: 0.06000rem;
  -moz-border-radius: 0.08000rem;
  -webkit-border-radius: 0.08000rem;
  border-radius: 0.08000rem; /* border radius */
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box; /* prevents bg color from leaking outside the border */
  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;
  bottom:-0.10000rem;
  text-indent: -99.99000rem;
  height:1.01000rem;
  background: url(../images/result_title.png) no-repeat center 0;
  background-size: 3.92000rem 1.01000rem;
}
.page-result .main-canvas{
  margin-top: -0.10000rem;
}
.result-panel{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  padding-top: 0.55000rem;
  padding-left: 0.66000rem;
}
.result-panel p{
  -webkit-box-sizing: border-box;
  -moz-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-bottom: 0.25000rem;
  -moz-border-radius: 0.16000rem;
  -webkit-border-radius: 0.16000rem;
  border-radius: 0.16000rem; /* border radius */
  border:2PX solid #d8b381;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  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;
  -moz-box-sizing: border-box;
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  display: block;
  width:2.63000rem;
  height:1.12000rem;
  padding-left: 0.68000rem;
  padding-top: 0.32000rem;
  margin-left: 1.20000rem;
  background: url(../images/continue_btn.png) no-repeat 0 0;
  background-size: 2.63000rem 1.12000rem;
  color: #533927; /* text color */
  font-size: 0.42000rem;

}
.status-bar{
  position: absolute;
  width:100%;
  bottom:0.01000rem;
  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.858823rem;height: 6.764705rem;margin-left: 0.32rem;}
.mf_tit{margin: 0 auto;margin-top: 0.6rem;font-size: 0.5rem;width: 6rem;text-align: center;}
.mf_back{background: url(../images/continue_btn.png) no-repeat;background-size: 2.63rem 1.12rem;width: 2.63rem;height: 1.12rem;position: absolute;bottom: 1rem;left: 2.15rem;text-align: center;font-size: 0.42rem;color: #533927;padding-left: 0.55rem;padding-top: 0.32rem;box-sizing: border-box;display: block}
.mf_li{list-style: none;width: 6.85rem;}
.mf_pic{width: 6.2rem;height: 6.2rem;margin-top: 0.3rem;margin-left: 0.35rem;object-fit: cover;}
.myface .item-wrapper{padding-top: 0;}
.myface .next-btn,
.myface .prev-btn{
  position: absolute;
  display: block;
  top:3.8000rem;
  width:0.59000rem;
  height:0.56000rem;
  background: url(../images/arrows.png) no-repeat 0 0;
  background-size: 1.25000rem 0.57000rem;
}
.myface .next-btn{
  right: 0rem;
  background-position: -0.69000rem 0;
}
.myface .prev-btn{
  left:0rem;
}