*{margin:0; padding:0;}
html{height:100%;}
/* .wrapper {height:100%;} */
body.keypad_body{height:100%; margin:0; padding:0; position:relative; -webkit-text-size-adjust:none; background-color:var(--line);  }
table{border-collapse:collapse;}
.bg_white {background:var(--white);}
/* .input_guide {font-size:1.4rem; font-weight: 400; text-align: center; font-family: "noto_sans"; padding:0  20px;} */
.input_guide p:nth-child(1) {font-size:1.4rem; font-weight: 400; text-align: center; font-family: "noto_sans, sans-serif"; padding:0  20px;}
/* 230316 */
/* .keypad_wrap{display:table; table-layout:fixed; width:100%; min-height:100%;} */
/* 230321 */
/* .keypad_wrap{display:table; table-layout:fixed; width:100%; min-height: calc(100vh - 50px);} */
.keypad_wrap{display:table; table-layout:fixed; width:100%; min-height: calc(100vh - 50px); min-height: calc(100svh - 50px);}
.keypad_inputwrap{display:table-row; height:1px;}
/* .keypad_h100{height:100%;} */
.keypad_h100{height:100%; max-height: 100vh; max-height: 100svh;}
.keypad_wrap {width:100%; max-width:768px; margin:0 auto;}
.keypad_pininput{position:relative; display:table-cell; vertical-align:middle;}
/* .keypad_box{position:relative; padding:50px 0;} */
/* 230321 키패드 사이즈 변경 */
.keypad_box{position:relative; padding:30px 0;}
/* 새 비밀번호 css 추가 */
.new_keypad_box{position:relative; padding:30px 0 0;} 
.enter_keypad{ width: 100%; height:80px; color: var(--white); text-align:center; cursor:pointer; padding: 20px 40px;  font-family: "montserrat"; font-weight: 500;  font-size:2.6rem; -webkit-tap-highlight-color:transparent; border:0; outline:none; -webkit-appearance:none; -moz-appearance:none; appearance:none; background-color:transparent; }
/* .enter_keypadbox{width:100%; margin:0 auto; table-layout:fixed; position:relative; padding-top:46px; } */
/* 230321 키패드 사이즈 변경 */
.enter_keypadbox{width:100%; margin:0 auto; table-layout:fixed; position:relative; }
/* .send_info { padding-top: 32px; text-align: center; font-size: 2.2rem; font-weight: 700; font-family: "noto_sans";} */
.pinnumber:last-child { margin-right: 0;}
.pinnumber { margin-right: 14px; width: 18px; height: 18px; padding-top: 10px; border-radius: 50%; background-color: var(--inactive);}
.delete_img {width:30px;}
.enter_keypadwrap{min-height:252px; padding:16px 18px; width:100%; max-width:768px; margin:0 auto;}
.pin_active {  background-image: linear-gradient(to right, #2E9DCD , #523B88); }
.klay_logo img, .enter_keypad img {margin:0 auto;}

.password_error { color:#FF0000; font-weight: 400; margin-top:6px; font-family: "montserrat"; font-size:1.4rem; }
.password_resest a {text-decoration: underline;}
.password_resest { padding-top:46px; font-family: "noto_sans";  font-size:1.4rem; font-weight: 400;}
/*가입완료*/
.join_content{display:table; table-layout:fixed; width:100%; min-height:100%;}
.join_row{display:table-row;}
.join_row_full{height:100%; vertical-align:middle;}

/* .congrats_text{padding:90px 40px 0px;} */
/* .congrats_name{margin:20px 0 10px; font-size:3rem; font-weight:500; color:var(--main); text-align: center;} */
.congrats_text{padding:70px 40px 0px;}
.congrats_name{margin:30px 0 10px; font-size:3rem; font-weight:500; color:var(--main); text-align: center;}
.congrats_desc{font-size:2.6rem; font-weight:400; color:var(--black);  text-align: center;}

.congrats_img{display:table-cell; text-align:center; vertical-align:middle;}
.congrats_img img{display:inline-block; width:135px; height:135px;}

.com_text{padding:0 20px 147px; text-align:center; position:relative;}
.com_text_small{font-size:1.4rem; font-weight:500; color:var(--dark);}
.com_text_normal{font-size:2.6rem; font-weight:400; color:var(--black);}
.com_text_main{margin:6px 0 20px; font-size:3.8rem; font-weight:500; color:var(--main);}
.com_text .btn_con{position:absolute; left:50%; bottom:32px; transform:translateX(-50%); width:calc(100% - 40px);}


/*카카오*/
.kakao_inquiry_content{display:table; table-layout:fixed; width:100%; min-height:100%; padding-top:60px;}
.kakao_inquiry_row{display:table-row;}
.kakao_inquiry_full{height:100%;}
.kakao_inquiry_desc{padding-top:50px; font-size:1.6rem; font-weight:400; text-align:center;}
.kakao_main_img{display:table-cell; text-align:center; vertical-align:middle;}
.kakao_main_img img{display:inline;}
.kakao_service_info{padding:0 20px 120px; position:relative;}
.kakao_info_title{margin-bottom:20px; font-size:1.8rem; font-weight:700;}
.kakao_info_box{padding:20px; background-color:#FAFBFA; border-radius:10px; font-size:1.4rem; font-weight:500; color:var(--dark);}
.kakao_service_time{margin-bottom:10px;   color:var(--main);}
.kakao_service_info .btn_con{position:absolute; left:50%; bottom:32px; transform:translateX(-50%); width:calc(100% - 40px);}
.kakao_main_img img {width:180px; height:180px;}

/*쇼핑몰 결제*/
.shopping_wrap {width:100%; max-width:768px; margin:0 auto;}
.shopping_wrap .enter_keypadwrap {min-height:90px; background-color: transparent; padding:0;}
.terms_of_purchase { background-color: #FAFBFA; padding: 16px 0; text-align: center; border-radius: 10px; }
.purchase_agree {display:flex; justify-content: center; align-items: center; font-size: 1.4rem; font-weight: 500; font-family: "noto_sans"; color: var(--dark);}
.purchase_agree img {margin-right:10px;}
.shopping_wrap .enter_keypadbox {padding-top:0;}
.shoporder_wrap, .paymentinfo_wrap, .total_amount {font-family: "noto_sans";}
.shopping_wrap .btn_box {margin-top:20px;}
.shopping_wrap .oder_franlist {margin-top:10px; display: inline-block;}


/*220616 레이아웃 구조변경으로 인한 레이아웃 추가 :SJW */
.index_box .enter_keypadwrap { min-height:58px; background-color:transparent; padding:0 20px 32px;}
.index_box .keypad_pininput {vertical-align: top; padding:0 40px; font-family: "noto_sans";}
.index_box .enter_keypadbox {padding-top:0;}
.index_box .klay_logo img {margin:0; padding-top:90px;}

/*송금하기*/
.send_wallet_wrap {width:100%; max-width:768px; margin:0 auto;}
.send_wallet_wrap .keypad_pininput {vertical-align: top;}
.send_wallet_wrap .enter_keypadwrap {min-height:120px; background: transparent; padding:0 20px 32px;}
.send_wallet_wrap .enter_keypadbox {padding-top:0;}
.send_wallet_wrap .check_sender {margin-top:0;}
.send_wallet_wrap .check_sender {padding:0;}
.send_finimg .send_klay_logo {padding:114px 20px 28px;}
.send_wallet_wrap .enter_keypadwrap.min_h {min-height:58px;}

/*클레이페이 소개*/
.klay_introbox {max-width:768px; margin:0 auto;background: linear-gradient(to top, #fff, #E6F0FE); width: 100%; height: 100%;}
.klay_introbox .enter_keypadwrap {padding:26px 20px 46px; min-height:180px; background: var(--white); height:316px;}
.klay_introbox .klay_choice {padding:0;}
.klay_introbox .klay_lntrobox {padding:0;}
.klay_introbox .klay_lntrstitle {padding-bottom:44px;}
.klay_introbox .klay_lntrtitle {padding-bottom:20px;}
.klay_introbox .enter_keypadbox {padding-top:0;}
.klay_introbox .klay_slider .swiper-wrapper {padding:0;}
.klay_introbox .klay_slider {background: transparent;}
.klay_introbox .intro_img {width:100%;}
.klay_introbox .intro_img img {position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); max-width:50%;}
.klay_introbox .keypad_inputwrap  { position: relative;}
.klay_korea {font-size:1.4rem; font-weight: 500; color:var(--dark);}
.klay_maint {color:var(--main); font-size:3.8rem; font-weight: 500;}
.klay_now { font-size:1.6rem; font-weight: 400;  padding:20px 0 40px;}
.korea_klay .enter_keypadwrap {padding:40px 20px 32px;}


/*신규작업중*/
.klay_new {max-width:768px; margin:0 auto;background: linear-gradient(to top, #fff, #E6F0FE); width: 100%; height: 100%;}
.klay_new .enter_keypadwrap {min-height:0; background-color:transparent;}
.klay_new .new_img {width:100%;  height:200px; margin-bottom:10px;}
.klay_new .new_img img {height:200px; margin:0 auto;}
.klay_new .klay_new_slider { height:100%;}
.klay_new .keypad_pininput {display: block; height:100%;}
.klay_new .keypad_wrap {height:100%;}
.klay_new .enter_keypadbox {padding-top:120px; }
.new_itro {position: absolute; top:50%;  left:50%; transform: translate(-50%, -50%);}
.klay_new .klay_lntrobox {padding:0; }
.klay_new .klay_lntrstitle {padding:20px 0 0; }
.klay_new .klay_now {padding:0;}
.klay_new .skip_txt {position: absolute; top:calc(100% - 110px); left:50%; transform: translate(-50%, -50%); font-size:1.4rem; font-weight: 500; padding-bottom:20px; color:var(--dark); text-align: center; z-index:1000; cursor:pointer;}
.klay_new .last_slider .new_img {margin-bottom:30px;}
.klay_new .swiper-pagination {bottom:60px !important;}


/* 키패드 문구/에러문구 */
.input_guide {margin-bottom:5px; font-size: 1.4rem;}
.input_guide + small {padding-top:10px; font-size: 1.4rem; font-weight: 700;}
.input_guide > small {padding-top:10px; font-size: 1.4rem; font-weight: 700;}

/* 핀번호가 기억이 안나요 */
.lost_pin { position:absolute; bottom:0; left:0; width:100%; text-align:center; padding-bottom: 20px; }
.lost_pin p {display:inline-block; font-size:1.4rem; border-bottom:1px solid var(--black);}

@media only screen and (max-height:668px){
 /* .send_info { padding-top: 20px; } */
 .keypad_box { padding: 15px 0; }
 }

@media only screen and (max-width:767px){
.shopping_wrap .shoporder_wrap {margin-top:30px;}
.shopping_wrap .btn_wrap {padding:0 20px 30px}
.shopping_wrap .btn_box {margin-top:10px;}
.shoporder_wrap, .paymentinfo_wrap, .total_amount {padding:10px 20px !important;}
.klay_introbox .intro_img img {max-width:100%;}
.klay_introbox .keypad_pininput {display: block;}
.klay_introbox .keypad_inputwrap  { position: relative; display: block;}
.klay_introbox .klay_slider {height:496px;}
.intro_img2 img {max-width:60% !important;}
/* .klay_new .enter_keypadbox {padding-top:50px;} */
/* 230321 keypad 사이즈 변경 */
.klay_new .enter_keypadbox {padding-top:30px;}
}


@media only screen and (max-width:550px){
  .mypinchange {min-height:0;}
  /* .mypinchange .enter_keypad {padding:0; height:56px;} */
  /* 230321 keypad 사이즈 변경 */
  .mypinchange .enter_keypad {padding:0; height:80px;}
}




@media only screen and (max-width:480px){
  .congrats_name{margin:10px 0 5px;}
  .com_text{padding:0 20px 117px;}
  .com_text_main{margin:3px 0 10px;}
}

@media only screen and (max-height:736px){
  .klay_introbox .klay_slider {height:420px;}
}


@media only screen and (max-height:667px){
.shopping_wrap .shoporder_wrap {margin-top:20px;}
.shopping_wrap .popup_txt {padding:10px 0 0;}
.send_wallet_wrap .sendwallet_infomation {padding:8px 20px 0;}
.send_wallet_wrap .fees_check {margin-bottom:10px; margin-top:2px;}
.send_wallet_wrap .addr_txt {margin:12px 0 10px;}
.send_wallet_wrap .waring_amount {margin-top:6px;}
.send_wallet_wrap .sendwallet_box {padding:10px 20px;}
.send_wallet_wrap .enter_keypadwrap {padding:0 20px 30px;}
.send_wallet_wrap .sender_finbox {margin-top:40px;}
.klay_introbox .klay_slider {height:350px;}
.klay_new .enter_keypadbox {padding-top:0; }
}




/*아이폰 노치영역 대응*/
@supports(margin-right:env(safe-area-inset-right)){
  .notch_area{margin-right:env(safe-area-inset-right); margin-left:env(safe-area-inset-left);}
  .enter_keypadwrap{padding:16px calc(18px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(18px + env(safe-area-inset-left));}
  .klay_introbox .enter_keypadwrap {
    padding:26px calc(20px + env(safe-area-inset-right)) calc(46px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));
  }
  .korea_klay .enter_keypadwrap {padding:40px calc(20px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));}
  .klay_new .enter_keypadwrap {padding:0 calc(20px + env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) calc(20px + env(safe-area-inset-left));}
}