body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;font-size:66.3%;font-weight:normal;}
fieldset,img{border:0;}
ul,ol{list-style:none;}
table{border-collapse:collapse;border-spacing:0;}
a{text-decoration: none;color:#000;}
small{font-size:12px;}
h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;}
label,input,select,form img,button,textarea{vertical-align:middle;outline:none}
address,caption,cite,code,dfn,em,strong,th,optgroup{font-style:normal;font-weight:normal;}
.clear:after{content:".";display:block;height:0;clear:both;visibility:hidden;}
.clear{display:inline-block;}
/* Hides from IE-mac \*/
* html .clear{height:1%;}
.clear{display:block;}
/* End hide from IE-mac */
*{-webkit-tap-highlight-color:rgba(0,0,0,0) !important;}
html,body{position: fixed;width: 100%;height: 100vh;left: 0;top: 0;background:white;overflow: hidden;-webkit-user-select: none;user-select: none;overflow: auto;-webkit-overflow-scrolling:touch;}
body,input,select,textarea{}
img{border:none;outline: none}

@font-face {
    font-family: "55";
    src:url('55j.ttf');
}

@font-face {
    font-family: "65";
    src:url('65j.ttf');
}

@font-face {
    font-family: "font85";
    src:url('85j.ttf');
}

.container{position: relative;width: 750px;height: 100%;min-height: 1470px;}
.container .bg{width: 100%;position: absolute;left: 0;top: 0;}
.container .title{position: absolute;left: 0px;top: 113px;}
.container .hint1{position: absolute;left: 38px;top: 303px;font-size: 22px;padding: 10px 0 3px 0;border-bottom: 2px solid #ba2e25;color: white;letter-spacing: 2px;}

.homepage{position: absolute;width: 100%;height: 100%}
.homepage .top{display: block;width: 100%}
.homepage .btm{position: absolute;width: 100%;left: 0;bottom: 0}

.form{position: relative;}
.form .grid{position: relative;width: 464px;margin: 0 auto 20px auto;}
.form .grid .back{display: block;width: 100%}
.form .grid input{font-family: "55";position: absolute;left: 0;top: 0;width: 100%;height: 62px;line-height: 62px;box-sizing: border-box;padding-left: 80px;font-size: 22px;color: #a8abb2;border: none;outline: none;background: none}
.form .grid input::placeholder{color: #a8abb2}
.form .grid.holder2{display: none}
.form .grid .close_btn{position: absolute;right: 0;top: 0;width: 50px;height: 50px;}

.form .grid select{font-family: "55";position: absolute;left: 0;top: 0;width: 100%;height: 62px;line-height: 62px;box-sizing: border-box;padding-left: 80px;font-size: 22px;color: #a8abb2;border: none;outline: none;background: none;appearance: none;}

#upload_input{position: absolute;left: 0px;top: 0px;width: 100%;height: 100%;opacity: 0;}

.form .submit_btn{position: relative;width: 464px;display: block;margin: 0 auto;padding-top: 10px;}


.pop_alert{display: none;z-index: 999;position: fixed;width: 100%;height: 100%;left: 0;top: 0;}
.pop_alert .txt{font-size: 28px;line-height: 66px;height: 60px;padding:0 40px;color: white;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #5c5c5c;border-radius: 30px;white-space: nowrap;}

.upload_done_pop{background: #000;opacity: 0;visibility: hidden;transition: all 0.1s linear;position: absolute;left: 0;top: 0;width: 100%;height: 100%}
.upload_done_pop.show{opacity: 1;visibility: visible;}
.upload_done_pop .btn1{position: absolute;left: 0;bottom: 0;padding:40px;font-size: 40px;color: white;font-family: "55";}
.upload_done_pop .btn2{position: absolute;right: 0;bottom: 0;padding:40px;font-size: 40px;color: white;font-family: "55";}
.upload_done_pop .icon1{position: absolute;left: 250px;bottom: 50px;width: 50px;}
.upload_done_pop .icon2{position: absolute;right: 250px;bottom: 50px;width: 50px;}
#uploaded_pic{position: absolute;left: 0;top: 0;width: 100%;}
#generate_holder{position: absolute;left: 50%;top: 0;height: 100%;transform: translate(-50%,0);}


.result_pop{position: absolute;left: 0;top: 0;width: 100%;height: 100%;background: white;display: none;overflow-x: hidden}
.result_pop .poster_wrapper{position: absolute;left: 0;top: 0;width: 100%;height: 1000px;}
.result_pop .poster_wrapper #generate_avatar{position: absolute;left: 0;bottom: 0;width: 100%}
.result_pop .poster_wrapper .cover{position: absolute;left: 0;top: 0;width: 100%}
.result_pop .poster_wrapper #poster_label{position: absolute;right: 0;top: 250px;width: 262px;}
.result_pop .btm{position: absolute;left: 0;bottom: 0;width: 100%}
.result_pop .btn1{position: absolute;left: 50%;top: 1035px;transform: translate(-50%,0);}
.result_pop .btn2{position: absolute;left: 50%;top: 1135px;transform: translate(-50%,0);}
.result_pop #final_poster{position: absolute;left: -20%;top: 0;width: 140%;opacity: 0}
.result_pop .txt1{position: absolute;left: -10px;bottom: 45px;width: 320px;line-height: 60px;font-size: 50px;color: white;text-align: center;transform: rotate(-13deg);font-family: "font85";text-shadow:
    1px 1px 0 #d4003b,
    2px 2px 0 #d4003b,
    3px 3px 0 #d4003b,
    4px 4px 0 #d4003b;}

.result_pop #final_poster_second{position: absolute;left: 0%;top: 0;width: 100%;display: none}


canvas{position: absolute;left: -9999px;top: -9999px}
#waiting_pop{background: rgba(0,0,0,0.8);z-index: 9999;display: none;position: absolute;left: 0;top: 0;width: 100%;height: 100%}
#waiting_pop .back{position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);width: 90px;}