body{
	overflow: scroll;
    background-color: #FFF3D6;
}
.screen{
	max-width: 480px;
	width: 100%;
	min-height: 100dvh;
	margin: 0 auto;
    position: relative;
    /* background-color: #FFF3D6; */
    padding: 0 20px;
    padding-bottom: 70px;
}
.max_cont{
    max-width: 300px;
    margin: 0 auto;
}
.loader {
    width: 50px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: 
        radial-gradient(farthest-side,#00BC83 94%,#0000) top/8px 8px no-repeat,
        conic-gradient(#0000 30%,#00BC83);
    -webkit-mask: radial-gradient(farthest-side,#0000 calc(100% - 8px),#000 0);
    animation: l13 1s infinite linear;
    margin: 0 auto;
    margin-top: 25px;
}
@keyframes l13{ 
    100%{transform: rotate(1turn)}
}
.loader.blue{
    background: 
        radial-gradient(farthest-side,#0066CC 94%,#0000) top/8px 8px no-repeat,
        conic-gradient(#0000 30%,#0066CC);
}



.qr_landing{

}
.qr_landing .text01{
    font-size: 35px;
    font-family: 'LotteriaChwapttaenggyeo';
    display: flex;
    justify-content: center;
    position: relative;
    padding-top: 80px;
    margin-bottom: 15px;
}
.qr_landing .text01 > div.color01{
    color: #0066CC;
}
.qr_landing .text01 > div.color02{
    color: #00BC83;
}
.qr_landing .text01 > div.color03{
    color: #FC7600;
}
.qr_landing .text01 > div.color04{
    color: #E270D3;
}
.qr_landing .text01 > div.color05{
    color: #0066CC;
}
.qr_landing .text01 > div.color06{
    color: #00BC83;
}
.qr_landing .text01 > div.color07{
    color: #FC7600;
}
.qr_landing .text01 > div.color08{
    color: #E270D3;
}
.qr_landing .text01 > div.color09{
    color: #0066CC;
}
.qr_landing .text01 > div.color10{
    color: #00BC83;
}
.qr_landing .text01 .open_date{
    position: absolute;
    top: 25px;
    left: 50%;
    transform: translateX(-50%);
    background: url(/assets/image/img_balloon01.svg) center center no-repeat;
    background-size: contain;
    width: 205px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #FFEF63;
    font-family: "Coiny", system-ui;
}
.qr_landing .card_st01{
    background: #00BC83 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 0px #00704E;
    border: 2px solid #00704E;
    border-radius: 20px;
    position: relative;
    min-height: 200px;
    padding: 30px 20px;
}
.qr_landing .card_st01::before{
    content: "";
    position: absolute;
    top: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: 25px;
    /* UI Properties */
    background: #00BC83 0% 0% no-repeat padding-box;
    box-shadow: 0px -2px 0px #078B63;
    border-radius: 17px;
    z-index: 0;
}
.qr_landing .card_st01::after{
    content: "";
    position: absolute;
    bottom: 12px;
    left: 12px;
    width: calc(100% - 24px);
    height: 25px;
    /* UI Properties */
    background: #00BC83 0% 0% no-repeat padding-box;
    box-shadow: 0px 2px 0px #9FFEE1;
    border-radius: 17px;
    z-index: 0;
}
.qr_landing .card_st01 .in_wrap{
    position: relative;
    z-index: 1;
}
.qr_landing .card_st01 .tit{
    position: relative;
    display: flex;
    justify-content: center;
    text-align: center;

}
.qr_landing .card_st01 .tit::before{
    content: "";
    width: 100%;
    height: 10px;
    background: url(/assets/image/img_yellow_line.svg) repeat no-repeat;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}
.qr_landing .card_st01 .tit .text{
    position: relative;
    background: #00BC83;
    font-size: 26px;
    font-family: 'Paperlogy';
    font-weight: 700;
    color: #004C98;
}
.qr_landing.qr_youth .card_st01 .tit .text{
    background: #0066CC;
    color: #00BC83;
}
.qr_landing .card_st01 .tit .text .color_white{
    color: #fff;
}
.qr_landing .card_st01 .con{
    padding-top: 15px;
    text-align: center;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.4;
    color: #fff;
}
.qr_landing .card_st01 .con .color_text{
    font-weight: 500;
    color: #FFEF63;
}
.qr_landing .card_st01.yellow{
    background: #F9DD77 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 0px #813D00;
    border: 1px solid #813D00;
}
.qr_landing .card_st01.yellow::before{
    background: #F9DD77 0% 0% no-repeat padding-box;
    box-shadow: 0px -2px 0px #EDA132;
}
.qr_landing .card_st01.yellow::after{
    background: #F9DD77 0% 0% no-repeat padding-box;
    box-shadow: 0px 2px 0px #FFEEB8;
}
.qr_landing .card_st01.blue{
    background: #0066CC 0% 0% no-repeat padding-box;
    box-shadow: 0px 3px 0px #004C98;
    border: 2px solid #004C98;
}
.qr_landing .card_st01.blue::before{
    background: #0066CC 0% 0% no-repeat padding-box;
    box-shadow: 0px -2px 0px #005AB4;
}
.qr_landing .card_st01.blue::after{
    background: #0066CC 0% 0% no-repeat padding-box;
    box-shadow: 0px 2px 0px #9FCBFE;
}
.qr_landing .card_st01 + .card_st01{
    margin-top: 50px;
}
.qr_landing .card_st01 .deco_ribbon{
    position: absolute;
    top: -21px;
    left: 0;
    left: 50%;
    transform: translateX(-50%);
    min-width: 200px;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap{
    padding-top: 15px;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap .title{
    letter-spacing: 0px;
    color: #813D00;
    font-size: 16px;
    font-weight: 400;
    text-align: center;
    line-height: 1.3;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap .form_wrap{
    margin-top: 15px;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap .form_wrap #messageForm{
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap .form_wrap #messageForm .input_wrap{
    background: #FFEEB8 0% 0% no-repeat padding-box;
    border: 1px solid #D3AF53;
    border-radius: 10px;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap .form_wrap #messageForm .input_wrap input{
    width: 100%;
    min-height: 40px;
    border: 0;
    background-color: transparent;
    padding: 0 15px;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap .form_wrap #messageForm .input_wrap input::placeholder{
    color: #D3AF53;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap .form_wrap #messageForm .input_wrap textarea{
    max-width: 100%;
    width: 100%;
    height: 80px;
    background: transparent;
    border: 0;
    padding: 11px 15px;
    resize: none;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap .form_wrap #messageForm .input_wrap textarea::placeholder{
    color: #D3AF53;
}
.qr_landing .card_st01 .deco_ribbon + .in_wrap .form_wrap #messageForm .register_btn{
    background-color: #00BC83;
    border: 1px solid #00704E;
    border-radius: 200px;
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    padding: 15px 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    margin-top: 10px;
}
.qr_landing.qr_youth .card_st01 .deco_ribbon + .in_wrap .form_wrap #messageForm .register_btn{
    background: #0066CC 0% 0% no-repeat padding-box;
    border: 1px solid #004C98;
}

.qr_landing .deco_tile{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
}
.qr_landing .deco_tile .floor{
    display: flex;
    flex-wrap: wrap;
}
.qr_landing .deco_tile .floor .box{
    width: 5%;
    aspect-ratio: 1/1;
}
.qr_landing .deco_tile .floor:nth-of-type(1) .box:nth-of-type(2n-1){
    background-color: #9cdeb6;
}
.qr_landing .deco_tile .floor:nth-of-type(2) .box:nth-of-type(2n){
    background-color: #9cdeb6;
}

.qr_landing .total_num{
    margin-top: 25px;
    margin-bottom: 8px;
    letter-spacing: -0.32px;
    color: #813D00;
    font-size: 16px;
}
.qr_landing .total_num span{
    color: #00BC83;
    font-weight: 600;
}
.qr_landing.qr_youth .total_num span{
    color: #0066CC;
}
.qr_landing .collection{
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.qr_landing .collection .item{
    box-shadow: 0px 3px 0px #813D00;
    border: 1px solid #813D00;
    border-radius: 20px;
    background: #D7F8D9;
    padding: 15px;
}
.qr_landing .collection .item.green{
    background-color: #D7F8D9;
}
.qr_landing .collection .item.blue{
    background-color: #DCF3FF;
}
.qr_landing .collection .item.red{
    background-color: #FFDCDC;
}
.qr_landing .collection .item .top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 8px;
    border-bottom: 1px solid #813d009e;
    margin-bottom: 10px;
}
.qr_landing .collection .item .top .area{
    display: flex;
    align-items: center;
}
.qr_landing .collection .item .top .name{
    letter-spacing: 0px;
    color: #813D00;
    font-size: 16px;
    font-weight: 600;
}
.qr_landing .collection .item .top .date{
    letter-spacing: 0px;
    color: #813D00;
    font-size: 400;
    font-size: 15px;
    opacity: 0.5;
}
.qr_landing .collection .item .top .remove_btn{
    background-color: #813D00;
    width: 21px;
    aspect-ratio: 1/1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-left: 10px;
}
.qr_landing .collection .item .bottom{

}
.qr_landing .collection .item .bottom .text{
    letter-spacing: 0px;
    color: #813D00;
    font-size: 16px;
    line-height: 1.3;
}
.qr_landing .collection .loading{
    display: flex;
    justify-content: center;
    margin-top: 25px;
}


.confirm_pop{
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    display: flex;
    align-items: safe center;
    justify-content: center;
    z-index: 1;
    background-color: #00000079;
    display: none;
}
.confirm_pop .in{
    width: 290px;
    height: 200px;
    border-radius: 19px;
    background: #FFFFFF 0% 0% no-repeat padding-box;
    box-shadow: 0px 5px 0px #00BC83;
    border: 2px solid #00BC83;
    padding: 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.confirm_pop.blue .in{
    box-shadow: 0px 5px 0px #0066CC;
    border: 2px solid #0066CC;
}
.confirm_pop .cont{
    padding-top: 30px;
    padding-left: 17px;
    padding-right: 17px;
    text-align: center;
}
.confirm_pop .cont h2{
    font-weight: 400;
    font-size: 18px;
}
.confirm_pop .cont input{
    border-radius: 10px;
    width: 100%;
    height: 40px;
    border: 0;
    padding: 0 15px;
    margin-top: 10px;
    background-color: #DBF6ED;
}
.confirm_pop.blue .cont input{
    background: #EBF3FB 0% 0% no-repeat padding-box;

}
.confirm_pop .btn{
    display: flex;
    gap: 5px;
}
.confirm_pop .btn .bt{
    height: 40px;
    flex: 1;
    background-color: orange;
    border-radius: 10px;
    color: #fff;
}
.confirm_pop .btn .bt.cancel{
    background-color: #24272A;
}
.confirm_pop .btn .bt.remove{
    background-color: #00BC83;
}
.confirm_pop.blue .btn .bt.remove{
    background-color: #0066CC;
}