@charset "utf-8";
/* CSS Document */
*{-webkit-text-size-adjust:100%; font-size:29px; outline:none; font-family:"Microsoft YaHei"; margin:0; padding:0;}
*:focus{outline:none;}
body, button, input, select, textarea { font-size: 100%; margin:0 auto; font-family:"微软雅黑";}
body, h1, h2, h3, h4, h5, h6, dl, dt, dd, ul, ol, li, th, td, p, blockquote, pre, form, fieldset, legend, input, button, textarea, hr { margin: 0; padding: 0;}
table { border-collapse: collapse; border-spacing: 0; }
li { list-style: none; }
fieldset, img { border: 0; vertical-align: top;}
q:before, q:after { content: ''; }
input, textarea { outline-style: none; font-size:100%;}
input[type="text"], input[type="password"] {vertical-align:middle; }
input[type="text"], input[type="password"], textarea { outline-style: none; -webkit-appearance: none; }
textarea { resize: none; font-size:100%;}
address, caption, cite, code, dfn, em, i, th, var { font-style: normal; font-weight: normal; }
strong,b{ font-weight: normal;}
abbr, acronym { border: 0; font-variant: normal;}
ul{ list-style:none; overflow:hidden;}
a{ outline:none; text-decoration:none; display:inline-block; border:none; cursor: pointer; -webkit-tap-highlight-color: rgba(0,0,0,0);}

