@charset "UTF-8";

.otp {height:100%; position:absolute; top:0; left:0; background:rgba(0,0,0,0.5); width:100%;display:flex; align-items:center; justify-content:center;}
.otp .inner { max-width:540px;position:relative;}
.otp.on {visibility: visible; opacity: 1; left:0;}
.otp .title { background:#22B2E9 no-repeat right 80px center; padding:15px 30px;}
.otp .title h1 {font-family: 'Dream Medium'; line-height: 30px; letter-spacing: -.05em; font-size: 20px; margin: 0; color:#fff; font-weight: normal;}
.otp-wrap {padding:29px; border:1px solid #d4d4d4; border-top:0; background: #fff;}
.otp-wrap .otp-input {padding:6px; background:url('../images/pattern.png') repeat;}
.otp-wrap .otp-input .inner {padding:20px 18px 25px 18px; background:#fff;}
.otp-wrap .otp-form::after {content:''; display: block; clear:both;}
.otp-wrap .otp-num {width:calc(100% - 92px); height:40px; float:left; padding:0 10px;}
.otp-wrap .otp-num::placeholder {font-family: 'Dream Regular'; color:#a0a0a0; font-size: 14px; letter-spacing: -.05em; line-height: 38px; }
.otp-wrap .otp-submit {width:85px; margin-left:5px; background:#22B2E9; color:#fff; font-size: 14px; font-family: 'Dream Regular'; height:40px; line-height: 30px; letter-spacing: -.05em; border:0; float:right;}
.otp-wrap .noti-txt {font-size: 14px; font-family: 'Dream Regular'; line-height: 20px; letter-spacing: -.05em; color:#666; padding:1px 0 2px 30px; position: relative; margin-top:20px;}
.otp-wrap .noti-txt::before {content:''; width:26px; height:22px; background:url('../images/ic-noti1.png') no-repeat center; position: absolute; left:0; top:0;}
.otp-wrap .mobile-download {display: flex; margin:0 -6px; padding-top:28px;}
.otp-wrap .mobile-download > div {padding:0 6px; width:50%;}
.otp-wrap .mobile-download .down-inner { border:1px solid #d4d4d4; border-radius:0 15px 15px 15px; overflow:hidden;}
.otp-wrap .mobile-download .img-box {height:50px; display: flex; align-items: center; justify-content: center;}
.otp-wrap .mobile-download .download-link {display: block; color:#333; background:#d4d4d4; font-size: 14px; font-family: 'Dream Regular'; line-height: 30px; letter-spacing: -.05em; text-align: center; padding:4px 0;}
.otp-wrap .mobile-download .download-link span {position: relative; height:100%; padding-right:35px; display: inline-block;}
.otp-wrap .mobile-download .download-link span::after {content:''; width:25px; height:19px; background: url('../images/ic-download.png') no-repeat center; position: absolute; right:0; top:5px;}

/* qr코드 */
.otp-wrap .otp-qr {padding:6px; background:url('../images/pattern.png') repeat; margin-top:10px;}
.otp-wrap .otp-qr .inner {padding:20px 18px 25px 18px; background:#fff}
.otp-wrap .otp-qr .noti-txt {margin-top:20px;}
.otp-wrap .otp-qr .qr-img-box {text-align: center;}
.otp-wrap .otp-qr .qr-img-box img {border:1px solid #d4d4d4;}

.otp .otp-close {float:right; width:60px; height:60px; font-family: 'Dream Regular'; background: #E4E4E4; border:none; cursor: pointer; position: relative; text-indent: -9999px; position: absolute; top:0;right:0;}
.otp .otp-close::after {content:''; width:30px; height:30px; position: absolute; top:50%; left:50%; margin-left:-15px; margin-top:-15px; background:url('../images/otp-close-btn.png') no-repeat center;}

.otp {background: rgba(0,0,0,.7); backdrop-filter: blur(10px); position: fixed; z-index: 100;}
.otp > .inner {width: 95%;}
.otp .title {background-color: #005128;}
.otp-wrap .otp-submit {background-color: #005128;}