/* reset */
*{margin:0;padding:0;font:inherit;color:inherit;}
*, :after, :before {box-sizing:border-box;}
:root {-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;text-size-adjust:100%;cursor:default;line-height:1.5;overflow-wrap:break-word;word-break:break-word;tab-size:4}
html, body {height:100%;}
img, picture, video, canvas, svg {display: block;max-width:100%;}
button {background:none;border:0;cursor:pointer;}
a {text-decoration:none}
table {border-collapse:collapse;border-spacing:0}
ul{list-style-type: none;}

/* font */
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
	font-display: swap;
	src: url('./font/PretendardVariable.woff2') format('woff2-variations');
}
body{
    overflow-y: scroll;
    overflow-x: hidden; 
    -webkit-overflow-scrolling: touch;
}
body, input, textarea, select, button, table {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
    font-family: 'Pretendard Variable';
}
:root{
    --respons: 1.5;
    --respons_height: 1;
    --respons_height_left: 0px;
    --m_c: #1EFC43;
    --info_m_c: #149b2a;
}
.wrap{
    color: #fff;
    margin: 0 auto;
    max-width: calc(562px * var(--respons));
    position: relative;
    height: 100dvh;
    overflow-x: hidden;
}
body{
    background-color: #000;
}
.header{
    display: flex;
    justify-content: flex-end;
    height: 60px;
}
.m_c{
    color: var(--m_c);
}
.info_m_c{
    color: var(--info_m_c)
}
.content{
    padding: 0 20px;
}
.campaign_title{
    display: inline-block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.5;
    border-bottom: 3px solid #fff;
    margin-bottom: 25px;
}
.visual_txt_wrap{
    opacity: 0;
}
.visual_txt_wrap h1{
    font-size: 35px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 25px;
}
.numcount{
    display: inline-block;
    width: 1.2em;
    text-align: right;
}
.sub_txt {
    display: inline;
    font-size: 18px;
    line-height: 1.5;
    font-weight: 700;
    padding-bottom: 2px;
    border-bottom: 2px solid #fff;
}
.sub_result_txt{
    margin-top: 5px;
    font-size: 12px;
    line-height: 1.5;
    font-weight: 400;
}
/* footer */
.footer{
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.footer_button{
    width: 100%;
    max-width: calc(562px * var(--respons));
    height: 70px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--m_c);
    color: #000;
    font-size: 20px;
    font-weight: 700;
}
.coin{
    position: absolute;
    background-image: url(../img/coin.png);
    width: calc(174px * var(--respons_height));
    height: calc(120px * var(--respons_height));
    background-size: cover;
    opacity: 0;
}
.coin.c01{
    bottom: 234px;
    left: calc(184px - 50px);
}
.coin.c02{
    bottom: 91px;
    left: calc(32px - 50px);
}
.coin_tower{
    opacity: 0;
    position: absolute;
    background-image: url(../img/coin_tower.png);
    width: calc(184px * var(--respons_height));
    height: calc(226px * var(--respons_height));
    background-size: cover;
    right: 16px;
    bottom: 98px;
    z-index: -1;
}
.coin_drop{
    opacity: 0;
    position: absolute;
    background-image: url(../img/drop_coin.png);
    width: calc(191px * var(--respons_height));
    height: calc(211px * var(--respons_height));
    background-size: cover;
    right: 50px;
    bottom: calc(261px + 55px);
    z-index: -1;
}
.visual_img_wrap *{
    transition: all .3s ease-out;
}
@media (max-width: 562px){
    :root{
        --respons: 1;
    }
    .coin.c01{
        left: calc(-4px + var(--respons_height_left) - 50px);
    }
    .coin.c02{
        left: calc(-122px + var(--respons_height_left) - 50px);
    }
    .coin_tower{
        right: -34px;
    }
    .coin_drop{
        right: 0px;
    }
        
}
@media (max-width: 345px){
    .campaign_title{
        font-size: 16px;
        margin-bottom: 10px;
    }
    .visual_txt_wrap h1{
        font-size: 32px;
        margin-bottom: 20px;
    }
    .sub_txt{
        font-size: 16px;
    }
    .footer_button{
        font-size: 18px;
    }
}
@media (max-height: 773px) or (max-width: 345px){
    .coin_drop{
        bottom: calc(261px + 15px);
    }
    :root{
        --respons_height: 0.8;
        --respons_height_left: 30px;
    }
}
@media (max-height: 746px){
    .coin.c01{
        bottom: unset;
        top: 458px;
    }
    .coin.c02{
        bottom: unset;
        top: 567px;
    }
    .coin_drop{
        bottom: unset;
        top: calc(340px - 15px);
    }
    .coin_tower{
        bottom: unset;
        top: 488px;
    }
    .wrap.info{
        margin-top: 20px;
    }
}
.coin_drop_ani{
    animation: coin_ani 3s ease-in-out infinite;
}
@keyframes coin_ani {
    0% {
        transform: translate(0px, 50px);
    }
    50% {
        transform: translate(0px, 30px);      
    }
    100% {
        transform: translate(0px, 50px);
    }
}

