@charset "utf-8";
/* CSS Document */

input[type="button"], input[type="submit"], input[type="reset"] {-webkit-appearance: none;}
textarea {  -webkit-appearance: none;}
.button{ border-radius: 0; }
*,h1,h3{margin:0;padding:0;word-break:break-all; box-sizing: border-box;}
ul,ul li{list-style:none}
a img{border:none}
i{font-style:normal}
body{color:#3a022a;font: 12px/20px Arial,'Microsoft Yahei';  background: linear-gradient(to bottom, #b86fc4, #ce9ade); text-align: left;}
a{color:#656c63;text-decoration: none; cursor: pointer;}
a:active,a:hover{color: #656c63; text-decoration: none;}
.clearfix{*zoom: 1;}
.clearfix:before,.clearfix:after{ display: table; content: '';}
.clearfix:after{clear: both;}
.l{float: left;_display: inline;}
.r{float: right;_display: inline;}
.wrap{width:100%; margin:0 auto 0px; max-width: 750px; }
.container{
    width: 100%;
    margin: 0 auto;
}
.top{width: 100%; margin: 0 auto; position: relative; top: 5%;}
.bottom{width: 100%;  margin: 0 auto;  position:relative;margin-top: 20px;}
.p1-c{width: 100%;position: relative; top: 25%;}
.p2-c{width: 100%; position: relative;top: 27%}
.p3-c{width: 100%; position: relative;top: 28%}
.up-div{width: 80%; margin: 0 auto 25px; background: #b27acb;border: 1px solid #000; min-height:200px; position: relative;}
.upload-btn{width: 100%; min-height:200px;overflow: hidden; display: block; text-align: center;}
.p3-c h2{ text-align: left;color: #3a022a;font-size: 12px; line-height: 32px; background: url(../../images/poster/arrow-l.png) no-repeat 0px 10px; padding-left: 6px;width: 84%; padding: 0px 3%;margin: 0 auto; background-size: 5px 6px;}
#preview-bg{max-width: 100%}
.pic{background: #a905c4; width: 80%; padding: 0px  8px 8px 5px;margin: 0px 12% 0px 8%; position: relative;}
.pic-r{width:16px;right: -19px; background: #fff; position: absolute;;top: 0px;margin-top:-20px; border: 1px solid #000}
.pic-l {width: 100%; position: relative;}
.pic-l .float-1{position: absolute; right: -40px; top: -60px; z-index: 1000}
.pic-l .float-2{position: absolute; right: -25px; top: 70%; z-index: 1000}
.up-div .float-3{position: absolute; left: 50%;top: 50%; margin-left: -75px; margin-top: -45px;z-index: 1000}
.up-div .float-1{position: absolute; right: -40px; bottom: -22px; z-index: 1000}
#image-input {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    outline: none;
    border-radius: 10px;
}
.pic-l .img_upload{width:100%;background: #cd99de;  border: 1px solid #000;margin-top: -20px;}
.xuany{width: 100%; position: relative;background: #cd99de; padding-bottom: 6px; text-align: left;margin: -6px auto 0px;}
.xuany h3{color: #3a022a;font-size: 12px; line-height: 18px; padding: 0px 5%;margin: 0 auto;  width:100%;}
.xuany h2{ color: #3a022a;font-size:16px; line-height: 28px;width: 100%; background: url(../../images/poster/arrow-ll.png) no-repeat 2px 11px;
           background-size: 9px 5px; padding: 0px 2% 0px 5%;margin: 0 auto;}
.p2-arrow{width: 100%;position: absolute; top: 88%; text-align: center;}
.p2-logo{width: 100%; position:absolute; bottom: 2%}

/* select */
.select{width: 80%;margin:0 auto; text-align: left;}
.select dt{width: 100%;height:40px;display:inline-block;border:1px solid #000;background:#cd99de  url(../../images/poster/arrow-b.png) no-repeat 98% 14px; background-size: 9px 8px; font-size: 12px;line-height:36px;padding-left:10px;cursor:pointer;padding-right:12px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.select dt:hover,.select dt.cur{border:1px solid #000;}
.select dd{position:absolute; width: 80%; min-height: 120px;left:10%;top:50%; margin-top: -80px;background:#cd99de;border:1px solid #000;display:none; z-index: 100000;-webkit-box-shadow: 0 0 12px #fff);
box-shadow: 0 0 12px #fff;}
.select dd ul{padding:10px;width:100%;}
.select dd ul li a{line-height:32px;display:block; font-size: 12px; color: #000}
.select dd ul li a:hover{background:#f5f5f5;}
.input-1{display: block;;width: 80%;margin:10px auto 25px;;height:40px;border:1px solid #000;background:#cd99de;font-size: 12px;line-height:36px;    padding:0px 10px;}
.ipt-btn{background: url(../../images/poster/but.png) no-repeat 0px 0px; width: 200px; height: 43px; margin: 0 auto; border: none; display: block;}
.p3-b{width: 88%; margin: 30px auto 0px;;padding-right: 60px;  padding-bottom: 45px;position: relative; font-size: 10px; line-height: 20px;}
.ml-div{position: absolute;;right: -15px; top: 0px; width: 100px;font-size: 6px!important; line-height: 16px; text-align: center;}
.ml-div img{max-width: 50px;display: block; margin: 0 auto 8px}
@media screen and (max-height: 570px)  {
.pic{background: #a905c4; width: 76%; padding: 0px  6px 6px 4px;margin: 0px 14% 0px 10%; position: relative;}
}
@media screen and (min-height: 570px)  and (max-height: 639px) {
/*.bottom{width: 100%;  margin: 0 auto; position: absolute;bottom:1%}*/
.p2-c{width: 100%; position: relative;;top: 23%}
}
@media screen and (min-height: 640px) {
/*.bottom{width: 100%;  margin: 0 auto; position: absolute;bottom:3%}*/
.p2-c{width: 100%; position: relative;;top: 25%}
}
@media screen and (min-height: 700px) {
/*.bottom{width: 100%;  margin: 0 auto; position: absolute;bottom:4%}*/
.p2-c{width: 100%; position: relative;;top: 26%}
}
@media screen and (min-height: 800px) {
/*.bottom{width: 100%;  margin: 0 auto; position: absolute;bottom:10%}*/
.p2-c{width: 100%; position: relative;;top: 26%}
}
.fat{  position: relative;}
.fat-but{position: absolute; bottom: 2%; text-align: center;width: 100%}
.fat #clipBtnr,.fat #clipBtn{display: inline-block;background: #fbd501; padding: 5px 15px; border: none}
#clipArea{width: 100%; height: 100%}
.btn{display:inline-block;margin:.3em;border:1px solid #10c7d3;background:#00b7c3;padding:.5em 1em;color:#fff;text-decoration:none;}
.pinch-zoom,.pinch-zoom img{width: 100%; -webkit-user-drag: none; -moz-user-drag: none; -ms-user-drag: none; user-drag: none; }
.viewerimg{transform: scale(1) translate(0px, 0px); }
.del{width:298px !important; height:320px !important; }
#file,#clipBtn {margin: 20px; }
#view {margin: 0 auto; width: 200px; height: 200px; background-color: #666; }
.overlays {background: #000; filter: alpha(opacity=70); /* IE的透明度 */ opacity: 0.7;  /* 透明度 */ position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; z-index: 1009; /* 此处的图层要大于页面 */ color:white;text-align: center;}
.overlays-b{opacity: 1 !important; height: 80px; position: absolute; width: 200px; top: 50%; left: 50%; margin-left: -100px; margin-top: -40px; }