/*公用样式*/
html { height: 100%; height: 100%; overflow-x:hidden; overflow-y:hidden;}
body { width: 100%; height: 100%; background: #ffffff; overflow-x:hidden; overflow-y:hidden; position: fixed; top: 0; left: 0;}

.all_main{ width: 100%; height: 100%; position: relative;}
.section{ width: 100%; height: 100%; position: relative;}

/*预加载*/
.load_box{ width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 100; background:#fff; overflow: hidden;}
.load_box img{ width: 100%; height: auto;}
.progress_bar_bg{ width: 491px; height: auto; position: absolute; top: 40%; left: 74px;}
.progress_bar{ width: 481px; height: 24px; position: absolute; top: 40.4%; left: 80px; overflow: hidden; border-radius: 12px;}
.progress_bar img{ position: absolute; top: 0; left: -481px;}
.progress_btn{ width: 22px; height: auto; position: absolute; top: 39%; left: 70px;}
.loading_word{ width: 399px; height: auto; position: absolute; top: 45%; left: 120.5px;}
.code_word{ position: absolute; bottom: 10px; right: 20px; font-size: 15px; color: #000;}

/*画图*/
.wrapBox{ width:100%; max-width:640px; height: 100%; margin:0 auto; position:relative; display:block; overflow: hidden;}
.wrapBox img{ width:100%; height: auto;}

/*第一页*/
.page_1{ width: 100%; height: 100%; position: relative;}
.page_1 .page_word1{ width: 395px; height: auto; position: absolute; top: 10%; left: 122.5px;}
.page_1 ul{ width: 473px; height: 71%; position: absolute; top: 18%; left: 83px; overflow-y: scroll;}
.page_1 ul li{ width: 100%; height: auto; float: left; margin: 0 0 20px 0;}
.page_1 ul li:last-child{ margin-bottom: 10px;}
.page_1 .page_btn1{ width: 183px; height: auto; position: absolute; bottom: 36px; left: 228.5px;}

/*第二页*/
.page_2{ width: 100%; height: 100%; position: relative;}
.page_2 .page_word2{ width: 365px; height: auto; position: absolute; top: 14.2%; left: 137.5px;}
.page_2 .card_box5{ width: 473px; height: auto; position: absolute; top: 27%; left: 83.5px;}
.page_2 .card_box6{ width: 473px; height: auto; position: absolute; top: 54.6%; left: 83.5px;}
.page_2 .page_btn2{ width: 183px; height: auto; position: absolute; bottom: 90px; left: 228.5px;}

/*第三页（拼图）*/
.page_3{ width: 100%; height: 100%; position: relative;}
.page_3 .tips_box{ width: 362px; height: auto; position: absolute; top: 270px; left: 139px;}
.page_3 .page_word3{ width: 347px; height: auto; position: absolute; top: 2%; left: 146.5px;}
.page_3 .draw_box{ width: 467px; height: 701px; position: absolute; top: 100px; left: 86px; background: #ffffff; border: 1px solid #b9b9b9; overflow: hidden;}
.page_3 .draw_box .line_box{ width: 100%; height: 100%; margin: 0; position: absolute; top: 0; left: 0;}
.page_3 .draw_box .drawCanvas{ width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
.page_3 .element{ width: 500px; height: 120px; position: absolute; top: 810px; left: 82px; overflow-y: scroll; overflow-x: hidden;}
.page_3 .element .element_size{ width: 950px; height: 100px;}
.page_3 .element .element_box{ position: relative; width: 100px; height: 100px; float: left; margin: 0 24px 12px 0;}
.page_3 .element .element_box img{ width: 100%; height: 100%; position: absolute; transform-origin:center;}
.page_3 .element .add_element{ box-sizing:border-box; border:1px solid #b2b2b1;}
.page_3 .element .element_size1 img{ width: 92%; height: auto; margin: 40% 0 0 4%;}
.page_3 .element .element_size2 img{ width: 90%; height: auto; margin: 5%;}
.page_3 .element .element_size3 img{ width: 90%; height: auto; margin: 26% 0 0 5%;}
.page_3 .element .element_size4 img{ width: auto; height: 90%; margin: 5% 0 0 43%;}
.page_3 .element .element_size5 img{ width: auto; height: 90%; margin: 5% 0 0 41%;}
.page_3 .element .element_size6 img{ width: auto; height: 90%; margin: 5% 0 0 43%;}
.page_3 .element .element_line_box{ position: relative; width: 100px; height: 100px; float: left; margin: 0 24px 12px 0;}
.page_3 .element p{ width: 100%; float: left;}
.page_3 .element p.element_box_size{ width: 100%;}
.page_3 .autograph_btn{ width: 182px; height: auto; position: absolute; bottom: 20px; left: 107px; z-index: 10;}
.page_3 .autograph_change_btn{ display: none; width: 182px; height: auto; position: absolute; bottom: 20px; left: 107px; z-index: 10;}
.page_3 .preview_btn{ width: 182px; height: auto; position: absolute; bottom: 20px; right: 107px; z-index: 10;}
.page_3 .draw_size{ width: 433px; height: 663px; margin: 0; position: absolute; top: 17px; left: 17px; box-sizing:border-box; overflow: hidden;}
.page_3 .draw_size img{ width: 100%; height: auto; position: absolute;}
.page_3 .add_img{ width: 80%; position: absolute;}
.page_3 .add_img span.add_img_close{ width: 40px; height: 40px; position: absolute; top: -23px; left: -23px; background: url(../images/close.png) no-repeat; background-size: 100% 100%;}
/*第三页（签名）*/
.page_3 .autograph_main{ display: none; width: 467px; height: 701px; position: absolute; top: 0; left: 0; overflow: hidden;}
.page_3 .autograph_main canvas{ position: absolute; top: 0; left: 0;}
.page_3 .autograph_color{ display: none; width: 496px; height: 50px; line-height: 50px; position: absolute; top: 810px; left: 90px;}
.page_3 .autograph_color .autograph_color_title{ font-size: 24px; float: left; margin-right: 18px;}
.page_3 .autograph_color span{ width: 40px; height: 40px; border-radius: 50%; overflow: hidden; float: left; margin: 5px 30px 0 0; box-sizing:border-box;}
.page_3 .autograph_color span.choose{ border: 2px solid #00fff6;}
.page_3 .autograph_color span:nth-child(1){ background: #000;}
.page_3 .autograph_color span:nth-child(2){ background: #d32529;}
.page_3 .autograph_color span:nth-child(3){ background: #f7af19;}
.page_3 .autograph_color span:nth-child(4){ background: #77ae26;}
.page_3 .autograph_color span:nth-child(5){ background: #0070bc;}
.page_3 .autograph_color .autograph_word{ width: 100%; height: auto; float: left; text-align: left; font-size: 24px; color: #ff0000;}

/*第四页*/
.page_4{ width: 100%; height: 100%; position: relative;}
.page_4 .preview_main{ width: 450px; height: auto; position: absolute; top: 106px; left: 95px; background: #ffffff;}
.page_4 .preview_btn1{ width: 298px; height: auto; position: absolute; top: 794px; left: 171px;}
.page_4 .preview_btn2{ width: 298px; height: auto; position: absolute; top: 895px; left: 171px;}

/*第五页*/
.page_5{ width: 100%; height: 100%; overflow-y: scroll; position: relative;}
.page_5 .final_main{ width: 400px; height: auto; position: absolute; top: 268px; left: 120px; background: #ffffff;}


@media only screen and (max-width:480px){
    
}
@media only screen and (max-width:360px){
    
}
@media only screen and (max-width:320px){
    
}

.page_2,.page_3,.page_4,.page_5{ display: none;}/*正式*/

/*.page_1,.page_2,.page_4,.page_5{ display: none;}测试*/

.bgdiv{ position: absolute; top: 0; left: 0; z-index: 100; width: 100%; height: 100%; background: #000; opacity: 0.5; display: none;}
.img_zshow{ position: absolute; top: 36%; left: 4%; width: 92%; height: auto; z-index: 101; display: none;}
.img_zshow img{ width: 100%;}
.img_zshow .zshow_close{ width: 45px; height: 45px; position: absolute; top: -25px; right: -18px;}