/* 모달 */
.info_modal{
    position: fixed;
    top: 0; 
    width: 100%;
    height: 100%;
    margin: auto;
    max-width: calc(562px * var(--respons));
}
.modal_bg{
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
}
.modal_inner{
    height: calc(100% - 80px);
    width: calc(100% - 40px);
    max-width: 520px;
    margin: auto;
    background-color: #fff;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 30px 20px;
}
.modal_content{
    position: relative;
    color: #000;
    max-height: calc(100% - 70px);
    overflow-y: scroll;
}
.modal_inner h3{
    font-size: 16px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 10px;
}
.modal_content p{
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}
.modal_content p a{
    text-decoration: underline;
    color: #01f;
}
.modal_content ul{
    padding-left: 1em;
}
.modal_content li{
    list-style-type: disc;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5;
}
.modal_content ul li:not(:last-child){
    margin-bottom: 1em;
}
.modal_close{
    display: block;
    background-color: var(--info_m_c);
    color: #fff;
    position: absolute;
    bottom: 30px;
    width: calc(100% - 40px);
    border-radius: 12px;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.inq_sub_txt{
    font-size: 12px;
    font-weight: 400;
    color: #bbb;
    line-height: 1.5;
}
.inq_sub_txt b{
    font-weight: 700;
}
.mb20{
    margin-bottom: 20px;
}
.info_modal{
    display: none;
}

/* 결과페이지 */
.result_txt{
    margin-top: 30px;
}
.result_txt h2{
    font-size: 16px;
    font-weight: 700;
}
.result_txt p{
    font-size: 14px;
}
.result_txt b{
    font-weight: 700;
}
.result_table_wrap{
    margin-top: 5px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius: 12px;
    padding: 10px 20px;
    color: #000;
    font-size: 14px;
}
.result_table_wrap table{
    width: 100%;
}
.result_table_wrap table th{
    font-size: 13px;
    font-weight: 700;
    text-align: center;
}
.result_table_wrap table td{
    font-size: 13px;
    font-weight: 400;
    text-align: center;
    padding: 2px 0;
}
p.result_sub{
    font-size: 12px;
}
/* 하단 내용 추가 */
.wrap.info{
    position: relative;
    padding: 30px 20px 180px;
    min-height: unset;
    height: unset;
    z-index: -1;
    color: #ccc;
}
.wrap.info::after{
    width: calc(100% - 40px);
    height: 2px;
    content: "";
    background-color: #fff;
    display: block;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
}
.wrap.info h3{
    font-size: 15px;
    font-weight: 700;
    line-height: 1.5;
    margin-bottom: 10px;
}
.wrap.info p{
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}
.wrap.info p a{
    text-decoration: underline;
    color: #eee;
    font-weight: 700;
}
.wrap.info ul{
    padding-left: 1em;
}
.wrap.info li{
    list-style-type: disc;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
}
.wrap.info ul li:not(:last-child){
    margin-bottom: 1em;
}
.button_info{
    padding: 20px 25px;
    font-size: 14px;
    font-weight: 400;
}
/* 개인정보 처리방침 */
.check_wrap{
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #50dd5a;
    width: 100%;
    color: #000;
    font-size: 14px;
    gap: 5px;
    font-weight: 700;
    max-width: calc(562px * var(--respons));
    border-bottom: 1px solid #000;
    border-top: 1px solid #000;
}
.check_wrap input[type="checkbox"]{
    width: 14px;
    height: 14px;
}
.toggle_privacy{
    background-color: #000;
    padding: 0px 5px;
    color: #fff;
}
.privacy_info_wrap{
    display: none;
    width: 100%;
    background-color: #50dd5a;
    max-width: calc(562px * var(--respons));
    font-size: 12px;
    border-top: 1px solid #000;
}
.privacy_info_wrap.on{
    display: block;
}
.privacy_info_wrap table{
    margin: 5px 0;
    color: #000;
    text-align: center;
    width: 100%;
}
.privacy_info_wrap table th{
    font-weight: 700;
    padding: 5px;
    border-bottom: 1px solid #000;
}
.privacy_info_wrap table th:not(:last-child){
    border-right: 1px solid #000;
}
.privacy_info_wrap table td{
    width: 33%;
    padding: 5px;
}
.privacy_info_wrap table td:not(:last-child){
    border-right: 1px solid #000;
}