a{text-decoration: none;font-family: 'Pretendard';}
input{font-family: 'Pretendard';}
textarea{font-family: 'Pretendard';}
::placeholder{font-family: 'Pretendard';}
*{box-sizing: border-box;margin: 0;padding: 0;font-family: 'Pretendard';}
ul,ol,li{margin: 0;padding: 0;list-style: none;}
button{cursor: pointer; font-family: 'Pretendard';background-color: transparent;border: 0;}

input:focus,
select:focus,
textarea:focus{
    outline: none;
}

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    font-family: 'Pretendard';
    background-color: #fff;
    overscroll-behavior:none;
    -ms-overflow-style: none;
}
body{display: flex;flex-direction: column;align-items: center;justify-content: center;}
.section{width: 100%;height: 100%;padding: 120px 80px;}
.start-menu{display: flex;flex-direction: column;width: 100%;height: 100%;}
.start-title>p{font-size: 64px;font-weight: 700;color: #444;margin-bottom: 96px;text-align: center;}
.sm-wrap{height: 100%;width: 100%;display: flex;align-items: center;gap: 72px;}
.sm-item{width: 100%;height: 100%;padding: 72px;position: relative;transition: 0.3s;border-radius: 24px;box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.15);display: flex;flex-direction: column;gap: 40px;}
.sm-item.on{background-color: #2B9054;}
.sm-item>img{position: absolute;bottom: 0;right: 0;}
.sm-item:first-of-type>img{width: 400px;display: block;right: 16px;}
.sm-item:last-of-type>img{width: 350px;display: block;right: 32px;}
.sm-item>p{color: #444;font-size: 40px;transition: 0.3s;}
.sm-item.on>p{color: #fff;}
.sm-item>p>span{font-weight: 700;}
.sm-item>button{display: flex;align-items: center;gap: 20px;font-size: 54px;font-weight: 700;color: #2B9054;}
.sm-item.on>button{color: #fff;}
.sm-item .hover-img{display: flex;align-items: center;justify-content: center;width: 57px;height: 57px;position: relative;}
.sm-item .hover-img>img{transition: 0.3s;width: 100%;height: 100%;transform: translate(-50%, -50%);position: absolute;left: 50%;top: 50%;}
.sm-item .hover-img>img:last-of-type{opacity: 0;}
.sm-item.on .hover-img>img:last-of-type{opacity: 1;}
.sm-item.on .hover-img>img:first-of-type{opacity: 0;}

.bottom-txt{display: flex;align-items: center;justify-content: space-between;width: 100%;height: 84px;background-color: #2C2C2C;padding: 32px;}
.bottom-txt>img{display: block;height: 20px;width: auto;}
.bottom-txt>p{color: #fff;font-size: 28px;font-weight: 400;}

.common-wrap{width: 100%;height: 100%;display: flex;justify-content: space-between;}
.common-title>button{margin-bottom: 172px;width: 80px;height: 80px;display: flex;align-items: center;justify-content: center;border-radius: 16px;background-color: #ebebeb;}
.common-title>button>img{display: block;width: 32px;height: 32px;}
.ct-txt{display: flex;flex-direction: column;gap: 48px;}
.ct-txt>span{font-size: 40px;font-weight: 500;color: #6c6c6c;}
.ct-txt>p{color: #444;font-size: 56px;font-weight: 600;}
.ct-txt>p>span{color: #2B9054;font-weight: 800;}
.ct-txt>strong{font-weight: 700;color: #444;font-size: 36px;}
.common-item{padding: 0 200px;}
.input-num-wrap{width: 774px;display: flex;flex-direction: column;gap: 24px;}
.capture-wrap{gap: 24px;display: flex;flex-direction: column;width: 774px;}

.input-num-wrap>input{height: 110px;width: 100%;border-radius: 12px;border: 4px solid #2B9054;text-align: center;color: #2C423B;font-weight: 900;background-color: #fff;font-size: 50px;}
.input-num-wrap>input::placeholder{font-size: 50px;font-weight: 500;color: #9BA99D;}

.btn-wrap{display: flex;width: 100%;align-items: center;gap: 16px;}
.btn-wrap button{display: flex;align-items: center;justify-content: center;transition: 0.3s;width: 100%;height: 110px;border-radius: 12px;font-size: 54px;font-weight: 700;color: #fff;background-color: #2B9054;}
.btn-wrap button.desable{background-color: #f1f1f1;color: #b4b4b4;}



.numpad{display: flex;flex-wrap: wrap;margin-bottom: -16px;}
.numpad>button{display: flex;align-items: center;justify-content: center;font-size: 50px;font-weight: 700;color: #2C423B;background-color: #f1f1f1;border-radius: 12px;width: calc(33.333% - 10.666px);transition: 0.3s;margin-right: 16px;margin-bottom: 16px;height: 110px;position: relative;}
.numpad>button:nth-of-type(3n){margin-right: 0;}
.numpad>button.del{background-color: #fff;border: 4px solid #f1f1f1;font-size: 40px;color: #2C423B;}
.numpad>button>img{display: block;width: 49px;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);transition: 0.3s;}
.numpad>button:active{background-color: #EBF2ED;color: #2B9054;border-color: #EBF2ED;}
.numpad>button>img:last-of-type{opacity: 0;}
.numpad>button:active>img:last-of-type{opacity: 1;}

.capture-img-wrap{display: flex;flex-direction: column;gap: 20px;width: 100%;}
.capture-txt-wrap{display: flex;flex-direction: column;gap: 20px;width: 100%;}

.capture-re{width: 100%;display: flex;align-items: center;gap: 16px;justify-content: center;display: none;}
.capture-re>span{font-size: 28px;font-size: #3e3e3e;font-weight: 400;}
.capture-re>button{font-size: 28px;display: flex;align-items: center;justify-content: center;padding: 0px 29px;height: 52px;border-radius: 100px;border: 1px solid #7fa389;color: #0A802B;border-radius: ;}
.capture-txt-wrap>span{font-size: 24px;color: #777272;font-weight: 400;text-align: center;}

.capture-img{width: 100%;position: relative;border-radius: 12px;}
.capture-img-item{width: 100%;height: 536px;overflow: hidden;border-radius: 12px;border: 6px solid #f3f3f3;}
.capture-navigation{position: absolute;top: 0;width: 100%;height: 100%;pointer-events: none;left: 50%;transform: translateX(-50%);}
.capture-navigation>button{position: absolute;width: 68px;height: 100%;top: 0;pointer-events: auto;}
.capture-navigation>button:first-of-type{left: -68px;}
.capture-navigation>button:last-of-type{right: -68px;}
.capture-navigation>button>img{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);display: block;height: 40px;width: auto;transition: 0.3s;}
.capture-navigation>button>img:first-of-type{opacity: 0;}
.capture-navigation>button.desable>img:first-of-type{opacity: 1;}
.capture-navigation>button.desable>img:last-of-type{opacity: 0;}

.capture-loading{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) scale(0.9);width: 100%;height: 100%;background-color: #f3f3f3;border-radius: 12px;display: flex;align-items: center;justify-content: center;flex-direction: column;gap: 32px;text-align: center;font-size: 28px;color: #777272;pointer-events: none;transition: 0.3s;filter: blur(10px);opacity: 0;}

.capture-index{width: 100%;position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%) scale(0.9);height: 100%;display: flex;align-items: center;justify-content: center;pointer-events: none;opacity: 0;transition: 0.3s;filter: blur(10px);}
.capture-index.on{filter: blur(0);opacity: 1;transform: translate(-50%, -50%) scale(1);}
.check{width: 120px;aspect-ratio: 4/4;background-color: rgba(255, 255, 255, 0.8);display: flex;align-items: center;justify-content: center;border-radius: 100%;box-shadow: 0 20px 20px rgba(0, 0, 0, 0.15);border: 2px solid #f3f3f3;backdrop-filter: blur(10px);}
.check>img{width: 40px;height: auto;display: block;}
.index{border-radius: 100px;display: flex;height: 62px;padding: 0 30px;;align-items: center;gap: 8px;position: absolute;left: 50%;bottom: 32px;transform: translateX(-50%);background-color: rgba(0, 0, 0, 0.5);font-size: 32px;color: #fff;font-weight: 400;}
.index>strong{font-weight: 600;}



.capture-loading.on{filter: blur(0);opacity: 1;transform: translate(-50%, -50%) scale(1);}



/* HTML: <div class="loader"></div> */
.loader {
    width: 64px;
    padding: 10px;
    aspect-ratio: 1;
    border-radius: 50%;
    background: #0A802B;
    --_m: 
      conic-gradient(#0000 10%,#000),
      linear-gradient(#000 0 0) content-box;
    -webkit-mask: var(--_m);
            mask: var(--_m);
    -webkit-mask-composite: source-out;
            mask-composite: subtract;
    animation: l3 1s infinite linear;
  }
  @keyframes l3 {to{transform: rotate(1turn)}}