* {
  box-sizing: border-box;
}
body {
    height: 100vh;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: start;
    font-family: 'Open Sans', sans-serif;
    background-color: #e5e5e5;
}
#stage {
    --r: 480 / 750;
    --w: 480;
    --h: 750;
    aspect-ratio: var(--r);
    width:min(100%, min(480px, 100vh*(var(--r))));
}
#active {
    width: 100%;
    height: 100%;
    overflow: hidden;
}
#pages {
    width: 100%;
    height: 300%;
    position: relative;
    top: 0;
    overflow: hidden; 
}
.step {
    width: 100%;
    height: 33.333%;
}
.bx01 {
    position:relative;
    top: calc(20/var(--h)*100%);
    left: calc(14/var(--w)*100%);
    width: calc(452/var(--w)*100%);
    height: calc(69/var(--h)*100%);   
    display: flex;
    justify-content: center;
    align-items: center;  
    border-radius: 3% 3% 0 0 / 19% 19% 0 0; 
    font-size: min(3.6cqh, 27px);
    font-weight: 700; 
    color: #606060;
    background-color: #eeeeee;
    border-width: 1px; 
    border-style: solid solid none solid;
    border-color: #fafafa;
    box-shadow: 0 1px 3.5px -1px #6a6a6a;
}
.bx02 {
    position:relative;
    width: calc(451/var(--w)*100%);
    height: calc(531/var(--h)*100%);  
    display: flex;
    justify-content: center;
    align-items: center; 
    border-radius: 0 0 1.139% 1.139% / 0 0 1.342% 1.342%; 
    background-color: #ffffff;
    margin: 4.25% 0 0 2.917%;
    border:2px solid #d9d9d9;
}
.fld {
    width: 91%;
    height: 95.5%;
    display: flex; 
    justify-content: start;
    align-items: start;
    font-size: min(4.9cqh, 37px);
    line-height: min(6cqh, 44px);
    font-weight: 700; 
    color: #2c2f2a; 
    word-break: break-all;    
}
#c01:hover, #a01:hover, #c02:hover, #y01:hover, #y02:hover, #y03:hover, #y04:hover, #y05:hover, #y06:hover, #y07:hover, #y08:hover, #y09:hover, #y10:hover,
#y11:hover, #y12:hover, #a02:hover, #c03:hover {
    cursor: pointer; 
}
.bx03 { 
    width: calc(452/var(--w)*100%);
    height: calc(88/var(--h)*100%);  
    display: flex;
    justify-content: center;
    align-items: center;  
    border-radius: 10.6% / 50%; 
    background-color: #eeeeee;
    margin: 4% 3% 0 3%;
    border:1px solid #fafafa;
    box-shadow: 0 1px 3.5px -1px #6a6a6a;
}
.pst {
    width: calc(39/450*100%);
    height: calc(39/86*100%);      
    display: flex; 
}
.i01 {
    width: 100%;
    height: 100%;  
    background-image: url("i01.svg");
    background-size: contain;
    background-repeat: no-repeat;
    filter: opacity(80%);
}
#noti {
    position: relative;
    width: calc(451/var(--w)*100%);
    height: calc(69/var(--h)*100%);       
    display: flex; 
    justify-content: center;
    align-items: center; 
    font-size: min(3.05cqh, 23px);
    font-weight: 700; 
    margin: -36.8% 0 0 3%;
    border-radius: 1.3% / 8.7%; 
}
.n1 {
    color: #a2002d; 
    border:2px solid #ec6f90;
    background-color: #ff8ba9;
}
.n2 {
    color: #a26300; 
    border:2px solid #fac061;
    background-color: #ffd48b;
}
.n3 {
    color: #019e00; 
    border:2px solid #6ce66d;
    background-color: #88f988;
}
.bx04 {
    width: calc(452/var(--w)*100%);
    height: calc(93/var(--h)*100%);       
    display: flex;
    justify-content: center;
    align-items: center;  
    border-radius: 0 0 2.8% 2.8% / 0 0 14.6% 14.6%; 
    font-size: min(4.9cqh, 37px);
    font-weight: 700; 
    color: #454545;
    background-color: #eeeeee;
    border-width: 1px; 
    border-style: none solid solid solid;
    border-color: #fafafa;
    box-shadow: 0 1px 3.5px -1px #6a6a6a;
    margin-top: calc(1/var(--h)*100%);
    margin-left: 3%;
}
.bx05 {
    width: calc(451/var(--w)*100%);
    height: calc(104/var(--h)*100%);    
    display: flex;
    justify-content: center;
    align-items: center; 
    border-radius: 0 0 1.139% 1.139% / 0 0 1.342% 1.342%; 
    border:2px solid #d9d9d9;
    border-radius: 2% 2% 2% 2% / 10.6% 10.6% 10.6% 10.6%; 
    background-color: #ffffff;
    margin: 5% 0 0 2.917%;
}
.bx06 {
    width: calc(441/var(--w)*100%);
    height: calc(364/var(--h)*100%); 
    margin: 5% 0 0 4%; 
    background-color: #d7d7d7;
}
.amount {
    font-size: min(6.4cqh, 48px);
    font-weight: 700; 
    color: #2c2f2a; 
}
.currency {
    font-weight: 800;
    font-size: min(4.2vh, 32px);
    color: #cacaca; 
}
.b {
    float: left;
    display: flex;
    justify-content: center;
    align-items: center; 
    width: calc(100% / 3 - min(0.4vh, 3px) / 3 * 2);
    height: calc(100% / 4 - min(0.4vh, 3px) / 4 * 3); 
    background-color: #e5e5e5;
}
.r1 {
    margin-bottom: min(0.4vh, 3px);
    margin-right: min(0.4vh, 3px); 
    border-radius: 0 0 9% 0 / 0 0 14.6% 0; 
}
.r2 {
    margin-bottom: min(0.4vh, 3px);
    margin-right: min(0.4vh, 3px);
    border-radius: 0 0 9% 9% / 0 0 14.6% 14.6%; 
}
.r3 {
    margin-bottom: min(0.4vh, 3px);
    border-radius: 0 0 0 9% / 0 0 0 14.6%; 
}
.r4 {
    margin-bottom: min(0.4vh, 3px);
    margin-right: min(0.4vh, 3px);
    border-radius: 0 9% 9% 0 / 0 14.6% 14.6% 0; 
}
.r5 {
    margin-bottom: min(0.4vh, 3px);
    margin-right: min(0.4vh, 3px);
    border-radius: 9% 9% 9% 9% / 14.6% 14.6% 14.6% 14.6%; 
}
.r6 {
    margin-bottom: min(0.4vh, 3px);
    border-radius: 9% 0 0 9% / 14.6% 0 0 14.6%; 
}
.r7 {
    margin-right: min(0.4vh, 3px);
    border-radius: 0 9% 0 0 / 0 14.6% 0 0; 
}
.r8 {
    margin-right: min(0.4vh, 3px); 
    border-radius: 9% 9% 0 0 / 14.6% 14.6% 0 0; 
}
.r9 {
    border-radius: 9% 0 0 0 / 14.6% 0 0 0; 
}
.pad1 {
    position:relative;
    top:-3%;
    font-size: min(6.6vh, 40px);
    font-weight: 700; 
    color: #454545;    
}
.pad2 {
    font-size: min(6.6vh, 40px);
    font-weight: 700; 
    color: #454545;    
}
.pad3 {
    position:relative;
    top: 3%;
    font-size: min(6.6vh, 40px);
    font-weight: 700; 
    color: #454545;    
}
.bsp {
    width: 26.1%;
    height: 31.4%;
    margin-top: 6%;
}
.i08 {
    width: 100%;
    height: 100%;  
    background-image: url("i08.svg");
    background-size: contain;
    background-repeat: no-repeat;
    filter: opacity(70%);
}
.m01 {
    margin-top: 6.4%;
}
.i07 {
    width: 100%;
    height: 100%;  
    background-image: url("i07.svg");
    background-size: contain;
    background-repeat: no-repeat;
    filter: opacity(80%);
}
.bx07 {
    width: calc(452/var(--w)*100%);
    height: calc(127/var(--h)*100%);     
    border-radius: 0 0 2.8% 2.8% / 0 0 10.7% 10.7%; 
    font-weight: 700; 
    color: #454545;
    background-color: #eeeeee;
    border-width: 1px; 
    border-style: none solid solid solid;
    border-color: #fafafa;
    box-shadow: 0 1px 3.5px -1px #6a6a6a;
    margin-top: calc(1/var(--h)*100%);
    margin-left: 3%;
}
.bx08 {
    position: relative;
    top: calc(25/127*100%);
    width: 100%;
    height: calc(43/127*100%); 
    display: flex;
    justify-content: center;
    align-items: center;   
    font-size: min(4.9cqh, 37px);   
}
.bx09 {
    position: relative;
    top: calc(25/127*100%);
    width: 100%;
    height: calc(33/127*100%);  
    display: flex;
    justify-content: center;
    align-items: center; 
    font-size: min(3.6cqh, 27px);
}
#scan {
    width: calc(452/var(--w)*100%);
    height: calc(452/var(--h)*100%);  
    display: flex;
    justify-content: center;
    align-items: center;  
    background-color: white;
    border-radius: 1.55%; 
    margin: 6.1% 3% 0 3%;    
}
#code {
    width: calc(396/452*100%);
    height: calc(396/452*100%);   
    display: flex;
    justify-content: center;
    align-items: center;     
}
canvas {
    width: 100%;
    height: 100%;   
}
.i09 {
    width: 100%;
    height: 100%;  
    background-image: url("i09.svg");
    background-size: contain;
    background-repeat: no-repeat;
    filter: opacity(80%);
}
#noti2 {
    position: relative;
    width: calc(452/var(--w)*100%);
    height: calc(69/var(--h)*100%);       
    display: flex; 
    justify-content: center;
    align-items: center; 
    font-size: min(3.05cqh, 23px);
    font-weight: 700; 
    margin: -39% 0 0 3%;
    border-radius: 1.3% / 8.7%; 
}