html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary,time,mark,audio,video{margin: 0;padding: 0;
    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
input,select,textarea{margin: 0;padding: 0}
input,select{vertical-align: middle}
ul,ol{list-style: none}
ul,ol,li,dl,dt,dd,pre,form,fieldset,img,div{ margin: 0; padding: 0; border: none; }
img{ vertical-align: middle; border-style: none; max-width: 100%; object-fit: cover;}
textarea{resize: none}
a{text-decoration: none}
em{font-style: normal}
html{font-size: 100%;-webkit-text-size-adjust: 100%;-moz-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%}
*,*::after,*::before{-webkit-box-sizing: border-box; box-sizing: border-box; }
.clear{clear: both}
.clearfix{zoom: 1}
.clearfix:after{ content: "."; display: block; overflow: hidden; height: 0; clear: both; visibility: hidden}
b,strong{ font-weight:900;}

html,body{ font-size: 15px; width: 100%; line-height: 186%; background-color: #FFF; color:#323232; font-family:"Microsoft YaHei","Microsoft JhengHei","幼圆",Arial,Helvetica,sans-serif;}

/* Links Start */
a{color:#323232; text-decoration:none; outline:none !important;}
a:hover{color:#ff3938; text-decoration:none;} a:focus{outline:thin dotted;} a:hover,a:active{outline:0;}
a, a:hover, a:focus { color:#333; text-decoration: none; }
/* Links End */

.reds { color:#ff3938;}

/* Input Style Start */
.input-style { background-color: #f7f7f7; width: 100%; border:0; outline: 0; font-size: 20px; padding: 15px 14px; color: #1a1a1a; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
/* Input Style End */

/* Textarea Style Start */
.textarea-style { background-color: #f7f7f7; border: 0; outline: 0; font-size: 20px; font-weight: 500; padding: 15px; box-sizing: border-box;resize: none;-moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
/* Textarea Style End */


/* Body Mask Start */
.body-mask { position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%; z-index:9999; background-color:rgba(0,0,0,0.43); display:none; opacity:0; transition:all .3s}
    .body-mask.active { display:block; opacity:1;}
/* Body Mask End */

/* Prompt Hand Start */
#prompt-hand { display:none; position: fixed; left: 0; bottom: 0; z-index: 99999; width: 100%; overflow: hidden;}
    #prompt-hand.active { display: block;}
    #prompt-hand .boxs { margin: 0 auto; background-color: #fff; box-sizing: border-box; max-width: 600px; border-top-left-radius: 16px; border-top-right-radius: 16px; height: 85vh;}

    #prompt-hand .boxs .title { font-size: 24px; font-weight: 500; text-align: center; padding: 35px 20px 20px 20px;}
    #prompt-hand .boxs .title .close { float: right; width: 20px; margin-top: -2px; cursor: pointer;}

    #prompt-hand .boxs .handpiece { padding: 0 20px 260px; overflow: hidden; max-height: 85vh; position: relative;}
    #prompt-hand .boxs .handpiece::-webkit-scrollbar { display: none;}
    #prompt-hand .boxs .handpiece:hover { overflow-y: scroll;}
    #prompt-hand .boxs .handpiece .name { width: 100%; display: block; font-size: 24px; font-weight: 500; margin-bottom: 15px;}

    #prompt-hand .boxs .handpiece ul.list-hand-img li { margin-bottom: 15px;}

    #prompt-hand .boxs .confirm { position: fixed; width: 100%; left: 0; bottom: 0;}
    #prompt-hand .boxs .confirm .submit { max-width: 600px; margin: 0 auto; height: 156px; width: 100%; border-top: 2px solid #ddd; background-color: #fff; text-align: center;}
    #prompt-hand .boxs .confirm .submit button { cursor: pointer; width: 90%; margin: 35px auto 0 auto; padding: 20px 0; background-color: #ffdf39; letter-spacing: 5px; font-size: 24px; border: none; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; overflow: hidden;}
    #prompt-hand .boxs .confirm .submit button[disabled] { background-color: rgb(172, 172, 172); color: white;}
/* Body Hand End */

/* Container Star */
.container { margin: 0 auto; padding: 20px 20px 188px 20px; background-color: #f7f7f7; box-sizing: border-box; max-width: 600px; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
.container.view { padding-bottom: 30px;}
/* Container End */

/* Container Star */
.ellipse-white { padding: 15px 20px; background: #fff; -moz-border-radius: 16px; -webkit-border-radius: 16px; border-radius: 16px; box-shadow: 0 8px 16px 0 #00000005; overflow: hidden;}
/* Container End */

/* Orders Info Star */
.orders-info { width: 100%; }
    .orders-info .title { float: left; font-size: 24px;font-weight: 500; color: #1a1a1a;}
    .orders-info .order { float: right; }
    .orders-info .order .code { float: left; font-size: 22px; color: #7b7b7b; font-weight: 400; margin-top: 3px; margin-right: 5px;}
    .orders-info .order .copy { float: right; cursor: pointer; font-size: 20px; padding: 1px 15px 2px; border: 1px solid #d2d2d2; -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; overflow: hidden;}
/* Orders Info End */

/* Contact Info Star */
.contact-info { width: 100%; margin-top: 16px;}
    .contact-info .title { font-size: 24px; font-weight: 500; color: #1a1a1a;}
    .contact-info .title span.reds { margin-left: 5px;}
    .contact-info .title .desc { width: 100%; font-size: 18px; font-weight: 400; color: #7b7b7b; display: block; margin-top: 6px;}
    .contact-info .form { margin-top: 10px;}
/* Contact Info End */

/* Select Hand Star */
.select-hand { width: 100%; margin-top: 16px;}
    .select-hand .title { font-size: 24px; font-weight: 500; color: #1a1a1a;}
    .select-hand .title .modify { float: right; color: #7b7b7b; font-size: 20px; padding-top: 1px;}
    .select-hand .title .modify i { margin-left: 5px;}
    .select-hand .hand-img {}
    .select-hand .hand-img img { margin-top: 20px; cursor: pointer; border: 1px solid rgb(255, 255, 255); float: left; width: 33.333333%; box-sizing: border-box; background-color: #f7f7f7; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
/* Select Hand End */


/* Diy Photo Star */
.diy-photo { width: 100%; margin-top: 16px;}
    .diy-photo .title { font-size: 24px; font-weight: 500; color: #1a1a1a;}
    .diy-photo .title span.reds { margin-left: 5px;}

    .diy-photo .image { margin: 15px auto; width: 100%; display: block; background-color: #d9d9d9; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
    .diy-photo .intro { margin-bottom: 15px; font-weight: 400; line-height: 24px; color: #7b7b7b; font-size: 17px; display: block;}


    .diy-photo ul.list { }
    .diy-photo ul.list li { margin-bottom: 15px;}

    .diy-photo ul.list li.main .multiPartUpload { cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}

    .diy-photo ul.list li .left { float: left; text-align: center; width: 160px; height: 160px; background-color: #f7f7f7;  position: relative; box-sizing: border-box; display: grid; align-items: center; justify-items:center; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
    .diy-photo ul.list li .left img { width: 100%; height: 100%;}

    .diy-photo ul.list li .left .tag { position: absolute; left: 0; top: 0; padding: 5px 15px; line-height: 1; font-size: 16px; color: #FFF; background-color: rgba(0,0,0,.5);border-top-left-radius: 12px; border-bottom-right-radius: 12px;}

    .diy-photo ul.list li .right { float: right; width: calc(100% - 175px); background-color: #f7f7f7; height: 160px; display: block; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}

    .diy-photo .upload { }
    .diy-photo .upload .left { float: left; text-align: center; width: 160px; height: 160px; background-color: #f7f7f7;  position: relative; box-sizing: border-box; display: grid; align-items: center; justify-items:center; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
    .diy-photo .upload .left .plus { }
    .diy-photo .upload .left .multiPartUpload { cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}
    .diy-photo .upload .right { float: right; width: calc(100% - 175px); background-color: #f7f7f7; height: 160px; display: block; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
/* Diy Photo End */

/* Print Photos Star */
.print-photos { width: 100%; margin-top: 16px;}
    .print-photos .title { font-size: 24px; font-weight: 500; color: #1a1a1a;}
    .print-photos .title span.reds { margin-left: 5px;}
    .print-photos .image { margin: 15px auto; width: 100%; display: block; background-color: #d9d9d9; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
    .print-photos .intro { margin-bottom: 15px; font-weight: 400; line-height: 24px; color: #FF0000; font-size: 17px; display: block;}

    .print-photos .upload { }
    .print-photos .upload .box { float: left; text-align: center; width: 160px; height: 160px; background-color: #f7f7f7;  position: relative; box-sizing: border-box; display: grid; align-items: center; justify-items:center; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
    .print-photos .upload .box img { width: 100%; height: 100%;}
    .print-photos .upload .box .tag { display: none; position: absolute; left: 0; top: 0; padding: 5px 15px; line-height: 1; font-size: 16px; color: #FFF; background-color: rgba(0,0,0,.5);border-top-left-radius: 12px; border-bottom-right-radius: 12px;}
    .print-photos .upload.ok .box .tag { display: block;}
    .print-photos .upload .box .multiPartUpload { cursor: pointer; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0;}

    .print-photos .upload .del-print-photos { display: none; float: right; width: 30px; padding-top: 65px;}
    .print-photos .upload.ok .del-print-photos { display: block;}
/* Print Photos End */


/* Base Printing Star */
.base-printing { width: 100%; margin-top: 16px;}
    .base-printing .title { font-size: 24px; font-weight: 500; color: #1a1a1a;}
    .base-printing .title span.reds { margin-left: 5px;}

    .base-printing .image { margin: 15px auto; width: 100%; display: block; background-color: #d9d9d9; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
    .base-printing .intro { margin-bottom: 15px; font-weight: 400; line-height: 24px; color: #7b7b7b; font-size: 17px; display: block;}
/* Base Printing End */

/* System Upload Star */
.system-upload { width: 100%; margin-top: 16px;}
    .system-upload .title { font-size: 24px; font-weight: 500; color: #1a1a1a;}
    .system-upload .title span.reds { margin-left: 5px;}

    .system-upload .image { margin: 15px auto; width: 100%; display: block; background-color: #d9d9d9; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
    .system-upload .intro { margin-bottom: 15px; font-weight: 400; line-height: 24px; color: #7b7b7b; font-size: 17px; display: block;}
    .system-upload .intro.reds { color: #ff3938;}

    .system-upload .content .box { float: left; text-align: center; width: 32.000000%; height: 160px; margin-bottom: 10px; margin-right: 2.000000%; background-color: #f7f7f7;  position: relative; box-sizing: border-box; display: grid; align-items: center; justify-items:center; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
    .system-upload .content .box:nth-child(3n) { margin-right: 0;}
    .system-upload .content .box i { font-size: 42px;}
    .system-upload .content .box:last-child { margin-right: 0;}

    .system-upload .content .box .tips { position: absolute; top: 0; left: 0; color: #FFF; line-height: 1; background: #ff3938; font-size: 12px; padding: 5px 10px; -moz-border-radius: 12px 0 12px 0; -webkit-border-radius: 12px 0 12px 0; border-radius: 12px 0 12px 0; overflow: hidden;}

    .system-upload .content .confirm { text-align: center; line-height: 1.2;  margin: 0 auto;}

    .system-upload .content .confirm button { display: block; margin: 0 auto; outline: 0; padding: 8px 20px; background-color: #ffdf39; border: none;-moz-border-radius: 36px;-webkit-border-radius: 36px;border-radius: 36px;overflow: hidden;}

/* System Upload End */

/* Order Confirm Star */
.order-confirm { position: fixed; width: 100%; left: 0; bottom: 0; }
    .order-confirm .submit { max-width: 600px; margin: 0 auto; height: 148px; width: 100%; border-top: 2px solid #ddd; border-left: 1px solid #ddd; border-right: 1px solid #ddd; background-color: #fff; text-align: center; }
    .order-confirm .submit button { cursor: pointer; width: 90%; margin: 35px auto 0 auto; padding: 20px 0; background-color: #ffdf39; letter-spacing: 5px; font-size: 24px; border: none; -moz-border-radius: 36px; -webkit-border-radius: 36px; border-radius: 36px; overflow: hidden;}
    .order-confirm .submit button[disabled] { background-color: rgb(172, 172, 172); color: white;}
/* Order Confirm End */

/* View Image Star */
#view-image { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%;}
    #view-image .layer { background: #000; max-width: 600px; height: 100%; margin: 0 auto;}
    #view-image .layer .head { line-height: 72px; background-color: #ededed; width: 100%; box-sizing: border-box; padding: 0 25px; }
    #view-image .layer .head .left { width: 30px;  float: left;}
    #view-image .layer .head .center { width: calc(100% - 60px); float: left; text-align: center; font-size: 26px; font-weight: 500;}
    #view-image .layer .head .right { width: 30px; float: right;}
    #view-image .layer .image { text-align: center; padding-top: 8%; padding-bottom: 8%; line-height: 100%; height: calc(100vh - 72px); display: flex; align-items: center; justify-content: center;}
    #view-image .layer .image img { max-width: 100%; max-height: 100%;}
/* View Image End */

/* Floating Icon Star */
#floating-icon { position: fixed; cursor: pointer; z-index: 999999; bottom: 10px; right: 10px; }
    #floating-icon ul li { margin-bottom: 3px;}
    #floating-icon ul li:last-child { margin-bottom: 0;}
    #floating-icon ul li .icons { transition: 0.5s; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; display: block; text-align: center; width: 42px; height: 42px; line-height: 38px !important; font-size: 16px;border-radius: 50%;color: #FFF;background: #ff3938;-webkit-box-shadow: 0px 0 24px 0px rgba(0, 0, 0, 0.08); -moz-box-shadow: 0px 0 24px 0px rgba(0, 0, 0, 0.08); box-shadow: 0px 0 24px 0px rgba(0, 0, 0, 0.08); behavior: url(ie-css3.htc);}
    #floating-icon ul li.tops { display: none; }
    #floating-icon ul li:hover .icons { background: #ff3938;}
/* Floating Icon End */


/* List Hand Img Star */
ul.list-hand-img { }
    ul.list-hand-img li { cursor: pointer; border: 1px solid rgb(255, 255, 255); float: left; width: 32.000000%; margin-right: 2.000000%; box-sizing: border-box; background-color: #f7f7f7; -moz-border-radius: 12px; -webkit-border-radius: 12px; border-radius: 12px; overflow: hidden;}
    ul.list-hand-img li:nth-child(3n) { margin-right: 0;}

    ul.list-hand-img li.active { border: 1px solid rgb(255, 223, 57);}
/* List Hand Img End */

/* Tips System Start */
#tips-system { text-align: center; margin-top: 2vh;}
    .tips-system { cursor: pointer; display: inline-block; line-height: 1.2; margin: 0 auto; padding: 1.5vh 3vh; background: #ff0000; color: #FFF; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px; overflow: hidden;}
/* Tips System End */

/* pointMove Star */
@keyframes pointMove { 0% { transform: translate(0, -6px); } 100% { transform: translate(0, 6px); } }
/* pointMove End */

/* <600的设备 */
@media screen and (max-width: 600px){

    /* Prompt Hand Start */
    #prompt-hand .boxs .title { font-size: 18px; padding: 25px 10px 10px 10px;}

    #prompt-hand .boxs .handpiece { padding-bottom: 150px;}

    #prompt-hand .boxs .handpiece .name { font-size: 16px; margin-bottom: 10px;}

    #prompt-hand .boxs .confirm .submit { height: 72px; width: 100%;}
    #prompt-hand .boxs .confirm .submit button { margin: 15px auto 0 auto; padding: 5px 0; font-size: 20px;}
    /* Body Hand End */

    /* Container Star */
    .container { padding: 10px 10px 92px 10px;}
    /* Container End */

    /* Container Star */
    .ellipse-white { padding: 12px 18px;}
    /* Container End */

    /* Input Style Start */
    .input-style { font-size: 15px; padding: 12px 14px;}
    /* Input Style End */

    /* Textarea Style Start */
    .textarea-style { font-size: 14px; padding: 10px;}
    /* Textarea Style End */

    /* Orders Info Star */
    .orders-info .title { font-size: 19px;}
    .orders-info .order { float: right; }
    .orders-info .order .code { font-size: 16px; margin-top: 0; margin-right: 5px;}
    .orders-info .order .copy { font-size: 12px; padding: 0 6px 0; -moz-border-radius: 6px;-webkit-border-radius: 6px; border-radius: 6px;}
    /* Orders Info End */

    /* Contact Info Star */
    .contact-info { margin-top: 12px;}
    .contact-info .title { font-size: 19px;}
    .contact-info .title .desc { font-size: 13px; margin-top: 0;}
    .contact-info .form { margin-top: 5px;}
    /* Contact Info End */

    /* Select Hand Star */
    .select-hand { margin-top: 12px;}
    .select-hand .title { font-size: 19px;}
    .select-hand .title .modify { font-size: 15px;}
    .select-hand .hand-img img { margin-top: 20px;}
    /* Select Hand End */


    /* Diy Photo Star */
    .diy-photo { margin-top: 12px;}
    .diy-photo .title { font-size: 19px;}
    .diy-photo .image { margin-top: 8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;}
    .diy-photo .intro { margin-bottom: 5px; line-height: 18px; font-size: 13px;}

    .diy-photo ul.list li { margin-bottom: 10px;}
    .diy-photo ul.list li .left { width: 110px; height: 110px;}

    .diy-photo ul.list li .left .tag { font-size: 14px;}

    .diy-photo ul.list li .right { width: calc(100% - 120px); height: 110px;}

    .diy-photo .upload .left { width: 110px; height: 110px;}
    .diy-photo .upload .right { width: calc(100% - 120px); height: 110px;}
    /* Diy Photo End */

    /* Print Photos Star */
    .print-photos { margin-top: 12px;}
    .print-photos .title { font-size: 19px;}
    .print-photos .image { margin-top: 8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;}
    .print-photos .intro { margin-bottom: 5px; line-height: 18px; font-size: 13px;}

    .print-photos .upload .box { width: 110px; height: 110px;}
    .print-photos .upload .box .tag { font-size: 14px;}

    .print-photos .upload .del-print-photos { width: 30px; padding-top: 35px;}
    /* Print Photos End */

    /* Base Printing Star */
    .base-printing { margin-top: 12px;}
    .base-printing .title { font-size: 19px;}

    .base-printing .image { margin-top: 8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;}
    .base-printing .intro { margin-bottom: 5px; line-height: 18px; font-size: 13px;}
    /* Base Printing End */

    /* System Upload Star */
    .system-upload { margin-top: 12px;}
    .system-upload .title { font-size: 19px;}

    .system-upload .image { margin-top: 8px; -moz-border-radius: 6px; -webkit-border-radius: 6px; border-radius: 6px;}
    .system-upload .intro { margin-bottom: 5px; line-height: 18px; font-size: 13px;}

    .system-upload .content .box { height: 110px;}
    /* System Upload End */

    /* Order Confirm Star */
    .order-confirm .submit { height: 72px; width: 100%;}
    .order-confirm .submit button { margin: 15px auto 0 auto; padding: 5px 0; font-size: 20px;}
    /* Order Confirm End */

    /* View Image Star */
    #view-image .layer .head { line-height: 50px;}
    #view-image .layer .head .left { width: 20px;}
    #view-image .layer .head .center { width: calc(100% - 40px); font-size: 18px;}
    #view-image .layer .head .right { width: 20px;}
    #view-image .layer .image { height: calc(100vh - 50px);}
    /* View Image End */

    /* Floating Icon Star */
    #floating-icon ul li .icons { width: 32px; height: 32px; line-height: 30px !important;}
    /* Floating Icon End */

}