@charset "utf-8";
:lang(en),:lang(fr),:lang(es),:lang(vi),:lang(th){font-family:'Arial',sans-serif;}
:lang(ko){font-family:'Malgun Gothic','돋움','Arial',sans-serif;}
:lang(ja){font-family:'Arial','MS Gothic',Helvetica,sans-serif;}
:lang(zh-CN){font-family:'Arial','Microsoft Yahei',sans-serif;}
:lang(zh-HK){font-family:'Arial','Microsoft JhengHei',sans-serif;}
html{-webkit-tap-highlight-color:rgba(50,101,186,.2);-webkit-tap-highlight-color:rgba(50,101,186,.2);}
body{font-family:'Malgun Gothic','돋움','Arial',sans-serif;background:#fff;color:#202020;font-size:1.3rem;font-style:normal;font-weight:400;letter-spacing:-.7px}
header,footer,nav,section,article,aside{display:block;}
*{margin:0;padding:0;font-family:'Malgun Gothic','돋움','Arial',sans-serif;-webkit-box-sizing:border-box;box-sizing:border-box;-moz-box-sizing:border-box;resize:none;outline:0;}
a{color:#5d5d5d;text-decoration:none;font-family:inherit;}
ul,ol{list-style:none;}
input{vertical-align:top;}
ul,ol,dl,menu,li{padding:0;margin:0;list-style:none;}
h1,h2,h3,h4,h5,h6,strong{margin:0;font-weight:700}
a{color:inherit;text-decoration:none;-webkit-transition:all 0.2s ease;-ms-transition:all 0.2s ease;transition:all 0.2s ease;cursor:pointer}
a:hover,a:active,a:focus{text-decoration:none;outline:none}
table{border-spacing:0;width:100%;empty-cells:show;table-layout:fixed;border-collapse:collapse;}
legend,caption{display:none;}
img,fieldset,iframe{border:0}
button,input,optgroup,select,textarea{padding:0;font-family:inherit;font-size:inherit;color:inherit;vertical-align:middle;outline:none;-o-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
input,textarea,select{border:1px solid #ccc;color:rgba(0,0,0,0.6);outline:none;padding:.6rem 1.2rem;background:#fff;-webkit-transition:border-color ease-in-out .15s;-o-transition:border-color ease-in-out .15s;transition:border-color ease-in-out .15s}
textarea{height:auto;overflow:auto;resize:none;}
input[type="checkbox"],input[type="radio"]{vertical-align:middle;outline:none;-o-box-sizing:border-box;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;}
select[disabled],input[disabled],input[readonly],textarea[readonly],textarea[disabled]{background-color:#e0e0e0;opacity:1;}
input[disabled],select[disabled]{cursor:not-allowed!important;}
input.error{border-color:#ef5350;box-shadow:none;}
input.error:focus{border-color:#843534;}
input{background:#fff;outline:0;box-sizing:border-box;font-family:inherit;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
textarea:focus,input:focus,select:focus{outline:none;background:#ffffff;border-color:#a2a2a2;}
/*input::-webkit-input-placeholder,input:-ms-input-placeholder,input::-moz-placeholder,input::placeholder,textarea:placeholder{color:#b8b8b8;opacity:1;}*/
input:-webkit-autofill,input:-webkit-autofill:hover,input:-webkit-autofill:focus
textarea:-webkit-autofill,textarea:-webkit-autofill:hover
textarea:-webkit-autofill:focus,select:-webkit-autofill,select:-webkit-autofill:hover,select:-webkit-autofill:focus{border:1px solid #e0e0e0;-webkit-text-fill-color:#666;-webkit-box-shadow:none;}
select{padding:0 0 0 .6rem;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
select::-ms-expand{display:none;}
button{display:inline-block;font-family:inherit;vertical-align:middle;cursor:pointer;white-space:nowrap;text-decoration:none;background:transparent;border:none;outline:0;*overflow:visible;}
button[disabled],input[disabled]{cursor:default}
button::-moz-focus-inner{border:0;padding:0;}
img{max-width:100%;vertical-align:middle;width:100%;height:auto}





* {
    margin : 0;
    padding: 0;
}

.h1 {
    padding   : 10px;
    text-align: center;
}

.menu {
    text-align: center;
}

.menu nav {
    display    : inline-block;
    padding    : 20px;
    font-size  : 20px;
    font-weight: bold;
    cursor     : pointer;
}

.menu nav.active {
    color: #42b983;
}


.main {
    position: relative;
    z-index : 1;
}

.main .create {
    text-align: center;
}

.main .create input {
    position : relative;
    margin   : 20px 0;
    padding  : 12px;
    width    : 300px;
    font-size: 18px;
    border   : 1px solid #42b983;
    overflow : hidden;
}

.main .create input[type="button"] {
    color     : white;
    border    : none;
    background: #42b983;
    cursor    : pointer;
}

.main .create .qrcode img {
    margin       : 20px auto;
    padding      : 30px;
    width        : 360px;
    height       : 360px;
    border-radius: 8px;
    border       : 2px solid gray;
}

.main {
    display   : none;
    text-align: center;
    font-size : 16px;
}

.main .sweep {
    position  : relative;
    margin    : 20px;
    padding   : 12px;
    width     : 300px;
    font-size : 18px;
    cursor    : pointer;
    color     : white;
    background: #42b983;
    border    : 1px solid #42b983;
    overflow  : hidden;
}

.main .sweep input {
    position : absolute;
    font-size: 100px;
    opacity  : 0;
}

.main .imgurl {
    margin    : 20px;
    text-align: center;
    display: none;
}

.main .imgurl img {
    margin       : 20px;
    padding      : 10px;
    border       : 1px solid gray;
    border-radius: 8px;
    width        : 280px;
    height       : 260px;
}

.main .result {
    box-sizing   : border-box;
    padding      : 10px;
    border       : 1px solid gray;
    border-radius: 8px;
    font-size    : 16px;
    display: none;
}

.main .canvas {
    display   : none;
    box-sizing: border-box;
    position  : fixed;
    top       : 0;
    right     : 0;
    bottom    : 0;
    left      : 0;
    width     : 100vw;
    height    : 100vh;
    z-index: 9999;
}
.tabbar-bottom {
    position: fixed;
    display: flex;
    z-index: 998;
    box-sizing: border-box;
    background-color: rgb(255, 255, 255);
    backdrop-filter: none;
    bottom: 0;
    right: 0;
    left: 0;
    margin: 0 auto;
    justify-content: space-around;
}
.tabbar-bottom .tabbar-icon {
    width: 30px;
    height: 30px;
    position: relative;
    display: inline-block;
    margin-top: 5px;
}
.tabbar-item {
    /*display: -webkit-box;*/
    /*display: -webkit-flex;*/
    /*display: flex;*/
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    align-items: center;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
}
.tabbar-item.on .tabbar-label {
    color: rgb(18, 150, 219);
}
.tabbar-label {
    color: rgb(122, 126, 131);
    font-size: 14px;
    line-height: normal;
    margin-top: 3px;
    position: relative;
    text-align: center;
}
.tabbar-border {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 1px;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
}